jQuery UI Widgets Forums Scheduler Changing the Appointment Fields

This topic contains 15 replies, has 3 voices, and was last updated by  Hristo 5 years, 3 months ago.

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
  • Changing the Appointment Fields #92321

    Oussama
    Participant

    Hi,
    How to change the file: “jqxscheduler.js” to put other informations in the appointment field, I also need to change it from a simple text input to a select option list.
    I use angular 2.

    Changing the Appointment Fields #92344

    Hristo
    Participant

    Hello Oussama,

    All demos can be recreated with ‘Angular 2’.
    Please, take a look at this demo:
    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxscheduler/scheduler-edit-dialog.htm?light
    (pay attention to “Print” button)

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    Changing the Appointment Fields #92397

    Oussama
    Participant

    Hello Hristo,

    Thanks for your help, but whene trying to apply the same thing for ‘fields’ (because I need to add a new label and a new input in place of a simple button) like this:
    //——————————————————-
    var test =
    $(`<div>
    <div class=’jqx-scheduler-edit-dialog-label’>Test</div>
    <div class=’jqx-scheduler-edit-dialog-field’>
    <input class=’jqx-widget-content jqx-input jqx-widget jqx-rc-all’ style=’width: 100%; height: 25px; box-sizing: border-box;’ type=’text’>
    </div>
    </div>`);
    fields.append(test);
    //——————————————————–

    I got this error :
    EXCEPTION: fields.append is not a function

    I think that fields doesn’t have the same type as buttons, so I tried to do this:
    fields.buttons.append(test);
    in place of
    fields.append(test);

    It works but whene I write something in this input for an appointment it still the same for all the other appointments.
    I need to resolve those problems and have a field just like the Subject, Location… fields

    Changing the Appointment Fields #92418

    Hristo
    Participant

    Hello Oussama,

    The fields is an object and if you want to do some customization should use one of the containers.
    Please, try on that way:
    var test = $(<div>
    <div class=’jqx-scheduler-edit-dialog-label’>Test</div>
    <div class=’jqx-scheduler-edit-dialog-field’>
    <input class=’jqx-widget-content jqx-input jqx-widget jqx-rc-all’ style=’width: 100%; height: 25px; box-sizing: border-box;’ type=’text’>
    </div>
    </div>`);
    fields.toContainer.append(test);`

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    Changing the Appointment Fields #92434

    Oussama
    Participant

    Hi,
    Thanks it workes, but I have to link this new input with my appointmentDataFields:

    
    appointmentDataFields:
            {
                id: "id",
                subject: "subject",
                description: "description",
                location: "location",
                test: "test",
                resourceId: "calendar",
                from: "start",
                to: "end",
            },
    

    Otherwise I could never get the complete informations.
    If you have any ideas please show me.

    Changing the Appointment Fields #92443

    Hristo
    Participant

    Hello Oussama,

    Please, take a look at this topic:
    https://www.jqwidgets.com/community/topic/prefill-subject/
    Hope this helps.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    Changing the Appointment Fields #92472

    Oussama
    Participant

    Hi Hristo,
    Thanks for your help, now I have an other problem, I modified editDialogCreate, editDialogOpen and editDialogClose to save changes that I make to my new label (in the code below it’s “teacher”) whene I click the save button. And if I click the cancel button or just close the dialog the change should not be saved, but in my case it does because I worked on the editDialogClose methode :

    
    editDialogCreate: function (dialog, fields, editAppointment) {
                        // cacher quelques propriétés
                        fields.repeatContainer.hide();
                        fields.timeZoneContainer.hide();
                        fields.colorContainer.hide();
                        fields.statusContainer.hide();
                        fields.allDayContainer.hide();
                        // changer l'affichage des labels
                        fields.subjectLabel.html("Module");
                        fields.locationLabel.html("Salle");
                        fields.fromLabel.html("De");
                        fields.toLabel.html("Au");
                        fields.resourceLabel.html("Séance de");
                        // ajouter le input enseignant
                        var teacher = $(
                            '
    <div>
                                <div class='jqx-scheduler-edit-dialog-label'>Enseignant</div>
                                <div class="jqx-scheduler-edit-dialog-field">
                                    <!--select class="jqx-widget jqx-rc-all" style="width: 100%; height: 25px; box-sizing: border-box;">
                                        <option>Cours</option>
                                        <option>TD</option>
                                    </select-->
                                    <input class="jqx-widget-content jqx-widget-content-metro jqx-input jqx-input-metro jqx-widget jqx-widget-metro jqx-rc-all jqx-rc-all-metro" data-label="teacher" type="text" style="width: 100%; height: 25px; box-sizing: border-box;">
                                </div>
                            </div>');
                        fields.subjectContainer.append(teacher);
            },
            editDialogOpen: function (dialog, fields, editAppointment) {
                // on recupère le input de l'enseignant
                var teacherContainer = $('.jqx-scheduler-edit-dialog-label')[1].nextElementSibling;
                var teacherInput = $(teacherContainer).find('input');
                // si ce n'est pas un nouveau appointment
                if (editAppointment !== null) teacherInput.val(editAppointment.teacher);
                // si un nouveau appointment
                else teacherInput.val('');
            },
            editDialogClose: function (dialog, fields, editAppointment) {
                var saveButton = $('.jqx-rc-all.jqx-rc-all-metro.jqx-button.jqx-button-metro.jqx-widget.jqx-widget-metro.jqx-fill-state-normal.jqx-fill-state-normal-metro')[6];
                <strong>//saveButton.click(() => {</strong>
                    // on recupère l'enseignant
                    var teacherContainer = $('.jqx-scheduler-edit-dialog-label')[1].nextElementSibling;
                    var teacherInput = $(teacherContainer).find('input');
                    var teacher = teacherInput.val();
                    // si ce n'est pas un nouveau appointment on sauvegarde directement           
                    if (editAppointment !== null){
                        this.setAppointmentProperty(editAppointment.id,"teacher", teacher);
                        editAppointment.teacher = teacher;
                    }
                    // si un nouveau appointment on sauvegarde manuellement
                    else this.getAppointments()[this.getAppointments().length-1].teacher = teacher;
                <strong>//});</strong>
            },
    

    What I need to do is using the save button click instead of the simple close dialog.
    The code as it’s now works but if I omit comments (applied to my saveButton.click()) it doesn’t work.

    • This reply was modified 6 years, 11 months ago by  Oussama.
    Changing the Appointment Fields #92473

    Oussama
    Participant

    I will be grateful if you can send me more informations

    • This reply was modified 6 years, 11 months ago by  Oussama.
    • This reply was modified 6 years, 11 months ago by  Oussama.
    Changing the Appointment Fields #92486

    Hristo
    Participant

    Hello Oussama,

    Could you give more details about this “if I omit comments (applied to my saveButton.click()) it doesn’t work”?

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    Changing the Appointment Fields #92503

    Oussama
    Participant

    Yes it wasn’t clear,
    I mean if I use this function:

    
    editDialogClose: function (dialog, fields, editAppointment) {
                    // on recupère l'enseignant
                    var teacherContainer = $('.jqx-scheduler-edit-dialog-label')[1].nextElementSibling;
                    var teacherInput = $(teacherContainer).find('input');
                    var teacher = teacherInput.val();
                    // si ce n'est pas un nouveau appointment on sauvegarde directement           
                    if (editAppointment !== null){
                        this.setAppointmentProperty(editAppointment.id,"teacher", teacher);
                        editAppointment.teacher = teacher;
                    }
                    // si un nouveau appointment on sauvegarde manuellement
                    else this.getAppointments()[this.getAppointments().length-1].teacher = teacher;
            },
    

    It works
    But if I apply the button click function like this:

    
    editDialogClose: function (dialog, fields, editAppointment) {
                var saveButton = $('.jqx-rc-all.jqx-rc-all-metro.jqx-button.jqx-button-metro.jqx-widget.jqx-widget-metro.jqx-fill-state-normal.jqx-fill-state-normal-metro')[6];
                saveButton.click(() => {
                    // on recupère l'enseignant
                    var teacherContainer = $('.jqx-scheduler-edit-dialog-label')[1].nextElementSibling;
                    var teacherInput = $(teacherContainer).find('input');
                    var teacher = teacherInput.val();
                    // si ce n'est pas un nouveau appointment on sauvegarde directement           
                    if (editAppointment !== null){
                        this.setAppointmentProperty(editAppointment.id,"teacher", teacher);
                        editAppointment.teacher = teacher;
                    }
                    // si un nouveau appointment on sauvegarde manuellement
                    else this.getAppointments()[this.getAppointments().length-1].teacher = teacher;
                });
            },
    

    It doesn’t work for me.

    Changing the Appointment Fields #92562

    Hristo
    Participant

    Hello Oussama,

    You do not need to use this complicated searchings of the ‘Save’ button – you could use simply fields.saveButton reference.
    Please, take a look at this example:

    editDialogClose: function (dialog, fields, editAppointment) {
    	$(fields.saveButton[0]).click(() => {
    		console.log('Do something');
    	});
    }

    Also, I would like to suggest you bind to this button on editDialogCreate if you do not have some special reason to do this in “editDialogClose” callback.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    Changing the Appointment Fields #92611

    Oussama
    Participant

    Thanks Hristo,
    For your suggestion I notice that args in editDialogCreate are not the same in editDialogClose or editDialogOpen, I mean that when I add the click function in editDialogCreate, “dialog, fields and editAppointment” will be the same foreach dialog opened, even if I make changes to appointment.
    An other problem appears if I add the click function to editDialogOpen (or editDialogClose), is that the saveButton will receive a function every dialog opening, and this creates a real ambiguity.
    So please help me to resolve this matter.

    Changing the Appointment Fields #92624

    Hristo
    Participant

    Hello Oussama,

    When you add some functionality in the editDialogCreate, it will be accessed every time (e.g. click on the ‘Save’ button).
    With this callback (called once) is used to create the ‘dialog’.
    This is the recommended place to add new fields, add functionality and etc.
    The ‘arguments’ are the same in the tree callbacks.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    Changing the Appointment Fields #102532

    mousmoul
    Participant

    Hi
    How do you do this part…
    var teacherContainer = $(‘.jqx-scheduler-edit-dialog-label’)[1].nextElementSibling;
    var teacherInput = $(teacherContainer).find(‘input’);
    var teacher = teacherInput.val();
    in angular2+ (typescript)?
    Thanks,
    -Nader

    • This reply was modified 5 years, 3 months ago by  mousmoul.
    Changing the Appointment Fields #102535

    mousmoul
    Participant

    Also, what exactly are these functions…
    this.setAppointmentProperty(editAppointment.id,”teacher”, teacher);
    this.getAppointments()[this.getAppointments().length-1].teacher = teacher;

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.