Is there a way to display the RecurrenceEditor with read-only or disabled fields?

[Drew]

Hello,

I am trying to display the recurrence summary of an event, but I do not want the user to be able to make changes to it. Is there a way to display the RecurrenceEditorComponent as read-only or disabled? If not, do you have any suggestions regarding how to display a summary of the recurrence in a readable format?

Thanks!

[Satheesh Kumar Balasubramanian]

Hi Drew,

You can disable the recurrence editor fields using the below customization in popupOpen and eventClick event.

https://stackblitz.com/edit/react-disable-recurrence-fileds?file=index.js

index.js:

  let eventClicked;

  let scheduleObj;

  let data = [

    {

      Id: 1,

      Subject: 'Explosion of Betelgeuse Star',

      Location: 'Space Center USA',

      StartTime: '2021-01-10T04:00:00.000Z',

      EndTime: '2021-01-10T05:30:00.000Z',

      CategoryColor: '#1aaa55',

      IsAllDay: false,

      RecurrenceRule: 'FREQ=DAILY;INTERVAL=1;COUNT=5',

    },

  ];

  function onEventClick(args) {

    eventClicked = true;

  }

  function onPopupOpen(args) {

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

      let dialogObj = args.element.ej2_instances[0];

      dialogObj.open = (e) => {

        let repeatElement = e.element.querySelector(

          '.e-recurrenceeditor .e-editor .e-repeat-element'

        );

        if (!isNullOrUndefined(repeatElement) && eventClicked) {

          let repeatElementObj = repeatElement.ej2_instances[0];

          repeatElementObj.enabled = false;

        } else {

          let repeatElementObj = repeatElement.ej2_instances[0];

          repeatElementObj.enabled = true;

        }

        let endElement = e.element.querySelector(

          '.e-recurrenceeditor .e-editor .e-end-on-element'

        );

        if (!isNullOrUndefined(endElement) && eventClicked) {

          let endElementObj = endElement.ej2_instances[0];

          endElementObj.enabled = false;

        } else {

          let endElementObj = endElement.ej2_instances[0];

          endElementObj.enabled = true;

        }

        let repeatIntervalElement = e.element.querySelector(

          '.e-recurrenceeditor .e-editor .e-repeat-interval'

        );

        if (!isNullOrUndefined(repeatIntervalElement) && eventClicked) {

          let repeatIntervalElementObj = repeatIntervalElement.ej2_instances[0];

          repeatIntervalElementObj.enabled = false;

        } else {

          let repeatIntervalElementObj = repeatIntervalElement.ej2_instances[0];

          repeatIntervalElementObj.enabled = true;

        }

        let recurrenceCountElement = e.element.querySelector(

          '.e-recurrenceeditor .e-editor .e-recurrence-count'

        );

        if (!isNullOrUndefined(recurrenceCountElement) && eventClicked) {

          let recurrenceCountElementObj =

            recurrenceCountElement.ej2_instances[0];

          recurrenceCountElementObj.enabled = false;

        } else {

          let recurrenceCountElementObj =

            recurrenceCountElement.ej2_instances[0];

          recurrenceCountElementObj.enabled = true;

        }

        let untilDateElement = e.element.querySelector(

          '.e-recurrenceeditor .e-editor .e-until-date'

        );

        if (!isNullOrUndefined(untilDateElement) && eventClicked) {

          let untilDateElementObj = untilDateElement.ej2_instances[0];

          untilDateElementObj.enabled = false;

        } else {

          let untilDateElementObj = untilDateElement.ej2_instances[0];

          untilDateElementObj.enabled = true;

        }

        let monthDayElement = e.element.querySelector(

          '.e-recurrenceeditor .e-editor .e-month-day'

        );

        if (!isNullOrUndefined(monthDayElement) && eventClicked) {

          let monthDayElementObj = monthDayElement.ej2_instances[0];

          monthDayElementObj.enabled = false;

        } else {

          let monthDayElementObj = monthDayElement.ej2_instances[0];

          monthDayElementObj.enabled = true;

        }

        let monthPosElement = e.element.querySelector(

          '.e-recurrenceeditor .e-editor .e-month-pos'

        );

        if (!isNullOrUndefined(monthPosElement) && eventClicked) {

          let monthPosElementObj = monthPosElement.ej2_instances[0];

          monthPosElementObj.enabled = false;

        } else {

          let monthPosElementObj = monthPosElement.ej2_instances[0];

          monthPosElementObj.enabled = true;

        }

        let monthWeekElement = e.element.querySelector(

          '.e-recurrenceeditor .e-editor .e-month-week'

        );

        if (!isNullOrUndefined(monthWeekElement) && eventClicked) {

          let monthWeekElementObj = monthWeekElement.ej2_instances[0];

          monthWeekElementObj.enabled = false;

        } else {

          let monthWeekElementObj = monthWeekElement.ej2_instances[0];

          monthWeekElementObj.enabled = true;

        }

        let monthExpanderWrapperElement = e.element.querySelector(

          '.e-recurrenceeditor .e-editor .e-month-expander-wrapper'

        );

        if (!isNullOrUndefined(monthExpanderWrapperElement) && eventClicked) {

          let monthExpanderWrapperElementObj =

            monthExpanderWrapperElement.ej2_instances[0];

          monthExpanderWrapperElementObj.disabled = true;

        } else {

          let monthExpanderWrapperElementObj =

            monthExpanderWrapperElement.ej2_instances[0];

          monthExpanderWrapperElementObj.disabled = false;

        }

        let monthExpanderElement = e.element.querySelector(

          '.e-recurrenceeditor .e-editor .e-month-expander-element'

        );

        if (!isNullOrUndefined(monthExpanderElement) && eventClicked) {

          let monthExpanderElementObj = monthExpanderElement.ej2_instances[0];

          monthExpanderElementObj.disabled = true;

        } else {

          let monthExpanderElementObj = monthExpanderElement.ej2_instances[0];

          monthExpanderElementObj.disabled = false;

        }

        let yearExpanderElement = e.element.querySelector(

          '.e-recurrenceeditor .e-editor .e-year-expander-element'

        );

        if (!isNullOrUndefined(yearExpanderElement) && eventClicked) {

          let yearExpanderElementObj = yearExpanderElement.ej2_instances[0];

          yearExpanderElementObj.enabled = false;

        } else {

          let yearExpanderElementObj = yearExpanderElement.ej2_instances[0];

          yearExpanderElementObj.enabled = true;

        }

        eventClicked = false;

      };

    }

  }

Kindly try the above sample and let us know if you need any further assistance on this.

Regards,

Satheesh Kumar B

[Drew]

Hi Satheesh, 

Thanks for the quick response. 

Would it be possible make the fields disabled/readonly for a standalone RecurrenceEditorComponent (one that is not attached to a Scheduler instance)?

Thanks

[Ruksar Moosa Sait]

Hi Drew,

We have prepared a sample to make the fields disabled/read-only for the RecurrenceEditor Component. Kindly try the below sample and let us know if this meets your requirement.

Sample: https://stackblitz.com/edit/react-bjgh8i?file=index.js

Output:

Regards,

Ruksar Moosa Sait