Open Editor Window Programmatically in ASP.NET MVC Scheduler

Open Editor Window Manually

The Scheduler allows you to manually open the event editor for a specific time range or for an existing event by using the openEditor method. To open the editor for a specific time range, pass the cell details as the first argument and Add as the second argument. To open the editor for an existing event, pass the event data as the first argument and Save as the second argument.

In the following code example, clicking the Click to open Editor button opens the editor in Add mode for the cell that starts on February 15, 2018 at 10:00 AM, and clicking the Click to open Event Editor button opens the editor in Save mode for an existing event.

@using Syncfusion.EJ2.Schedule

<div>
    @Html.EJS().Button("btn1").Content("Click to open Editor").Render()
    @Html.EJS().Button("btn2").Content("Click to open Event Editor").Render()
</div>
<div>
    @(Html.EJS().Schedule("schedule")
        .Width("100%")
        .Height("550px")
        .Views(ViewBag.view)
        .EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource })
        .SelectedDate(new DateTime(2018, 2, 15))
        .Render()
    )
</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 with a single click by handling the EventClick and CellClick events, calling openEditor, and setting the ShowQuickInfo property to false to suppress the default quick-info popup.

NOTE

When the clicked event is a recurring appointment, the example invokes quickPopup.openRecurrenceAlert() to show the standard recurrence confirmation dialog instead of opening the editor directly. This ensures the user can choose between editing a single occurrence or the entire series.

@using Syncfusion.EJ2.Schedule

@(Html.EJS().Schedule("schedule")
    .Height("550px")
    .ShowQuickInfo(false)
    .CellClick("onCellClick")
    .EventClick("onEventClick")
    .EventSettings(new ScheduleEventSettings { DataSource = ViewBag.appointments })
    .SelectedDate(new DateTime(2021, 7, 15))
    .Render()
)

<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; }
}