Search results

Open Editor Window Manually in ASP.NET MVC Schedule control

26 Oct 2021 / 1 minute to read

Open Editor Window Manually

Scheduler allows the user to manually open the event editor on specific time or on certain events using openEditor method. To open the editor on specific range of time, user need to pass the cell details as first argument and Add as second argument whereas to open it on event pass that event detail and Save as arguments. In the following code example, on clicking the respective button will open the respective editor window manually.

razor
data.cs
Copied to clipboard
@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>
Copied to clipboard
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, Scheduler Editor window will open when double clicking the cells or appointments. You can also open the editor window with single click by using openEditor method in EventClick and CellClick events of scheduler and setting false to ShowQuickInfo. The following example shows how to open editor window on single click of cells and appointments.

razor
data.cs
Copied to clipboard
@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>
Copied to clipboard
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; }
}