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.
Unfortunately, activation email could not send to your email. Please try again.

How to perform CRUD operations on Schedule in Angular 2?

The following steps shows how to perform CRUD operations on Scheduler in Angular 2.

 

Step 1:  Create a scheduler default sample using the below link.

https://help.syncfusion.com/angular/schedule/getting-started

Step 2:  Create a Service (back end) project to handle the CRUD operations.

  1. Add a controller (Ex: HomeController) page and include the following code,

       [HttpPost]

        public JsonResult GetData()

        {

            IEnumerable data = new ScheduleDataDataContext().ScheduleAppointments.Take(100);

            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.ScheduleAppointments.ToList().Count > 0 ? db.ScheduleAppointments.ToList().Max(p => p.Id) : 1;

                DateTime startTime = Convert.ToDateTime(value.StartTime);

                DateTime endTime = Convert.ToDateTime(value.EndTime);

                ScheduleAppointment appoint = new ScheduleAppointment()

                {

                    Id = intMax + 1,

                    StartTime = startTime,

                    EndTime = endTime,

                    Subject = value.Subject,

                    Description = value.Description,                   

                    AllDay = value.AllDay,

                    Recurrence = value.Recurrence,

                    RecurrenceRule = value.RecurrenceRule,

                    RoomId = value.RoomId,

                    OwnerId = value.OwnerId

                };

                db.ScheduleAppointments.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);

                    ScheduleAppointment app = db.ScheduleAppointments.Where(c => c.Id == key).FirstOrDefault();

                    if (app != null) db.ScheduleAppointments.DeleteOnSubmit(app);

                }

                else

                {

                    foreach (var apps in param.deleted)

                    {

                        ScheduleAppointment app = db.ScheduleAppointments.Where(c => c.Id == apps.Id).FirstOrDefault();

                        if (apps != null) db.ScheduleAppointments.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.ScheduleAppointments.Where(c => c.Id == Convert.ToInt32(value.Id));

 

                if (filterData.Count() > 0)

                {

                    DateTime startTime = Convert.ToDateTime(value.StartTime);

                    DateTime endTime = Convert.ToDateTime(value.EndTime);

                    ScheduleAppointment appoint = db.ScheduleAppointments.Single(A => A.Id == Convert.ToInt32(value.Id));

                    appoint.StartTime = startTime;

                    appoint.EndTime = endTime;

                    appoint.Subject = value.Subject;

                    appoint.Description = value.Description;

                    appoint.Recurrence = value.Recurrence;

                    appoint.AllDay = value.AllDay;

                    appoint.RecurrenceRule = value.RecurrenceRule;

                    appoint.RoomId = value.RoomId;

                    appoint.OwnerId = value.OwnerId;

                }

                db.SubmitChanges();

            }

            IEnumerable data = new ScheduleDataDataContext().ScheduleAppointments.Take(200);

            return Json(data, JsonRequestBehavior.AllowGet);

        }

 

        public class EditParams

        {

            public string key { get; set; }

            public string action { get; set; }

            public List<ScheduleAppointment> added { get; set; }

            public List<ScheduleAppointment> changed { get; set; }

            public List<ScheduleAppointment> deleted { get; set; }

            public ScheduleAppointment value { get; set; }

        }

 

  1. Create a database table with the required fields. Refer to the following SQL table structure to create the appointment table.

CREATE TABLE [dbo].[ScheduleAppointments] (

    [Id]             INT            NOT NULL,

    [Subject]        NVARCHAR (MAX) NULL,

    [StartTime]      DATETIME       NULL,

    [EndTime]        DATETIME       NULL,

    [Description]    NVARCHAR (MAX) NULL,

    [AllDay]         BIT            NULL,

    [Recurrence]     BIT            NULL,

    [RecurrenceRule] NVARCHAR (MAX) NULL,

    [RoomId]         INT            NULL,

    [OwnerId]        INT            NULL,

    CONSTRAINT [PK_ScheduleAppointments] PRIMARY KEY CLUSTERED ([Id] ASC)

);

 

  1. Create a dbml model class and drag the table into it to generate the data context.

Step 2: Run the created service project.

Step 3: Add the service project localhost path along with the method name within the DataManager “url” and “crudUrl” properties.

import { Component } from '@angular/core';

 

@Component({

    selector: 'ej-app',

    templateUrl: './schedule.component.html',

})

export class ScheduleComponent {

    public scheduleData: any;

    public group: any;

    public allowMultiple: Boolean;

    public resourcelevel1: any;

    public resourcelevel2: any;

    constructor() {

        this.group = {

            resources: ['Rooms', 'Owners']

        };

        this.resourcelevel1 = {

            dataSource: [

                { text: 'ROOM 1', id: 1, groupId: 1, color: '#cb6bb2' },

                { text: 'ROOM 2', id: 2, groupId: 1, color: '#56ca85' }

            ],

            text: 'text', id: 'id', groupId: 'groupId', color: 'color'

        };

        this.allowMultiple = true;

        this.resourcelevel2 = {

            dataSource: [

                { text: 'Nancy', id: 1, groupId: 1, color: '#ffaa00' },

                { text: 'Steven', id: 3, groupId: 2, color: '#f8a398' },

                { text: 'Michael', id: 5, groupId: 1, color: '#51a0ed' }

            ],

            text: 'text', id: 'id', groupId: 'groupId', color: 'color'

        };

        this.scheduleData = new ej.DataManager({

            url: "http://localhost:59069/Home/GetData", // Mention the method name to get appointments data in initial load

            crudUrl: "http://localhost:59069/Home/Batch", // Mention the method name to perform CRUD operations

            adaptor: new ej.UrlAdaptor()

        });

    }

}

 

Step 3: Run the angular sample and perform the CRUD operations which gets reflected properly on Scheduler.

Angular Sample [Front End]: ScheduleCRUD

Service Project [Back End]: Schedule_CRUD_Service

 

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

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.