This demo illustrates the way of customizing the default editor window with custom template option and the customized design is automatically replaced onto the usual event editor. Here, a doctor's daily appointment with his patients is listed out and shaded with specific color based on its status.
In this demo, the event window is customized based on the specific appointment-related fields required for doctors which can
be achieved by making use of the editorTemplate API and it is achieved using class component.
In this demo, the editor window header is customized based on the appointment subject field which can be achieved by the editorHeaderTemplate.
Each field defined through it should contain the e-field class,and data-name attribute,
so as to allow the processing of those fields in the default event object from internal source.
Within the eventRendered event that triggers before every appointment getting rendered
on the Scheduler user interface, the colors for the appointments are set based on its status which is retrieved from the appointment data.
The additional restriction has been added to the Scheduler cells such that if a cell already contains an appointment – then
it should be prevented to book with multiple appointments on the same time for which the isSlotAvailable method is used.
This method returns true, if the underlying cell is available for adding new events by checking whether it already has any events in it.