DevExtreme jQuery/JS - Customize Appointment Details Form

To customize the appointment details form, create a handler of the appointmentFormCreated event. The handler allows you to get the Form instance used to render the appointment details. Within the handler function, use the itemOption(id, options) method to update options of a form item.

JavaScript
  • $(function(){
  • $("#schedulerContainer").dxScheduler({
  • dataSource: [{
  • text: "His Girl Friday",
  • startDate: new Date(2016, 4, 24, 9, 10),
  • endDate: new Date(2016, 4, 24, 11, 20)
  • },
  • // ...
  • ],
  • currentDate: new Date(2016, 4, 24),
  • onAppointmentFormCreated: function (e) {
  • var form = e.form;
  • form.itemOption("startDate", {
  • helpText: "Select a date between May 11 and 27",
  • editorOptions: {
  • min: new Date(2016, 4, 11),
  • max: new Date(2016, 4, 27),
  • type: 'datetime'
  • }
  • });
  • // By default, fields that show timezones are hidden
  • // To show them, use the code below
  • form.itemOption("startDateTimeZone", { visible: true });
  • form.itemOption("endDateTimeZone", { visible: true });
  • }
  • });
  • });

View Demo Watch Video

See Also