Search results

Perform CRUD Actions Dynamically in ASP.NET Core Schedule control

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

Normal event

tagHelper
data.cs
@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

tagHelper
data.cs
@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; }
}