Changing the Appointment Fields

[OussamaParticipant]

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.

[HristoParticipant]

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

[OussamaParticipant]

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

[HristoParticipant]

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

[OussamaParticipant]

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.

[HristoParticipant]

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

[OussamaParticipant]

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.

[OussamaParticipant]

I will be grateful if you can send me more informations

[HristoParticipant]

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

[OussamaParticipant]

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.

[HristoParticipant]

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

[OussamaParticipant]

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.

[HristoParticipant]

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

[mousmoulParticipant]

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

[mousmoulParticipant]

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

[Author]

Posts