Skip to content

Commit e91a20b

Browse files
vinoth-Kumar-Svinoth-Kumar-S
authored
Sample for Angular Scheduler Export and import ICS
Sample for Angular Scheduler Export and import ICS
1 parent 870b175 commit e91a20b

16 files changed

+539
-1
lines changed

‎README.md‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,29 @@
1-
# how-to-export-angular-scheduler-appointments-to-an-ics-file
1+
# How to Export and Import Events to ICS File in Angular Scheduler
2+
23
A quick-start Angular project that shows how to export the Angular Scheduler component to an ICS file and change the exported file name. This project contains code to import external events to the Scheduler component. You will also learn how to print Scheduler appointments.
4+
5+
Refer to the export to ICS documentation for the Syncfusion Angular Scheduler component:
6+
https://ej2.syncfusion.com/angular/documentation/schedule/exporting#exporting-calendar-events-as-ics-file
7+
8+
Refer to the import ICS documentation for the Syncfusion Angular Scheduler component:
9+
https://ej2.syncfusion.com/angular/documentation/schedule/exporting#import-events-from-other-calendars
10+
11+
Refer to the print documentation for the Syncfusion Angular Scheduler component:
12+
https://ej2.syncfusion.com/angular/documentation/schedule/exporting#how-to-print-the-scheduler-element
13+
14+
Check out this online example of export and import to ICS in the Syncfusion Angular Scheduler component:
15+
https://ej2.syncfusion.com/angular/demos/#/material3/schedule/calendar-export-import
16+
17+
Refer to the getting started documentation for the Syncfusion Angular Uploader component:
18+
https://ej2.syncfusion.com/angular/documentation/uploader/getting-started
19+
20+
The video to get started with the Angular Scheduler component:
21+
https://www.youtube.com/watch?v=dE_9t5HJ8rc
22+
23+
## Project prerequisites
24+
25+
Make sure that you have the latest versions of NodeJS and Visual Studio Code in your machine before starting to work on this project.
26+
27+
### How to run this application?
28+
29+
To run this application, you need to clone the `how-to-export-angular-scheduler-appointments-to-an-ics-file` 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: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
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-inputs": "^23.1.36",
22+
"@syncfusion/ej2-angular-schedule": "^23.1.36",
23+
"@syncfusion/ej2-material-theme": "~23.1.36",
24+
"rxjs": "~7.8.0",
25+
"tslib": "^2.3.0",
26+
"zone.js": "~0.13.0"
27+
},
28+
"devDependencies": {
29+
"@angular-devkit/build-angular": "^16.2.1",
30+
"@angular/cli": "~16.2.1",
31+
"@angular/compiler-cli": "^16.2.0",
32+
"@types/jasmine": "~4.3.0",
33+
"jasmine-core": "~4.6.0",
34+
"karma": "~6.4.0",
35+
"karma-chrome-launcher": "~3.2.0",
36+
"karma-coverage": "~2.2.0",
37+
"karma-jasmine": "~5.1.0",
38+
"karma-jasmine-html-reporter": "~2.1.0",
39+
"typescript": "~5.1.3"
40+
}
41+
}

‎src/app/app.component.css‎

Whitespace-only changes.

‎src/app/app.component.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<ejs-uploader cssClass='calendar-import' [multiple]='false' [buttons]='buttons'
2+
[showFileList]=false allowedExtensions='.ics' (selected)="onFileSelect($event)"></ejs-uploader>
3+
4+
<ejs-schedule #scheduler width='100%' height='550px'
5+
[selectedDate]="selectedDate"
6+
[eventSettings]="eventSettings"
7+
(actionBegin)="onActionBegin($event)">
8+
<e-views>
9+
<e-view option="Week"></e-view>
10+
<e-view option="WorkWeek"></e-view>
11+
<e-view option="Month"></e-view>
12+
</e-views>
13+
</ejs-schedule>
14+

‎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: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { Component, ViewChild } from '@angular/core';
2+
import { EventSettingsModel, ScheduleComponent, ToolbarActionArgs } from '@syncfusion/ej2-angular-schedule';
3+
import { ItemModel } from '@syncfusion/ej2-navigations';
4+
import { scheduleData } from './data';
5+
import { SelectedEventArgs } from '@syncfusion/ej2-angular-inputs';
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('scheduler') schedulerObj !: ScheduleComponent;
14+
public selectedDate: Date = new Date(2023, 9, 9);
15+
public eventSettings: EventSettingsModel = { dataSource: scheduleData };
16+
public buttons = {browse: 'Choose file'}
17+
public onActionBegin(args: ToolbarActionArgs){
18+
if(args.requestType === "toolbarItemRendering"){
19+
let exportItem: ItemModel = {
20+
text: 'Export Calendar',
21+
click: this.onExportClick.bind(this)
22+
}
23+
let printItem: ItemModel = {
24+
text: 'Print',
25+
prefixIcon: 'e-icon e-print',
26+
click: this.onPrintClick.bind(this)
27+
}
28+
args.items?.push(exportItem, printItem);
29+
}
30+
}
31+
32+
public onExportClick(){
33+
this.schedulerObj.exportToICalendar('schedulerEvents');
34+
}
35+
36+
public onPrintClick(){
37+
this.schedulerObj.print({ height: 'Auto', width: 'Auto'});
38+
}
39+
40+
public onFileSelect(args: SelectedEventArgs){
41+
let file = (args.event.target as HTMLInputElement)?.files?.[0] as Blob;
42+
this.schedulerObj.importICalendar(file);
43+
}
44+
}

‎src/app/app.module.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
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,
6+
WorkWeekService, MonthService, ICalendarExportService, ICalendarImportService,
7+
PrintService } from '@syncfusion/ej2-angular-schedule';
8+
import { UploaderModule } from '@syncfusion/ej2-angular-inputs';
9+
10+
@NgModule({
11+
declarations: [
12+
AppComponent
13+
],
14+
imports: [
15+
BrowserModule,
16+
ScheduleModule, RecurrenceEditorModule, UploaderModule
17+
],
18+
providers: [DayService, WeekService, WorkWeekService, MonthService, ICalendarExportService,
19+
ICalendarImportService, PrintService],
20+
bootstrap: [AppComponent]
21+
})
22+
export class AppModule { }

0 commit comments

Comments
 (0)