• Material
  • Fabric
  • Bootstrap
  • High Contrast
Preferences
Theme Selection
Mode Selection
Touch
Mouse
Essential JS 2
HOME
All Controls

Button

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.

DEMO
SOURCE

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.