Skip to content

Commit 093974d

Browse files
maheshtpsmaheshtps
authored
Merge pull request #1 from vinoth-Kumar-S/master
Adding Angular Scheduler Dynamic CRUD
2 parents d177d88 + d6081ee commit 093974d

16 files changed

+408
-1
lines changed

‎README.md‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,26 @@
1-
# how-to-perform-crud-actions-dynamically-in-the-angular-scheduler
1+
# How to Perform CRUD Actions Dynamically in the Angular Scheduler
2+
23
A quick-start Angular project that shows how to perform CRUD actions dynamically in the Angular Scheduler using the Quick Info template.
4+
5+
The CRUD documentation for the Syncfusion Angular Scheduler component:
6+
https://ej2.syncfusion.com/angular/documentation/schedule/crud-actions
7+
8+
The dynamic CRUD documentation for the Syncfusion Angular Scheduler component:
9+
https://ej2.syncfusion.com/angular/documentation/schedule/how-to/add-edit-and-remove-events
10+
11+
Check out this online example of the quick info template in the Syncfusion Angular Scheduler component:
12+
https://ej2.syncfusion.com/angular/demos/#/material3/schedule/quick-info-template
13+
14+
The getting started documentation for the Syncfusion Angular Button component:
15+
https://ej2.syncfusion.com/angular/documentation/button/getting-started
16+
17+
The getting started documentation for the Syncfusion Angular TextBox component:
18+
https://ej2.syncfusion.com/angular/documentation/textbox/getting-started
19+
20+
## Project prerequisites
21+
22+
Make sure that you have the latest versions of NodeJS and Visual Studio Code in your machine before starting to work on this project.
23+
24+
### How to run this application?
25+
26+
To run this application, you need to clone the `how-to-perform-crud-actions-dynamically-in-the-angular-scheduler` repository and then open it in Visual Studio Code. Now, simply install all the necessary react packages into your current project using the `npm install` command and run your project using the `ng serve` command.

‎angular.json‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"myangularproject": {
7+
"projectType": "application",
8+
"schematics": {},
9+
"root": "",
10+
"sourceRoot": "src",
11+
"prefix": "app",
12+
"architect": {
13+
"build": {
14+
"builder": "@angular-devkit/build-angular:browser",
15+
"options": {
16+
"outputPath": "dist/myangularproject",
17+
"index": "src/index.html",
18+
"main": "src/main.ts",
19+
"polyfills": [
20+
"zone.js"
21+
],
22+
"tsConfig": "tsconfig.app.json",
23+
"assets": [
24+
"src/favicon.ico",
25+
"src/assets"
26+
],
27+
"styles": [
28+
"src/styles.css",
29+
"./node_modules/@syncfusion/ej2-material-theme/styles/material.css"
30+
],
31+
"scripts": []
32+
},
33+
"configurations": {
34+
"production": {
35+
"budgets": [
36+
{
37+
"type": "initial",
38+
"maximumWarning": "500kb",
39+
"maximumError": "1mb"
40+
},
41+
{
42+
"type": "anyComponentStyle",
43+
"maximumWarning": "2kb",
44+
"maximumError": "4kb"
45+
}
46+
],
47+
"outputHashing": "all"
48+
},
49+
"development": {
50+
"buildOptimizer": false,
51+
"optimization": false,
52+
"vendorChunk": true,
53+
"extractLicenses": false,
54+
"sourceMap": true,
55+
"namedChunks": true
56+
}
57+
},
58+
"defaultConfiguration": "production"
59+
},
60+
"serve": {
61+
"builder": "@angular-devkit/build-angular:dev-server",
62+
"configurations": {
63+
"production": {
64+
"browserTarget": "myangularproject:build:production"
65+
},
66+
"development": {
67+
"browserTarget": "myangularproject:build:development"
68+
}
69+
},
70+
"defaultConfiguration": "development"
71+
},
72+
"extract-i18n": {
73+
"builder": "@angular-devkit/build-angular:extract-i18n",
74+
"options": {
75+
"browserTarget": "myangularproject:build"
76+
}
77+
},
78+
"test": {
79+
"builder": "@angular-devkit/build-angular:karma",
80+
"options": {
81+
"polyfills": [
82+
"zone.js",
83+
"zone.js/testing"
84+
],
85+
"tsConfig": "tsconfig.spec.json",
86+
"assets": [
87+
"src/favicon.ico",
88+
"src/assets"
89+
],
90+
"styles": [
91+
"src/styles.css",
92+
"./node_modules/@syncfusion/ej2-material-theme/styles/material.css"
93+
],
94+
"scripts": []
95+
}
96+
}
97+
}
98+
}
99+
}
100+
}

‎package.json‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
"name": "myangularproject",
3+
"version": "0.0.0",
4+
"scripts": {
5+
"ng": "ng",
6+
"start": "ng serve",
7+
"build": "ng build",
8+
"watch": "ng build --watch --configuration development",
9+
"test": "ng test"
10+
},
11+
"private": true,
12+
"dependencies": {
13+
"@angular/animations": "^16.2.0",
14+
"@angular/common": "^16.2.0",
15+
"@angular/compiler": "^16.2.0",
16+
"@angular/core": "^16.2.0",
17+
"@angular/forms": "^16.2.0",
18+
"@angular/platform-browser": "^16.2.0",
19+
"@angular/platform-browser-dynamic": "^16.2.0",
20+
"@angular/router": "^16.2.0",
21+
"@syncfusion/ej2-angular-buttons": "^23.1.36",
22+
"@syncfusion/ej2-angular-inputs": "^23.1.36",
23+
"@syncfusion/ej2-angular-schedule": "^23.1.36",
24+
"@syncfusion/ej2-material-theme": "~23.1.36",
25+
"rxjs": "~7.8.0",
26+
"tslib": "^2.3.0",
27+
"zone.js": "~0.13.0"
28+
},
29+
"devDependencies": {
30+
"@angular-devkit/build-angular": "^16.2.1",
31+
"@angular/cli": "~16.2.1",
32+
"@angular/compiler-cli": "^16.2.0",
33+
"@types/jasmine": "~4.3.0",
34+
"jasmine-core": "~4.6.0",
35+
"karma": "~6.4.0",
36+
"karma-chrome-launcher": "~3.2.0",
37+
"karma-coverage": "~2.2.0",
38+
"karma-jasmine": "~5.1.0",
39+
"karma-jasmine-html-reporter": "~2.1.0",
40+
"typescript": "~5.1.3"
41+
}
42+
}

‎src/app/app.component.css‎

Whitespace-only changes.

‎src/app/app.component.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
2+
<ejs-schedule #schedule width='100%' height='650px'
3+
[eventSettings]="eventSettings"
4+
cssClass="quick-info-popup">
5+
<e-views>
6+
<e-view option='Week'></e-view>
7+
</e-views>
8+
<ng-template #quickInfoTemplatesHeader>
9+
<div class="e-popup-header">
10+
<div class="e-header-icon-wrapper">
11+
<button ejs-button class="e-close e-icons" title="close" (click)="onCloseClick()"></button>
12+
</div>
13+
</div>
14+
</ng-template>
15+
<ng-template #quickInfoTemplatesContent let-data>
16+
<ejs-textbox id="subject" placeholder="Subject" value="{{data.Subject}}"></ejs-textbox>
17+
</ng-template>
18+
<ng-template #quickInfoTemplatesFooter let-data>
19+
<div *ngIf="data.elementType == 'cell'">
20+
<button ejs-button cssClass="e-flat" [isPrimary]="true" (click)="onBtnClk($event, 'Add')">Add</button>
21+
</div>
22+
<div *ngIf="data.elementType == 'event'">
23+
<button ejs-button cssClass="e-flat" [isPrimary]="true" (click)="onBtnClk($event, 'Edit')">Save</button>
24+
<button ejs-button cssClass="e-flat" [isPrimary]="true" (click)="onBtnClk($event, 'Delete')">Delete</button>
25+
</div>
26+
</ng-template>
27+
</ejs-schedule>

‎src/app/app.component.spec.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { TestBed } from '@angular/core/testing';
2+
import { AppComponent } from './app.component';
3+
4+
describe('AppComponent', () => {
5+
beforeEach(() => TestBed.configureTestingModule({
6+
declarations: [AppComponent]
7+
}));
8+
9+
it('should create the app', () => {
10+
const fixture = TestBed.createComponent(AppComponent);
11+
const app = fixture.componentInstance;
12+
expect(app).toBeTruthy();
13+
});
14+
15+
it(`should have as title 'myangularproject'`, () => {
16+
const fixture = TestBed.createComponent(AppComponent);
17+
const app = fixture.componentInstance;
18+
expect(app.title).toEqual('myangularproject');
19+
});
20+
21+
it('should render title', () => {
22+
const fixture = TestBed.createComponent(AppComponent);
23+
fixture.detectChanges();
24+
const compiled = fixture.nativeElement as HTMLElement;
25+
expect(compiled.querySelector('.content span')?.textContent).toContain('myangularproject app is running!');
26+
});
27+
});

‎src/app/app.component.ts‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { Component, ViewChild } from '@angular/core';
2+
import { EventSettingsModel, ScheduleComponent, EJ2Instance } from '@syncfusion/ej2-angular-schedule';
3+
import { TextBoxComponent } from '@syncfusion/ej2-angular-inputs';
4+
import { closest, isNullOrUndefined } from '@syncfusion/ej2-base';
5+
import { hospitalData } from './data';
6+
@Component({
7+
selector: 'app-root',
8+
templateUrl: './app.component.html',
9+
styleUrls: ['./app.component.css']
10+
})
11+
export class AppComponent {
12+
title = 'myangularproject';
13+
@ViewChild('schedule') scheduleObj !: ScheduleComponent;
14+
public eventSettings: EventSettingsModel = {
15+
dataSource: hospitalData
16+
};
17+
18+
public onCloseClick(){
19+
this.scheduleObj.closeQuickInfoPopup();
20+
}
21+
22+
public onBtnClk(e:Event, option:string){
23+
let quickPopup: HTMLElement = closest(e.target as HTMLElement, '.e-quick-popup-wrapper') as HTMLElement;
24+
if(option === 'Add'){
25+
let subject = ((quickPopup.querySelector('#subject') as EJ2Instance).ej2_instances[0] as TextBoxComponent).value;
26+
let addObj: Record<string, any> = {
27+
Id: this.scheduleObj.getEventMaxID(),
28+
Subject: isNullOrUndefined(subject) ? 'Add title' : subject,
29+
StartTime: new Date(this.scheduleObj.activeCellsData.startTime),
30+
EndTime: new Date(this.scheduleObj.activeCellsData.endTime),
31+
IsAllDay: this.scheduleObj.activeCellsData.isAllDay
32+
};
33+
this.scheduleObj.addEvent(addObj);
34+
} else{
35+
let eventDetails: Record<string, any> = this.scheduleObj.activeEventData.event as Record<string, any>;
36+
if(option === 'Edit'){
37+
eventDetails['Subject'] = ((quickPopup.querySelector('#subject') as EJ2Instance).ej2_instances[0] as TextBoxComponent).value;
38+
this.scheduleObj.saveEvent(eventDetails);
39+
} else {
40+
this.scheduleObj.deleteEvent(eventDetails['Id']);
41+
}
42+
}
43+
this.onCloseClick();
44+
}
45+
}

‎src/app/app.module.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { NgModule } from '@angular/core';
2+
import { BrowserModule } from '@angular/platform-browser';
3+
4+
import { AppComponent } from './app.component';
5+
import { ScheduleModule, RecurrenceEditorModule, DayService, WeekService, WorkWeekService, MonthService, AgendaService, MonthAgendaService, TimelineViewsService, TimelineMonthService, ResizeService } from '@syncfusion/ej2-angular-schedule';
6+
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';
7+
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
8+
9+
@NgModule({
10+
declarations: [
11+
AppComponent
12+
],
13+
imports: [
14+
BrowserModule,
15+
ScheduleModule, RecurrenceEditorModule, TextBoxModule, ButtonModule
16+
],
17+
providers: [DayService, WeekService, WorkWeekService, MonthService, AgendaService, MonthAgendaService, TimelineViewsService, TimelineMonthService, ResizeService],
18+
bootstrap: [AppComponent]
19+
})
20+
export class AppModule { }

‎src/app/data.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
export let hospitalData: Record<string, any>[] = [
2+
{
3+
Id: 1,
4+
Subject: 'David',
5+
StartTime: new Date(2023, 9, 30, 9, 0),
6+
EndTime: new Date(2023, 9, 30, 10, 0),
7+
Description: 'Health Checkup',
8+
DepartmentName: 'GENERAL'
9+
}, {
10+
Id: 2,
11+
Subject: 'John',
12+
StartTime: new Date(2023, 9, 30, 10, 30),
13+
EndTime: new Date(2023, 9, 30, 11, 30),
14+
Description: 'Tooth Erosi9n',
15+
DepartmentName: 'DENTAL'
16+
}, {
17+
Id: 3,
18+
Subject: 'Peter',
19+
StartTime: new Date(2023, 9, 31, 12, 0),
20+
EndTime: new Date(2023, 9, 31, 13, 0),
21+
Description: 'Eye and Spectacles Checkup',
22+
DepartmentName: 'GENERAL'
23+
}];

‎src/favicon.ico‎

948 Bytes
Binary file not shown.

0 commit comments

Comments
 (0)