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; }
           }
   

2. 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)
   );
   

3. 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