This demo showcases how to make specific events on the Schedule to be displayed in a read-only mode. The read-only events can be simply viewed and prevented from undergoing any edit actions.
In this demo, the events that has occurred on the past hours from the current time are made as read-only and the CRUD actions
has been prevented on it. Also, the way to make specific events as read-only regardless of time has been done by
adding an additional field
ReadOnly to the event object to hold the value for it either as true or false.
By checking these two conditions, the events are marked as read-only in this sample and also, visually differentiated the
shade of the readonly events by setting CSS style and
aria-readonly attribute to it within the
eventRendered event which gets triggered before every event rendering on the Schedule user interface.
The event editor is prevented to open on these read-only events by setting
args.cancel = true within the
popupOpen event which checks for the condition whether the popup type is
editor and the event is readonly.