• Material 3
  • Material 3 Dark
  • Fluent
  • Fluent Dark
  • Bootstrap v5
  • Bootstrap v5 Dark
  • Tailwind CSS
  • Tailwind CSS Dark
  • Material
  • Bootstrap v4
  • High Contrast
Theme Selection
Mode Selection
*Translated by Google Translator.

Example of Editor Template in ASP.NET MVC Scheduler Control

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 appointments with his patients are listed out and shaded with specific color based on its status.


In this demo, the event window is customized based on the doctor's required appointment related fields which can be achieved by using the EditorTemplate API. Here, the custom design is built with the required fields through the script template and its type should be text/x-template.

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 to allow processing of those fields in the default event object from an internal source. The ID of this customized script template section is assigned to the EditorTemplate option, so that this customized fields will be replaced on the default editor window.

As we are using our Syncfusion sub-components within this editor in this demo, the custom defined form elements needs to be configured as required Syncfusion components such as DropDownList and DateTimePicker which needs to be done within the PopupOpen event. This particular step can be skipped, if the user needs to simply use the normal form design with applicable fields.

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.

An additional restriction has been added to the Scheduler cells such that if a cell already contains an appointment, it should be prevented from booking 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.

Transform your ASP.NET MVC web apps today with Syncfusion ASP.NET MVC components
85+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing