onPopup Event Dialog Customization

[Mike Griffin]

We are really stuck here, we have add extra controls on the default Add Event dialog, via the popupOpen handler. NOTE, we haven't replaced yours, just added extra controls as follows:

const dropDownList = new DropDownList({

            dataSource: appTypes as { [key: string]: any }[],

            fields: { text: 'name', value: 'id' },

            floatLabelType: 'Always',

            placeholder: 'Visit Type',

          });

          dropDownList.appendTo(inputEle);

          dropDownList.change = onAppointmentTypeChange;

          inputEle.setAttribute('name', 'AppointmentTypeId');

So it appears on the screen and my onAppointmentTypeChange event gets called, based on the appointment time we set the end-date to so many minutes after the start, THIS CANNOT BE DONE WHEN THE DIALOG IS OPENING, THE USER CAN SWITCH APPOINTMENT TYPES ON THE DIALOG.

  function onAppointmentTypeChange(args: ChangeEventArgs) {

    let appointmentType: any = args.itemData;

    if (appointmentType !== null && appointmentType.duration !== null) {

      let startTime: any = document.getElementById('StartTime');

      let et: any = document.getElementById('EndTime');

      let endTime: DateTimePicker = et;

      let startDate = new Date(startTime.value);

      const endDate = addMinutesToDate(startDate, appointmentType.duration);

      // CHANGES THE VALUE ONT HE SCREEN, BUT DOESN'T GET SENT WHEN SAVED, PROBABLY

      // A REACT BINDING ISSUE AS I'M TRYING TO SET THIS ESSENTIALLY THROUGH

      // TYPESCRIPT DOM INTERACTION, BUT WE KNOW OF KNOW OTHER WAY

      endTime.value = endDate;

    }

  }

[Vijay Ravi]

Hi Mike,
 

Thank you for reaching out us.

 

We recommend you to schedule popupClose event to update the modified values in event dialog as shown in the below shared code snippet. Refer the shared sample for your reference. Kindly try it out.

[index.js]
 

const onPopupclose = (args) => {

    if (args.type === 'Editor' && endTime) {

      args.data.EndTime = endTime;

    }

  };

  const onPopupOpen = (args) => {

    if (args.type === 'Editor') {

      if (!args.element.querySelector('.custom-field-row')) {

        let row = createElement('div', { className: 'custom-field-row' });

        let formElement = args.element.querySelector('.e-schedule-form');

        formElement.firstChild.insertBefore(row, formElement.firstChild.firstChild);

        let container = createElement('div', { className: 'custom-field-container' });

        let inputEle = createElement('input', { className: 'e-field', attrs: { name: 'EventType' } });

        container.appendChild(inputEle);

        row.appendChild(container);

        let dropDownList = new DropDownList({

          dataSource: [

            { text: 'Public Event', value: 'public-event', duration: 60 },

            { text: 'Maintenance', value: 'maintenance', duration: 60 },

            { text: 'Commercial Event', value: 'commercial-event', duration: 45 },

            { text: 'Family Event', value: 'family-event', duration: 60 }

          ],

          fields: { text: 'text', value: 'value' },

          value: args.data.EventType,

          floatLabelType: 'Always',

          placeholder: 'Event Type',

          change: onAppointmentTypeChange

        });

        dropDownList.appendTo(inputEle);

        inputEle.setAttribute('name', 'EventType');

      }

    }

 

Sample link: https://stackblitz.com/edit/react-y7knknjx-gxejukyh?file=index.js

Additionally, if you are still encountering issues in your project, Also could your share your detailed query, then could you please provide the following details? This information will help us better assist you in resolving the problem effectively.

 

• Share the issue replicating sample.
• Share your schedule related code snippets.
• Replicate issue in our shared sample

 

Don't hesitate to get in touch if you require further help or more information.

 

Regards,

Vijay

[Mike Griffin]

I ran your sample, I see how it works, that's definitely an option, but a last ditch option because the end time is shown incorrectly until Save. 

So basically you weren't able to get the "endDate" field to change it's time, I got it to change the display but it really didn't work. Is there anyway you can push this a little further and see what it would take for the onAppointmentTypeChange() to actually change the endDate field using something like this?

let et: any = document.getElementById('EndTime');

let endTime: DateTimePicker = et;

let startDate = new Date(startTime.value);

const endDate = addMinutesToDate(startDate, appointmentType.duration);

endTime.value = endDate; // SET the actual endTime in the Event Dialog ??

[Vijay Ravi]

Hi Mike,

We have modified our previously shared sample such that the onAppointmentTypeChange function is triggered when the dropdown value changes. In this function, you can access the ej2_instance of the Start Time and End Time DateTimePicker components and update their value fields with the updated values, as demonstrated in the code snippet below. Refer the shared sample for your reference.

[index.js]
 

const addMinutesToDate = (date, minutes) => {

    return new Date(date.getTime() + minutes * 60000);

  };

 

  const onAppointmentTypeChange = (args) => {

    let appointmentType = args.itemData;

    if (appointmentType && appointmentType.duration !== null) {

      const startTime = document.querySelector(".e-start.e-datetimepicker").ej2_instances[0];

      let endTime = document.querySelector(".e-end.e-datetimepicker").ej2_instances[0];

      let startDate = new Date(startTime.value);

      const endDate = addMinutesToDate(startDate, appointmentType.duration);

      endTime.value = endDate;

    }

  };

Sample link: 7pzazrho (forked) - StackBlitz

Don't hesitate to get in touch if you require further help or more information.

Regards,

Vijay

[Mike Griffin]

That worked perfectly, thank you so much !!! Excellent support by the way.

- Mike

[Vijay Ravi]

Hi Mike,

Thank you for the update. We're glad to hear that the provided solution meets your requirements. Reach out to us if you need any further assistance. We are here to help you.

Regards,
Vijay