Category / Section
How to perform CRUD operation on Schedule in AngularJS?
2 mins read
The following steps shows the way to perform CRUD operations on schedule in AngularJS platform.
Step 1: Create a default schedule as shown below,
<ej-schedule style="float: left" id="Schedule1" e-appointmentsettings-datasource="appointments" e-appointmentsettings-applytimeoffset="false" e-appointmentsettings-id="Id" e-appointmentsettings-subject="Subject" e-appointmentsettings-starttime="StartTime" e-appointmentsettings-endtime="EndTime" e-appointmentsettings-description="Description" e-appointmentsettings-allday="AllDay" e-appointmentsettings-recurrence="Recurrence" e-appointmentsettings-recurrencerule="RecurrenceRule" e-width="100%" e-height="525px" e-currentview="setWeek" e-currentdate="setDate"> </ej-schedule>
Step 2: Bind the appointment dataSource through dataManager as shown below.
window.myApp= ej.DataManager({ url: "/Home/GetData", crudUrl: "/Home/Batch", crossDomain: true, adaptor: new ej.UrlAdaptor() }); angular.module('syncApp', ['ejangular']) .controller('ScheduleCtrl', function ($scope) { $scope.appointments = window.myApp; $scope.setDate = new Date(2017, 4, 5); $scope.setWeek = "week"; });
Step 3: In controller section, define the GetData function which gets called on initial loading of the control and define the Batch function which gets called for each of the CRUD operations on schedule appointment as shown below.
public JsonResult GetData() { IEnumerable data = new ScheduleDataDataContext().Appointments.Take(100); // nw.Appointment.Take(5); return Json(data, JsonRequestBehavior.AllowGet); } public JsonResult Batch(EditParams param) { if (param.action == "insert" || (param.action == "batch" && param.added != null)) // this block of code will execute while inserting the appointments { var value = param.action == "insert" ? param.value : param.added[0]; int intMax = db.Appointments.ToList().Count > 0 ? db.Appointments.ToList().Max(p => p.Id) : 1; DateTime startTime = Convert.ToDateTime(value.StartTime); DateTime endTime = Convert.ToDateTime(value.EndTime); var currentTimeZone = TimeZone.CurrentTimeZone; Appointment appoint = new Appointment() { Id = intMax + 1, StartTime = startTime, EndTime = endTime, Subject = value.Subject, Recurrence = value.Recurrence, AllDay = value.AllDay, RecurrenceRule = value.RecurrenceRule, }; db.Appointments.InsertOnSubmit(appoint); db.SubmitChanges(); } if (param.action == "remove" || param.deleted != null) // this block of code will execute while removing the appointment { if (param.action == "remove") { int key = Convert.ToInt32(param.key); Appointment app = db.Appointments.Where(c => c.Id == key).FirstOrDefault(); if (app != null) db.Appointments.DeleteOnSubmit(app); } else { foreach (var apps in param.deleted) { Appointment app = db.Appointments.Where(c => c.Id == apps.Id).FirstOrDefault(); if (apps != null) db.Appointments.DeleteOnSubmit(app); } } db.SubmitChanges(); } if ((param.action == "batch" && param.changed != null) || param.action == "update") // this block of code will execute while updating the appointment { var value = param.action == "update" ? param.value : param.changed[0]; var filterData = db.Appointments.Where(c => c.Id == Convert.ToInt32(value.Id)); if (filterData.Count() > 0) { DateTime startTime = Convert.ToDateTime(value.StartTime); DateTime endTime = Convert.ToDateTime(value.EndTime); Appointment appoint = db.Appointments.Single(A => A.Id == Convert.ToInt32(value.Id)); appoint.StartTime = startTime; appoint.EndTime = endTime; appoint.Subject = value.Subject; appoint.Recurrence = value.Recurrence; appoint.AllDay = value.AllDay; appoint.RecurrenceRule = value.RecurrenceRule; } db.SubmitChanges(); } IEnumerable data = new ScheduleDataDataContext().Appointments.Take(500); // nw.Appointment.Take(5); return Json(data, JsonRequestBehavior.AllowGet); } }
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample-222207047
Figure 1: Inserting appointment with a subject ‘wild discovery’ onto the scheduler.
Figure 2: The appointment ‘wild discovery’ got stored into database.