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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

How to perform CRUD operation on Schedule in AngularJS?

Platform: jQuery |
Control: ejSchedule
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">


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,
            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);
                    foreach (var apps in param.deleted)
                        Appointment app = db.Appointments.Where(c => c.Id == apps.Id).FirstOrDefault();
                        if (apps != null) db.Appointments.DeleteOnSubmit(app);
            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;
            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.

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.

Up arrow icon

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

Live Chat Icon For mobile