Editor Window Customization in ASP.NET Core Scheduler

Scheduler uses popups and dialogs to display the required notifications, and it includes an editor window with event fields that make appointment creation and editing easier. You can also customize the editor window and its fields, and apply validations to those fields.

Event editor

The editor window usually opens in the Scheduler when a cell or event is double-clicked. When a cell is double-clicked, the detailed editor window opens in “Add new” mode. When an event is double-clicked, it opens in “Edit” mode.

On mobile devices, you can open the detailed editor window in edit mode by clicking the edit icon in the popup that appears when you single-tap an event. You can also open it in add mode by single-tapping a cell, which displays a + indicator; clicking it again opens the editor window.

NOTE

You can also prevent the editor window from opening by rendering the Scheduler in a readonly mode or by customizing the popupOpen event.

How to change the editor window header title and text of footer buttons

You can change the editor window header title and the footer button text by updating the appropriate localized word collection used in the Scheduler.

Display Customize Editor Window Header Title and Text of Footer Buttons in ASP.NET Core Scheduler

How to change the label text of default editor fields

To change the default labels such as Subject, Location, and other field names in the editor window, use the title property available within the field option of e-schedule-eventsettings.

Display Customize Label Text in ASP.NET Core Scheduler

Field validation

You can validate the required fields of the editor window on the client side before submitting it by adding the appropriate validation rules to each field. The appointment fields have been extended to accept both string and object type values. To perform validations, you must specify object values for the event fields.

Display Field Validation in ASP.NET Core Scheduler

NOTE

Applicable validation rules can be referred from form validation documentation.

Add additional fields to the default editor

You can add additional fields to the default event editor by using the popupOpen event, which is triggered before the event editor opens in the Scheduler. The popupOpen event is a client-side event that triggers before any of the generic popups open in the Scheduler. Any additional form elements should use the common e-field class name so they can be processed along with the default event object. In the following example, an additional field Event Type has been added to the default event editor, and its value is processed accordingly.

Display Additional Fields in ASP.NET Core Scheduler

Customizing the default time duration in editor window

In the default event editor window, the start and end time duration are processed based on the interval value set within the timeScale property. By default, the interval value is set to 30, so the start and end time duration within the event editor will be 30 minutes apart. You can change this duration value by updating the duration option within the popupOpen event as shown in the following code example.

Display Customizing Default Time Duration of Editor Window in ASP.NET Core Scheduler

How to prevent the display of editor and quick popups

You can prevent the display of the editor and quick popup windows by setting the cancel option to true within the popupOpen event.

If you need to prevent only specific popups in the Scheduler, you can check the popup type. The popup types that can be checked within the popupOpen event are as follows.

Type Description
Editor For the detailed editor window.
QuickInfo For the quick popup that opens on cell click.
EditEventInfo For the quick popup that opens on event click.
ViewEventInfo For the quick popup that opens in responsive mode.
EditorContainer For the more events indicator popup.

Quick popups

The quick info popups open when a cell or appointment is single-clicked in desktop mode. When you single-click a cell, you can provide a subject and save it. When you single-click an event, a popup appears with an overview of the event information. You can also edit or delete those events using the available options.

By default, these popups are displayed over cells and appointments in the Scheduler. To disable this behavior, set the showQuickInfo property to false.

NOTE

The quick popup that opens while single clicking on the cells are not applicable on mobile devices.

How to open Quick Info popup on multiple cell selection

By default, the QuickInfo popup opens when a cell is single-clicked. To open the quick info popup for multiple cell selection, select the cells and press the Enter key. You can open this popup immediately after multiple cell selection by setting quickInfoOnSelectionEnd to true; its default value is false.

How to change the watermark text of quick popup subject

By default, the Add Title text is displayed in the subject field of the quick popup. To change the default watermark text, update the appropriate localized word collection used in the Scheduler.

var L10n = ej.base.L10n;
L10n.load({
    'en-US': {
        'schedule': {
          'addTitle' : 'New Title'
        }
    }
});

Display Customize Watermark Text of Quick Popup in ASP.NET Core Scheduler

Customizing quick popups

The look and feel of the built-in quick popup window, which opens when cells or appointments are single-clicked, can be customized by using the Scheduler quickInfoTemplates property. There are three sub-options available to customize it easily:

  • header - Accepts the template design that customizes the header part of the quick popup.
  • content - Accepts the template design that customizes the content part of the quick popup.
  • footer - Accepts the template design that customizes the footer part of the quick popup.

Display Customizing Quick Popups in ASP.NET Core Scheduler

NOTE

The quick popup in adaptive mode can also be customized using quickInfoTemplates with the e-device class.

Customizing timezone collection in the editor window

By default, the editor window includes built-in timezone collections. You can customize these collections by using the timezoneDataSource property with a collection of TimezoneFields data.

Display Customizing Timezone in ASP.NET Core Scheduler

Customizing event editor using template

The event editor window can be customized by using the editorTemplate option. Here, the custom window design is built with the required fields using a script template, and its type should be text/x-template.

Each field defined within the template should contain the e-field class so that those field values can be processed internally. The ID of the customized script template section is assigned to the editorTemplate option, so these customized fields replace the default editor window.

Note: The e-field class is applicable only for DropDownList, DateTimePicker, MultiSelect, DatePicker, CheckBox, and TextBox components. The field values are processed internally for the components mentioned above.

As we use Syncfusion® sub-components within the template in the following example, the custom form elements must be configured as required Syncfusion® components such as DropDownList and DateTimePicker within the popupOpen event. This step can be skipped if you want to use standard form elements.

Display Customizing Event Editor Using Template in ASP.NET Core Scheduler

The editor window’s header and footer can be enhanced with custom designs using the editorHeaderTemplate and editorFooterTemplate options. To achieve this, create a script template that includes the required fields and set the template type to text/x-template.

In this demo, we tailor the editor header according to the appointment’s subject field using the editorHeaderTemplate. We also use the editorFooterTemplate to validate specific fields before saving or canceling the appointment if validation requirements are not met.

Display Customize header and footer using template in ASP.NET Core Scheduler

How to add resource options within editor template

The resource field can be added within the editor template by using the MultiSelect control to allow multiple resources.

Display Resource Options Within Editor Template in ASP.NET Core Scheduler

How to add recurrence options within editor template

The following code example shows how to add recurrence options to the editor template.

Display Recurrence Options Within Editor Template in ASP.NET Core Scheduler

Apply validations on editor template fields

In the following code example, validation is added to the status field.

Display Apply Validations Editor Template Fields in ASP.NET Core Scheduler

How to save the customized event editor using template

The e-field class is not added to each field defined within the template, so you should set those field values externally by using the popupClose event.

NOTE

You can retrieve the data only on the save and delete options. Data cannot be retrieved on the close and cancel options in the editor window.

The following code example shows how to save the customized event editor using a template with the popupClose event.

If you need to prevent only specific popups in the Scheduler, you can check the popup type. The popup types that can be checked within the popupClose event are as follows.

Type Description
Editor For the detailed editor window.
QuickInfo For the quick popup that opens on cell click.
EditEventInfo For the quick popup that opens on event click.
ViewEventInfo For the quick popup that opens in responsive mode.
EventContainer For the more events indicator popup.
RecurrenceAlert For the recurrence edit alert popup.
DeleteAlert For the delete confirmation popup.
ValidationAlert For the validation alert popup.
RecurrenceValidationAlert For the recurrence validation alert popup.

More events indicator and popup

When the number of appointments in a particular time range exceeds the default appointment height of a cell in month view and other timeline views, a + more text indicator appears at the bottom of those cells. This indicator shows that the cell contains additional appointments, and clicking it displays a popup with all appointments present on that day.

NOTE

To disable the popup that shows all hidden appointments when clicking the text indicator, you can customize the popupOpen event.

The same indicator is displayed in the all-day row in calendar views such as day, week, and work week views when the number of appointments in a cell exceeds three. Clicking the text indicator here will not open a popup, but will allow the expand and collapse option for viewing the remaining appointments in the all-day row.

The following code example shows how to disable popups when clicking the more text indicator.

How to customize the popup that opens on more indicator

The following code example shows how to customize the default more indicator popup so the number of events rendered on the day is shown in the header.

Display Customize the More Events Indicator and Popup in ASP.NET Core Scheduler

How to prevent the display of popup when clicking on the more text indicator

You can prevent the popup window from opening by setting the cancel option to true within the MoreEventsClick event.

How to navigate Day view when clicking on more text indicator

The following code example shows how to customize the moreEventsClick event to navigate to the Day view when clicking the more text indicator.

How to close the editor window manually

You can close the editor window by using the closeEditor method.

@using Syncfusion.EJ2.Schedule

<ejs-schedule id="schedule" height="550" selectedDate="new DateTime(2022, 2, 5)" views="@ViewBag.view" popupOpen="onPopupOpen" >
    <e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
</ejs-schedule>

<script type="text/javascript">
    function onPopupOpen(args) {
        if (args.type === 'Editor') {
            if (!args.element.querySelector('#closeEditor')) {
                var btnElement = ej.base.createElement("BUTTON", { id: 'closeEditor' });
                args.element.querySelector('.e-footer-content').appendChild(btnElement);
                var btnObj = new ej.buttons.Button();
                btnElement.textContent = "Close Editor";
                btnObj.appendTo('#closeEditor');
                btnObj.element.onclick = function () {
                    scheduleObj.closeEditor();
                };
            }
        }
    }
</script>
public ActionResult Index()
{
    ViewBag.datasource = GetScheduleData();
    List<ScheduleView> viewOption = new List<ScheduleView>()
    {
        new ScheduleView { Option = Syncfusion.EJ2.Schedule.View.Day },
        new ScheduleView { Option = Syncfusion.EJ2.Schedule.View.Week },
        new ScheduleView { Option = Syncfusion.EJ2.Schedule.View.WorkWeek },
        new ScheduleView { Option = Syncfusion.EJ2.Schedule.View.Month }
    };
    ViewBag.view = viewOption;
    return View();
}

public List<AppointmentData> GetScheduleData()
{
    List<AppointmentData> appData = new List<AppointmentData>();
    appData.Add(new AppointmentData
    { Id = 1, Subject = "Blue Moon Eclipse", StartTime = new DateTime(2022, 2, 13, 9, 30, 0), EndTime = new DateTime(2022, 2, 13, 11, 0, 0) });
    appData.Add(new AppointmentData
    { Id = 2, Subject = "Milky Way as Melting pot", StartTime = new DateTime(2022, 2, 15, 9, 30, 0), EndTime = new DateTime(2022, 2, 15, 11, 0, 0) });
    return appData;
}
    
public class AppointmentData
{
    public int Id { get; set; }
    public string Subject { get; set; }
    public DateTime StartTime { get; set; }
    public DateTime EndTime { get; set; }
}

How to open the quick info popup manually

You can open the quick info popup in the Scheduler by using the openQuickInfoPopup public method. To open the cell quick info popup, pass the cell data as an argument to the method. To open the event quick info popup, pass the event data object as an argument to the method.

@using Syncfusion.EJ2.Schedule

<div>
    <ejs-button id="btn1" content="Show Cell QuickInfo Popup"></ejs-button>
    <ejs-button id="btn2" content="Show Event QuickInfo Popup"></ejs-button>
</div>

<ejs-schedule id="schedule" height="550" selectedDate="new DateTime(2022, 2, 5)" views="@ViewBag.view" >
    <e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
</ejs-schedule>

<script type="text/javascript">
    document.getElementById('btn1').onclick = function () {
        var scheduleObj = document.getElementById('schedule').ej2_instances[0];
        var cellData = {
            Subject: 'Milky Way as Melting pot',
            StartTime: new Date(2022, 2, 5, 20, 0, 0),
            EndTime: new Date(2022, 2, 5, 21, 0, 0)
        };
        scheduleObj.openQuickInfoPopup(cellData, 'Add');
    };
    document.getElementById('btn2').onclick = function () {
        var scheduleObj = document.getElementById('schedule').ej2_instances[0];
        var eventData = {
            Id: 2,
            Subject: 'Milky Way as Melting pot',
            StartTime: new Date(2022, 2, 5, 20, 0, 0),
            EndTime: new Date(2022, 2, 5, 21, 0, 0)
        };
        scheduleObj.openQuickInfoPopup(eventData, 'Save');
    };
</script>
public ActionResult Index()
{
    List<ScheduleView> viewOption = new List<ScheduleView>()
    {
        new ScheduleView { Option = Syncfusion.EJ2.Schedule.View.Day },
        new ScheduleView { Option = Syncfusion.EJ2.Schedule.View.Week },
        new ScheduleView { Option = Syncfusion.EJ2.Schedule.View.WorkWeek },
        new ScheduleView { Option = Syncfusion.EJ2.Schedule.View.Month }
    };
    ViewBag.view = viewOption;
    return View();
}

public List<AppointmentData> GetScheduleData()
{
    List<AppointmentData> appData = new List<AppointmentData>();
    appData.Add(new AppointmentData
    { Id = 1, Subject = "Blue Moon Eclipse", StartTime = new DateTime(2022, 2, 13, 9, 30, 0), EndTime = new DateTime(2022, 2, 13, 11, 0, 0) });
    appData.Add(new AppointmentData
    { Id = 2, Subject = "Milky Way as Melting pot", StartTime = new DateTime(2022, 2, 15, 9, 30, 0), EndTime = new DateTime(2022, 2, 15, 11, 0, 0) });
    return appData;
}
    
public class AppointmentData
{
    public int Id { get; set; }
    public string Subject { get; set; }
    public DateTime StartTime { get; set; }
    public DateTime EndTime { get; set; }
}

How to close the quick info popup manually

You can close the quick info popup in the Scheduler by using the closeQuickInfoPopup public method. The following code example demonstrates how to close the quick info popup manually.

@using Syncfusion.EJ2.Schedule

<div>
    <ejs-button id="btn1" content="Close Quick Info Popup"></ejs-button>
</div>

<ejs-schedule id="schedule" height="550" selectedDate="new DateTime(2022, 2, 5)" views="@ViewBag.view" >
    <e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
</ejs-schedule>

<script type="text/javascript">
    document.getElementById('btn1').onclick = function () {
        var scheduleObj = document.getElementById('schedule').ej2_instances[0];
        scheduleObj.closeQuickInfoPopup();
    };
    
</script>
public ActionResult Index()
{
    ViewBag.datasource = GetScheduleData();
    List<ScheduleView> viewOption = new List<ScheduleView>()
    {
        new ScheduleView { Option = Syncfusion.EJ2.Schedule.View.Day },
        new ScheduleView { Option = Syncfusion.EJ2.Schedule.View.Week },
        new ScheduleView { Option = Syncfusion.EJ2.Schedule.View.WorkWeek },
        new ScheduleView { Option = Syncfusion.EJ2.Schedule.View.Month }
    };
    ViewBag.view = viewOption;
    return View();
}

public List<AppointmentData> GetScheduleData()
{
    List<AppointmentData> appData = new List<AppointmentData>();
    appData.Add(new AppointmentData
    { Id = 1, Subject = "Blue Moon Eclipse", StartTime = new DateTime(2022, 2, 13, 9, 30, 0), EndTime = new DateTime(2022, 2, 13, 11, 0, 0) });
    appData.Add(new AppointmentData
    { Id = 2, Subject = "Milky Way as Melting pot", StartTime = new DateTime(2022, 2, 15, 9, 30, 0), EndTime = new DateTime(2022, 2, 15, 11, 0, 0) });
    return appData;
}
    
public class AppointmentData
{
    public int Id { get; set; }
    public string Subject { get; set; }
    public DateTime StartTime { get; set; }
    public DateTime EndTime { get; set; }
}

NOTE

You can refer to our ASP.NET Core Scheduler feature tour page for more details. You can also explore our ASP.NET Core Scheduler example to learn how to present and manipulate data.