How can I help you?
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; }
}