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?

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 

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

 

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

 

 

Article ID: Published Date: Last Revised Date: Platform: Control:
8489 02/26/2018 02/26/2018 JavaScript ejSchedule
Tags:
Did you find this information helpful?
Add Comment
You must log in to leave a comment

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