We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to perform CRUD operation on Schedule in AngularJS?

Platform: JavaScript |
Control: ejSchedule |
Published Date: February 26, 2018 |
Last Revised Date: May 24, 2019
Tags: angular_crud

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: http://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.

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon