Add Custom Field to Appointment

[zech5443Participant]

I am using jqxscheduler, I wish to create some custom text field & drop down to appointment dialog, is there any example i can refer to?
Thank you in advance.

[Yavor DashevParticipant]

Hi zech5443,

The functionality you want can be achieved by using editDialogCreate callback of the jqxScheduler.
More info about it you can see at the jqxScheduler API:
https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxscheduler/jquery-scheduler-api.htm

Also have prepared a quick code snippet for you to see how you can use it:

$("#scheduler").jqxScheduler({
                date: new $.jqx.date(2017, 11, 23),
                width: getWidth("Scheduler"),
                height: 600,
                source: adapter,
                showLegend: true,
                // called when the dialog is craeted.
                editDialogCreate: function (dialog, fields, editAppointment) {
                  
                   
                    fields.repeatContainer.hide(); 
                    fields.statusContainer.hide();
                    fields.timeZoneContainer.hide();
                    fields.colorContainer.hide();

                    var source = [
                            "Affogato",
                            "Americano",
                            "Bicerin",
                            "Breve"
                        ];

                    var dropdown = '<div id="dropDown"> </div>';
                    var input  = '<div id="input"> </div>';
                    
                    fields.resourceLabel.append(dropdown);
        
                    $("#dropDown").jqxDropDownList({ source: source, placeHolder: "Select Item", width: 250, height: 30});
               
                },

And we have a complete demo about similar functionality as the one you need:https://jseditor.io/?key=scheduler-edit-dialog-

Let me know if that works for you!

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

[zech5443Participant]

Hi Yavor Dashev,

Thank you for your reply.
It seen like it was added to “Owner” label.
If i would to add multiple drop dropdown, how can i add the label and align each of my drop down?

 fields.resourceLabel.html("Owner");
					var source_A = [
                            "Affogato1",
                            "Americano1",
                            "Bicerin1",
                            "Breve1"
                        ];
					var source = [
                            "Affogato",
                            "Americano",
                            "Bicerin",
                            "Breve"
                        ];

                    var dropdown = '<div id="dropDown"> </div> </div>';
                    var input  = '<div id="input"> </div>';
					
					var dropdown_A = '<div id="dropDown_A" > </div>';
                    var input_A  = '<div id="input_A"> </div>';
					
                    fields.resourceLabel.append(dropdown_A);
					fields.resourceLabel.append(dropdown);
        
                    $("#dropDown").jqxDropDownList({ source: source, placeHolder: "Select Item", width: 250, height: 30});
					$("#dropDown_A").jqxDropDownList({ source: source_A, placeHolder: "Select Item", width: 250, height: 30});

[Yavor DashevParticipant]

Hi zech5443,

I have modified the code that you have shared to have the functionality you need:

  	var source_A = [
                            "Affogato1",
                            "Americano1",
                            "Bicerin1",
                            "Breve1"
                        ];
					var source = [
                            "Affogato",
                            "Americano",
                            "Bicerin",
                            "Breve"
                        ];

                    var dropdown = ' <div class="custom-field-container"> <div  class="custom-label"> Label 1 </div> <div class="custom-field"  id="dropDown"> </div> </div>';
                    var input  = '<div id="input"> </div>';
					
					var dropdown_A = '<div class="custom-field-container"> <div class="custom-label"> Label 1 </div> <div class="custom-field"  id="dropDown_A"> </div> </div>';
                    var input_A  = '<div id="input_A"> </div>';
                   
               
                    fields.resourceLabel.append(dropdown_A);
					fields.resourceLabel.append(dropdown);
                    
                   
                    $("#dropDown").jqxDropDownList({ source: source, placeHolder: "Select Item", width: 380, height: 30});
				    $("#dropDown_A").jqxDropDownList({ source: source_A, placeHolder: "Select Item", width: 380, height: 30});

And also it will need the following CSS:

        .custom-field-container {
            display: -webkit-inline-box;
            margin-left: 40%;
        }
        .custom-label{
            margin: 5px 18px;
        }

Let me know if that works for you!

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

[Author]

Posts