Articles in this section
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 

Inserting appointment with a subject ‘wild discovery’ onto the scheduler

Figure 1: Inserting appointment with a subject ‘wild discovery’ onto the scheduler.

 

The appointment ‘wild discovery’ got stored into database

Figure 2: The appointment ‘wild discovery’ got stored into database.

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied