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!
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; }; } } |
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
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