jQuery UI Widgets Forums Scheduler Add Custom Field to Appointment

Tagged: 

This topic contains 3 replies, has 2 voices, and was last updated by  Yavor Dashev 10 months, 3 weeks ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Add Custom Field to Appointment #120442

    zech5443
    Participant

    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.

    Add Custom Field to Appointment #120448

    Yavor Dashev
    Participant

    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

    Add Custom Field to Appointment #120456

    zech5443
    Participant

    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});
    Add Custom Field to Appointment #120463

    Yavor Dashev
    Participant

    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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.