We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

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

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!


3 Replies

SK Satheesh Kumar Balasubramanian Syncfusion Team October 10, 2022 12:56 PM UTC

Hi Drew,
You can disable the recurrence editor fields using the below customization in popupOpen and eventClick event.
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



DR Drew October 10, 2022 01:17 PM UTC

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



RM Ruksar Moosa Sait Syncfusion Team October 11, 2022 12:24 PM UTC

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


Loader.
Live Chat Icon For mobile
Up arrow icon