EJ2 Angular Scheduler is Upgraded

Author: Sivakumar Manimaran

GraphQl/package.json

@@ -13,6 +13,6 @@
     "graphpack": "^1.0.9"
   },
   "dependencies": {
-    "@syncfusion/ej2-data": "^19.2.55"
+    "@syncfusion/ej2-data": "^32.1.19"
   }
 }

GraphQl/src/db.js

@@ -3,110 +3,110 @@ export let eventsData = [
     {
       Id: 1,
       Subject: 'Server Maintenance',
-      StartTime: new Date(2021, 1, 11, 10, 0).toISOString(),
-      EndTime: new Date(2021, 1, 11, 11, 30).toISOString(),
+      StartTime: new Date(2026, 1, 11, 10, 0).toISOString(),
+      EndTime: new Date(2026, 1, 11, 11, 30).toISOString(),
       Location: 'Seattle'
     }, {
       Id: 2,
       Subject: 'Art & Painting Gallery',
-      StartTime: new Date(2021, 1, 12, 12, 0).toISOString(),
-      EndTime: new Date(2021, 1, 12, 14, 0).toISOString(),
+      StartTime: new Date(2026, 1, 12, 12, 0).toISOString(),
+      EndTime: new Date(2026, 1, 12, 14, 0).toISOString(),
       Location: 'Costa Rica'
     }, {
       Id: 3,
       Subject: 'Dany Birthday Celebration',
-      StartTime: new Date(2021, 1, 13, 10, 0).toISOString(),
-      EndTime: new Date(2021, 1, 13, 11, 30).toISOString(),
+      StartTime: new Date(2026, 1, 13, 10, 0).toISOString(),
+      EndTime: new Date(2026, 1, 13, 11, 30).toISOString(),
       Location: 'Kirkland'
     }, {
       Id: 4,
       Subject: 'John Wedding Anniversary',
-      StartTime: new Date(2021, 1, 14, 9, 0).toISOString(),
-      EndTime: new Date(2021, 1, 14, 10, 0).toISOString(),
+      StartTime: new Date(2026, 1, 14, 9, 0).toISOString(),
+      EndTime: new Date(2026, 1, 14, 10, 0).toISOString(),
       Location: 'Redmond'
     }, {
       Id: 5,
       Subject: 'ISA Annual Conference',
-      StartTime: new Date(2021, 1, 15, 10, 0).toISOString(),
-      EndTime: new Date(2021, 1, 15, 11, 30).toISOString(),
+      StartTime: new Date(2026, 1, 15, 10, 0).toISOString(),
+      EndTime: new Date(2026, 1, 15, 11, 30).toISOString(),
       Location: 'USA'
     }, {
       Id: 6,
       Subject: 'Equipment Maintenance',
-      StartTime: new Date(2021, 1, 16, 12, 0).toISOString(),
-      EndTime: new Date(2021, 1, 16, 14, 0).toISOString(),
+      StartTime: new Date(2026, 1, 16, 12, 0).toISOString(),
+      EndTime: new Date(2026, 1, 16, 14, 0).toISOString(),
       Location: 'Seattle',
     }, {
       Id: 7,
       Subject: 'Aircraft Maintenance',
-      StartTime: new Date(2021, 1, 17, 10, 0).toISOString(),
-      EndTime: new Date(2021, 1, 17, 11, 30).toISOString(),
+      StartTime: new Date(2026, 1, 17, 10, 0).toISOString(),
+      EndTime: new Date(2026, 1, 17, 11, 30).toISOString(),
       Location: 'Seattle'
     }, {
       Id: 8,
       Subject: 'Facilities Maintenance',
-      StartTime: new Date(2021, 1, 19, 9, 30).toISOString(),
-      EndTime: new Date(2021, 1, 19, 11, 0).toISOString(),
+      StartTime: new Date(2026, 1, 19, 9, 30).toISOString(),
+      EndTime: new Date(2026, 1, 19, 11, 0).toISOString(),
       Location: 'Seattle'
     }, {
       Id: 9,
       Subject: 'Britto Birthday Celebration',
-      StartTime: new Date(2021, 1, 21, 11, 0).toISOString(),
-      EndTime: new Date(2021, 1, 21, 13, 0).toISOString(),
+      StartTime: new Date(2026, 1, 21, 11, 0).toISOString(),
+      EndTime: new Date(2026, 1, 21, 13, 0).toISOString(),
       Location: 'Greenland'
     }, {
       Id: 10,
       Subject: 'Justin Wedding Anniversary',
-      StartTime: new Date(2021, 1, 22, 9, 30).toISOString(),
-      EndTime: new Date(2021, 1, 22, 11, 0).toISOString(),
+      StartTime: new Date(2026, 1, 22, 9, 30).toISOString(),
+      EndTime: new Date(2026, 1, 22, 11, 0).toISOString(),
       Location: 'Finland'
     }, {
       Id: 11,
       Subject: 'AIEA Annual Meet',
-      StartTime: new Date(2021, 1, 9, 10, 0).toISOString(),
-      EndTime: new Date(2021, 1, 9, 11, 30).toISOString(),
+      StartTime: new Date(2026, 1, 9, 10, 0).toISOString(),
+      EndTime: new Date(2026, 1, 9, 11, 30).toISOString(),
       Location: 'USA'
     }, {
       Id: 12,
       Subject: 'AAN Conference',
-      StartTime: new Date(2021, 1, 7, 10, 30).toISOString(),
-      EndTime: new Date(2021, 1, 7, 12, 30).toISOString(),
+      StartTime: new Date(2026, 1, 7, 10, 30).toISOString(),
+      EndTime: new Date(2026, 1, 7, 12, 30).toISOString(),
       Location: 'USA'
     }, {
       Id: 13,
       Subject: 'Photography Gallery',
-      StartTime: new Date(2021, 1, 5, 10, 0).toISOString(),
-      EndTime: new Date(2021, 1, 5, 11, 30).toISOString(),
+      StartTime: new Date(2026, 1, 5, 10, 0).toISOString(),
+      EndTime: new Date(2026, 1, 5, 11, 30).toISOString(),
       Location: 'Chennai'
     }, {
       Id: 14,
       Subject: 'Beach Clean-up',
-      StartTime: new Date(2021, 1, 14, 12, 0).toISOString(),
-      EndTime: new Date(2021, 1, 14, 14, 0).toISOString(),
+      StartTime: new Date(2026, 1, 14, 12, 0).toISOString(),
+      EndTime: new Date(2026, 1, 14, 14, 0).toISOString(),
       Location: 'Mumbai'
     }, {
       Id: 15,
       Subject: 'Turtle Walk',
-      StartTime: new Date(2021, 1, 19, 13, 0).toISOString(),
-      EndTime: new Date(2021, 1, 19, 14, 30).toISOString(),
+      StartTime: new Date(2026, 1, 19, 13, 0).toISOString(),
+      EndTime: new Date(2026, 1, 19, 14, 30).toISOString(),
       Location: 'Costa Rica'
     }, {
       Id: 16,
       Subject: 'Silent Walk for Cancer day',
-      StartTime: new Date(2021, 1, 22, 13, 0).toISOString(),
-      EndTime: new Date(2021, 1, 22, 14, 30).toISOString(),
+      StartTime: new Date(2026, 1, 22, 13, 0).toISOString(),
+      EndTime: new Date(2026, 1, 22, 14, 30).toISOString(),
       Location: 'Chennai'
     }, {
       Id: 17,
       Subject: 'Beach Clean-up',
-      StartTime: new Date(2021, 1, 13, 14, 0).toISOString(),
-      EndTime: new Date(2021, 1, 13, 16, 0).toISOString(),
+      StartTime: new Date(2026, 1, 13, 14, 0).toISOString(),
+      EndTime: new Date(2026, 1, 13, 16, 0).toISOString(),
       Location: 'Mumbai'
     }, {
       Id: 18,
       Subject: 'Photography Gallery',
-      StartTime: new Date(2021, 1, 15, 14, 0).toISOString(),
-      EndTime: new Date(2021, 1, 15, 16, 0).toISOString(),
+      StartTime: new Date(2026, 1, 15, 14, 0).toISOString(),
+      EndTime: new Date(2026, 1, 15, 16, 0).toISOString(),
       Location: 'Chennai'
     }
   ];

GraphQl/src/resolvers.js

@@ -1,5 +1,8 @@
 import { eventsData } from "./db";
-
+function sameId(a, b) {
+  if (a === undefined || a === null || b === undefined || b === null) return false;
+  return String(a) === String(b);
+}
 const resolvers = {
   Query: {
     getEvents: (parent, datamanager, context, info) => { 
@@ -10,40 +13,78 @@ const resolvers = {
       return {result: data || eventsData};
     }
   },
-  
   Mutation: {
     batchUpdate: (parent, { added, changed, deleted }, context, info) => {
       if (added && added.length > 0) {
         console.log('added: ' + added.length);
         added.forEach((order) => {
-          eventsData.push(order);
+          let existingIndex = -1;
+          for (let i = 0; i < eventsData.length; i++) {
+            if (sameId(eventsData[i].Id, order && order.Id)) {
+              existingIndex = i;
+              break;
+            }
+          }
+          if (existingIndex >= 0) {
+            const target = eventsData[existingIndex];
+            if ('Id' in order) target.Id = order.Id;
+            if ('Subject' in order) target.Subject = order.Subject;
+            if ('StartTime' in order) target.StartTime = order.StartTime;
+            if ('EndTime' in order) target.EndTime = order.EndTime;
+            if ('Location' in order) target.Location = order.Location;
+            if ('IsAllDay' in order) target.IsAllDay = order.IsAllDay;
+            if ('RecurrenceRule' in order) target.RecurrenceRule = order.RecurrenceRule;
+            if ('StartTimezone' in order) target.StartTimezone = order.StartTimezone;
+            if ('EndTimezone' in order) target.EndTimezone = order.EndTimezone;
+          } else {
+            eventsData.push(order);
+          }
         });
       }
       if (changed && changed.length > 0) {
         console.log('changed: ' + changed.length);
         changed.forEach((order) => {
-          let newOrder = eventsData.find(app => app.Id === order.Id);
-          newOrder.Id = order.Id;
-          newOrder.Subject = order.Subject;
-          newOrder.StartTime = order.StartTime;
-          newOrder.EndTime = order.EndTime;
-          newOrder.Location = order.Location;
-          newOrder.IsAllDay = order.IsAllDay;
-          newOrder.RecurrenceRule = order.RecurrenceRule;
-          newOrder.StartTimezone = order.StartTimezone;
-          newOrder.EndTimezone = order.EndTimezone;
+          let target = null;
+          for (let i = 0; i < eventsData.length; i++) {
+            if (sameId(eventsData[i].Id, order && order.Id)) {
+              target = eventsData[i];
+              break;
+            }
+          }
+          if (!target) {
+            console.log('Change skipped: app not found for Id:', order && order.Id);
+            return;
+          }
+          if ('Id' in order) target.Id = order.Id;
+          if ('Subject' in order) target.Subject = order.Subject;
+          if ('StartTime' in order) target.StartTime = order.StartTime;
+          if ('EndTime' in order) target.EndTime = order.EndTime;
+          if ('Location' in order) target.Location = order.Location;
+          if ('IsAllDay' in order) target.IsAllDay = order.IsAllDay;
+          if ('RecurrenceRule' in order) target.RecurrenceRule = order.RecurrenceRule;
+          if ('StartTimezone' in order) target.StartTimezone = order.StartTimezone;
+          if ('EndTimezone' in order) target.EndTimezone = order.EndTimezone;
         });
       }
       if (deleted && deleted.length > 0) {
         console.log('deleted: ' + deleted.length);
         deleted.forEach((order) => {
-          const orderIndex = eventsData.findIndex(app => app.Id === parseInt(order.Id));
-          if (orderIndex === -1) throw new Error("app not found." + order.Id);
-          eventsData.splice(orderIndex, 1);
+          const eventID = (order && typeof order === 'object') ? order.Id : order;
+          let idx = -1;
+          for (let i = 0; i < eventsData.length; i++) {
+            if (sameId(eventsData[i].Id, eventID)) {
+              idx = i;
+              break;
+            }
+          }
+          if (idx === -1) {
+            console.log("Delete skipped: app not found.", eventID);
+            return;
+          }
+          eventsData.splice(idx, 1);
         });
       }
     }
   }
 };
-
 export default resolvers;

Output/Frontend.png

@@ -1,32 +1,74 @@
-# ej2-angular-scheduler-crud-graphql-adaptor
+<!--
+  howto.md
+  A step-by-step guide to integrate EJ2 Angular Scheduler with CRUD using GraphQl Adaptor.
+-->
+# How to integrate EJ2 Angular Scheduler with CRUD using GraphQl Adaptor.
 
-This project is a skeleton application used to create [Syncfusion Angular Components](https://www.syncfusion.com/angular-ui-components) web application.
+This repository contains a sample full-stack application demonstrating how to show events in Syncfusion Angular Scheduler component using GraphQl. The Angular frontend provides a responsive UI for viewing and managing calendar events.
 
-## Add Syncfusion Grid component in your application
 
-Refer the following UG documenation for adding Syncfusion Angular component in your application
-* [Getting Started of Syncfusion Angular Scheduler component](https://ej2.syncfusion.com/angular/documentation/schedule/getting-started)
+## Prerequisites
+- Node.js (>= 20.19)
+- npm (>= 7.0)
+- Angular CLI (== 17.0.0)
 
-## GraphQL Server setup
+## Setup
 
-You can setup GraphQL server by using `graphpack` npm package. Find the following link for getting more details for your reference.
-[`https://www.npmjs.com/package/graphpack`](https://www.npmjs.com/package/graphpack) 
+### Cloning the repository
+    
+- Clone the repository to your local machine
 
-## Run the GraphQL Server
+### GraphQL Server setup
 
-```
-npm run dev
-```
+### Installation
+1. Open a terminal and navigate to the GraphQl folder
+    ```bash
+    cd GraphQl
+    ```
+2. Install dependencies
+    ```bash
+    npm install
+    ```
 
-## Run the client Schedule application
+### Frontend Setup
 
-```
-npm start
-```
+### Installation
 
-## Resources
+1. Open another terminal and navigate to the Schedule folder
+    ```bash
+    cd Schedule
+    ```
+2. Install the required packages
+    ```bash
+    npm install
+    ```
 
-You can also refer the below resources to know more details about Syncfusion Angular Scheduler components.
-* [Demo](https://ej2.syncfusion.com/angular/demos/#/material/schedule/default)
-* [Documentation](https://helpej2.syncfusion.com/angular/documentation/schedule/)
-* [GraphQL with Syncfusion DataManager](https://ej2.syncfusion.com/angular/documentation/data/adaptors/#graphql-adaptor)
+### Running the Application
+1. Open a terminal and navigate to GraphQl folder
+      ```bash
+    cd GraphQl
+    ```
+2. Start the GraphQl server:
+    ```bash
+    npm run dev
+    ```
+3. Server started running on `http://localhost:4400`
+4. Open another terminal and Navigate to Schedule folder
+      ```bash
+    cd Schedule
+    ```
+5. Start the Schedule Frontend:
+    ```bash
+    npm start
+    ```
+6. Navigate to [`http://localhost:4200`](http://localhost:4200) in your browser.
+
+7. You can perform CRUD operation on the events that will be reflected in the Scheduler.
+
+## Output Preview
+![Frontend Preview](./Output/Frontend.png)
+*Image illustrating the Syncfusion Angular Scheduler*
+
+## Troubleshooting
+- **npm install stuck or fails**: Delete node_modules + package-lock.json, restart system, and reinstall using npm install.
+- **Karma/Jasmine version errors**: Install matched versions: karma@6.4.0, karma-jasmine@5.1.0, jasmine-core@5.1.0.