Perform CRUD Actions Dynamically

17 Feb 202213 minutes to read

CRUD actions can be manually performed on appointments using addEvent, saveEvent and deleteEvent methods as shown below.

Normal event

@using Syncfusion.EJ2.Schedule

<div>
    <ejs-button id="btn1" content="ADD"></ejs-button>
    <ejs-button id="btn2" content="EDIT"></ejs-button>
    <ejs-button id="btn3" content="DELETE"></ejs-button>
</div>
<div>
    <ejs-schedule id="schedule" height="550" 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 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

@using Syncfusion.EJ2.Schedule

<div>
    <ejs-button id="btn1" content="ADD"></ejs-button>
    <ejs-button id="btn2" content="EDIT"></ejs-button>
    <ejs-button id="btn3" content="DELETE"></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 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; }
}