Perform CRUD Actions Dynamically in ASP.NET Core Scheduler
CRUD actions can be performed dynamically on appointments using the addEvent, saveEvent, and deleteEvent methods of the Scheduler. These methods allow you to programmatically add a new event, update an existing event, or remove an event from the Scheduler without relying on the built-in editor window.
The methods used in this topic are client-side methods invoked from the browser. They do not persist data to the server; ensure you handle persistence in your own data source if required.
Normal event
The following example shows how to add, update, and delete a normal (non-recurring) appointment dynamically.
Add event
Use the addEvent method to add a new appointment to the Scheduler by passing the appointment data as an argument.
Save event
Use the saveEvent method to update an existing appointment by passing the modified appointment data as an argument.
Delete event
Use the deleteEvent method to remove an existing appointment by passing the appointment Id (or the appointment object) as an argument.
@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
The following example shows how to add, update, and delete a recurring appointment dynamically. For recurring appointments, ensure the RecurrenceRule and RecurrenceException fields are set appropriately when calling addEvent or saveEvent.
@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; }
}