Add custom date field in edit Appointment

[vachowParticipant]

Hi There,

I am trying to add a custom date field in the appointment and made below customization in editDialogCreate function.

rescheduledFromContainer = "<div>";
rescheduledFromContainer += "<div class='jqx-scheduler-edit-dialog-label' id='rescheduled_from_date'>Rescheduled From Date</div>";
rescheduledFromContainer += "<div class='jqx-scheduler-edit-dialog-field '><div class='jqx-widget-content jqx-input jqx-widget jqx-rc-all’ style=’width: 100%; height: 25px; box-sizing: border-box;' type='date'></div></div>";
fields.colorContainer.append(rescheduledFromContainer);

I do see the new date field on appointment create screen but it doesn’t look similar to out of the box “From” and “To” date fields. Could you please suggest me on steps to set-up similar date fields.

[MartinParticipant]

Hello vachow,

I would suggest you to modify an existing field that you do not use. You can change its label html and input widget.
I have created an Example with your case.

You can also look at this Example for customizing the Scheduler’s Edit Dialog.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[vachowParticipant]

Hi Martin,

Thank you so much for your response. I have actually added a custom date field by adding a container that has field label and value. The problem I have is, the custom date fields I have set-up doesn’t look similar to the out of box date fields(From and To date fields) are displayed on Create/Edit appointment window.

I tried the approach you have suggested but again the new date field is not displaying data in the same format as the date and time are displayed on Out of box date fields. In your example, please check the difference in the date formats on the fields displayed on appointment window.

Could you please suggest on setting up custom date field that has date format similar to the date format on to from and to date fields.

Thanks in advance.

[MartinParticipant]

Hello vachow,

You can customize the date format of the custom field by using the formatString of jqxDateTimeInput.
I have updated the previous Example.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[vachowParticipant]

Thanks much Martin. It works as intended.

[Author]

Posts