Open Editor Window Programmatically in ASP.NET Core Scheduler

Open Editor Window externally

The Scheduler allows you to programmatically open the event editor for a specific time range or for a specific event by using the openEditor method. To open the editor for a specific time range, pass the cell details as the first argument and the action Add as the second argument. To open the editor for an existing event, pass the event data as the first argument and the action Save as the second argument. In the following example, clicking the respective button opens the corresponding editor window.

The openEditor method accepts the following arguments:

Argument Type Description
data Record It can be either cell data or event data.
action CurrentAction Defines the action for which the editor needs to be opened such as either for new event creation or for editing of existing events. The applicable action names that can be used here are Add, Save, EditOccurrenceand EditSeries. 
@using Syncfusion.EJ2.Schedule


<div>
    <ejs-button id="btn1" content="Click to open Editor"></ejs-button>
    <ejs-button id="btn2" content="Click to open Event Editor"></ejs-button>
</div>
<div>
    <ejs-schedule id="schedule" height="550" views="@ViewBag.view" selectedDate="new DateTime(2018, 2, 15)">
        <e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
    </ejs-schedule>
</div>

<script type="text/javascript">
    document.getElementById('btn1').onclick = function () {
        var scheduleObj = document.getElementById('schedule').ej2_instances[0];
        var cellData = {
            startTime: new Date(2018, 1, 15, 10, 0),
            endTime: new Date(2018, 1, 15, 11, 0),
        };
        scheduleObj.openEditor(cellData, 'Add');
    };
    document.getElementById('btn2').onclick = function () {
        var scheduleObj = document.getElementById('schedule').ej2_instances[0];
        var eventData = {
            Id: 3,
            Subject: 'Meteor Showers in 2018',
            StartTime: new Date(2018, 1, 14, 13, 0),
            EndTime: new Date(2018, 1, 14, 14, 30)
        };
        scheduleObj.openEditor(eventData, 'Save');
    };
</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(2018, 2, 13, 9, 30, 0), EndTime = new DateTime(2018, 2, 13, 11, 0, 0) });
    appData.Add(new AppointmentData
    { Id = 2, Subject = "Milky Way as Melting pot", StartTime = new DateTime(2018, 2, 15, 9, 30, 0), EndTime = new DateTime(2018, 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; }
}

Open editor window on single click

By default, the Scheduler editor window opens when you double-click a cell or an appointment. You can also open the editor window on a single click by calling the openEditor method in the eventClick and cellClick events of the Scheduler, and by setting showQuickInfo to false. The following example shows how to open the editor window on a single click of cells and appointments.

@using Syncfusion.EJ2.Schedule

<ejs-schedule id="schedule" height="550" showQuickInfo="false" cellClick="onCellClick" eventClick="onEventClick" selectedDate="new DateTime(2021, 7, 15)">
    <e-schedule-eventsettings dataSource="@ViewBag.appointments">
    </e-schedule-eventsettings>
</ejs-schedule>

<script type="text/javascript">
    function onCellClick(args) {
        var scheduleObj = document.querySelector('.e-schedule').ej2_instances[0];
        scheduleObj.openEditor(args, 'Add');
    }
    function onEventClick(args) {
        var scheduleObj = document.querySelector('.e-schedule').ej2_instances[0];

        if (!(args.event).RecurrenceRule) {
            scheduleObj.openEditor(args.event, 'Save');
        }
        else {
            scheduleObj.quickPopup.openRecurrenceAlert();
        }
    }
</script>
public ActionResult Index()
{
    ViewBag.appointments = GetScheduleData();
    return View();
}

public List<AppointmentData> GetScheduleData()
{
    List<AppointmentData> appData = new List<AppointmentData>();
    appData.Add(new AppointmentData
    {
        Id = 1,
        Subject = "Paris",
        StartTime = new DateTime(2021, 7, 15, 10, 0, 0),
        EndTime = new DateTime(2021, 7, 15, 12, 30, 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; }
}