Perform CRUD Actions Dynamically in ASP.NET MVC Scheduler

CRUD actions can be manually performed on appointments using the addEvent, saveEvent, and deleteEvent client-side methods, as shown below. This is useful when you need to create, update, or remove appointments programmatically in response to a custom UI action instead of using the built-in editor window.

The methods shown in this section operate on the Scheduler’s local event collection. To persist the changes to a server-side store, handle the actionBegin and actionComplete events and forward the payload to your data source.

Prerequisites

Before proceeding, ensure that:

  • The Syncfusion ASP.NET MVC Scheduler is installed and the required client-side resources (ej2-schedule, ej2-base, and ej2-data) are referenced in your view or layout. The ej2-data package is required because the recurrence example uses ej.data.DataManager and ej.data.Query.
  • The using Syncfusion.EJ2.Schedule namespace is included in the view.

Normal event

The following example demonstrates how to add a new appointment, edit an existing appointment, and delete an appointment using addEvent, saveEvent, and deleteEvent respectively. Click the ADD, EDIT, and DELETE buttons to trigger each action.

@using Syncfusion.EJ2.Schedule

<div>
    @Html.EJS().Button("btn1").Content("ADD").Render()
    @Html.EJS().Button("btn2").Content("EDIT").Render()
    @Html.EJS().Button("btn3").Content("DELETE").Render()
</div>
<div>
    @(Html.EJS().Schedule("schedule")
        .Width("100%")
        .Height("550px")
        .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 Data = [{
            Id: 1,
            Subject: 'Conference',
            StartTime: new Date(2018, 1, 12, 9, 0),
            EndTime: new Date(2018, 1, 12, 10, 0),
            IsAllDay: false
        }, {
            Id: 2,
            Subject: 'Meeting',
            StartTime: new Date(2018, 1, 15, 10, 0),
            EndTime: new Date(2018, 1, 15, 11, 30),
            IsAllDay: false
        }];
        scheduleObj.addEvent(Data);
        document.getElementById('btn1').setAttribute('disabled', 'true');
    };
    document.getElementById('btn2').onclick = function () {
        var scheduleObj = document.getElementById('schedule').ej2_instances[0];
        var Data = {
            Id: 3,
            Subject: 'Testing-edited',
            StartTime: new Date(2018, 1, 11, 10, 0),
            EndTime: new Date(2018, 1, 11, 11, 0),
            IsAllDay: false
        };
        scheduleObj.saveEvent(Data);
        document.getElementById('btn2').setAttribute('disabled', 'true');
    };
    document.getElementById('btn3').onclick = function () {
        var scheduleObj = document.getElementById('schedule').ej2_instances[0];
        scheduleObj.deleteEvent(4);
        document.getElementById('btn3').setAttribute('disabled', 'true');
    };
</script>
public ActionResult Index()
{
    ViewBag.datasource = GetScheduleData();
    return View();
}
public List<AppointmentData> GetScheduleData()
{
    List<AppointmentData> appData = new List<AppointmentData>();
    appData.Add(new AppointmentData
    {
        Id = 3,
        Subject = "Testing",
        StartTime = new DateTime(2018, 2, 11, 9, 0, 0),
        EndTime = new DateTime(2018, 2, 11, 10, 0, 0),
        IsAllDay = false,
    });
    appData.Add(new AppointmentData
    {
        Id = 4,
        Subject = "Vacation",
        StartTime = new DateTime(2018, 2, 13, 9, 0, 0),
        EndTime = new DateTime(2018, 2, 13, 10, 0, 0),
        IsAllDay = false,
    });
    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; }
    public bool IsAllDay { get; set; }
}

Recurrence event

The following example shows how to programmatically add, edit, and delete recurring appointments. When editing or deleting a recurring appointment, the second argument to saveEvent and deleteEvent specifies the edit type (for example, EditOccurrence to edit a single occurrence, or DeleteSeries to delete the entire series). The valid values are EditOccurrence, EditSeries, DeleteOccurrence, and DeleteSeries.

@using Syncfusion.EJ2.Schedule

<div>
    @Html.EJS().Button("btn1").Content("ADD").Render()
    @Html.EJS().Button("btn2").Content("EDIT").Render()
    @Html.EJS().Button("btn3").Content("DELETE").Render()
</div>
<div>
    @(Html.EJS().Schedule("schedule")
        .Width("100%")
        .Height("550px")
        .EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource })
        .Views(ViewBag.view)
        .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 Data = [{
            Id: 1,
            Subject: 'Conference',
            StartTime: new Date(2018, 1, 15, 9, 0),
            EndTime: new Date(2018, 1, 15, 10, 0),
            IsAllDay: false,
            RecurrenceRule: 'FREQ=DAILY;INTERVAL=1;COUNT=2'
        }];
        scheduleObj.addEvent(Data);
        document.getElementById('btn1').setAttribute('disabled',  'true');
    };
    document.getElementById('btn2').onclick = function () {
        var scheduleObj = document.getElementById('schedule').ej2_instances[0];
        var Data = new ej.data.DataManager(scheduleObj.getCurrentViewEvents()).executeLocal(new ej.data.Query().where(new ej.data.Predicate('RecurrenceID', 'equal', 3)));
        Data[0].EndTime = new Date(2018, 1, 11, 12, 0);
        scheduleObj.saveEvent(Data[0], 'EditOccurrence');
        document.getElementById('btn2').setAttribute('disabled',  'true');
    };
    document.getElementById('btn3').onclick = function () {
        var scheduleObj = document.getElementById('schedule').ej2_instances[0];
        var Data = {
            Id: 4,
            Subject: 'Vacation',
            RecurrenceID: 4,
            StartTime: new Date(2018, 1, 12, 11, 0),
            EndTime: new Date(2018, 1, 12, 12, 0),
            IsAllDay: false,
            RecurrenceRule: 'FREQ=DAILY;INTERVAL=1;COUNT=3'
        };
        scheduleObj.deleteEvent(Data, 'DeleteSeries');
        document.getElementById('btn3').setAttribute('disabled',  'true');
    };
</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 = 3,
        Subject = "Testing",
        StartTime = new DateTime(2018, 2, 11, 9, 0, 0),
        EndTime = new DateTime(2018, 2, 11, 10, 0, 0),
        IsAllDay = false,
        RecurrenceRule = "FREQ=DAILY;INTERVAL=1;COUNT=3",
    });
    appData.Add(new AppointmentData
    {
        Id = 4,
        Subject = "Vacation",
        StartTime = new DateTime(2018, 2, 12, 11, 0, 0),
        EndTime = new DateTime(2018, 2, 12, 12, 0, 0),
        IsAllDay = false,
        RecurrenceRule = "FREQ=DAILY;INTERVAL=1;COUNT=2"
    });
    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; }
    public bool IsAllDay { get; set; }
    public string RecurrenceRule { get; set; }
}