Skip to content

Commit a235546

Browse files
maheshtpsmaheshtps
authored
Merge pull request #1 from vinoth-Kumar-S/master
Adding Angular Scheduler exporting sample
2 parents da89c89 + 1abb533 commit a235546

16 files changed

+520
-2
lines changed

‎README.md‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,20 @@
1-
# how-to-export-angular-scheduler-appointments-to-an-excel-document
2-
A quick-start Angular project that shows how to Export Angular Scheduler Appointments to an Excel document. This project contains code to export documents with custom fields, individual occurrences of recurring series, and custom event data. It also contains code to change the file name, format, and column headers.
1+
# How to Export Angular Scheduler Appointments to an Excel Document
2+
3+
A quick-start Angular project that shows how to Export Angular Scheduler Appointments to an Excel document. This project contains code to export documents with custom fields, individual occurrences of recurring series, and custom event data. It also contains code to change the file name, file format, and column headers.
4+
5+
Refer to the exporting documentation for the Syncfusion Angular Scheduler component:
6+
https://ej2.syncfusion.com/angular/documentation/schedule/exporting
7+
8+
Check out this online example of exporting in the Syncfusion Angular Scheduler component:
9+
https://ej2.syncfusion.com/angular/demos/#/material3/schedule/excel-export
10+
11+
Watch the video to get started with the Angular Scheduler component:
12+
https://www.youtube.com/watch?v=dE_9t5HJ8rc
13+
14+
## Project prerequisites
15+
16+
Make sure that you have the latest versions of NodeJS and Visual Studio Code in your machine before starting to work on this project.
17+
18+
### How to run this application?
19+
20+
To run this application, you need to clone the `how-to-export-angular-scheduler-appointments-to-an-excel-document` 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: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
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-schedule": "^23.1.36",
22+
"@syncfusion/ej2-material-theme": "~23.1.36",
23+
"rxjs": "~7.8.0",
24+
"tslib": "^2.3.0",
25+
"zone.js": "~0.13.0"
26+
},
27+
"devDependencies": {
28+
"@angular-devkit/build-angular": "^16.2.1",
29+
"@angular/cli": "~16.2.1",
30+
"@angular/compiler-cli": "^16.2.0",
31+
"@types/jasmine": "~4.3.0",
32+
"jasmine-core": "~4.6.0",
33+
"karma": "~6.4.0",
34+
"karma-chrome-launcher": "~3.2.0",
35+
"karma-coverage": "~2.2.0",
36+
"karma-jasmine": "~5.1.0",
37+
"karma-jasmine-html-reporter": "~2.1.0",
38+
"typescript": "~5.1.3"
39+
}
40+
}

‎src/app/app.component.css‎

Whitespace-only changes.

‎src/app/app.component.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
2+
<ejs-schedule #scheduler width='100%' height='550px'
3+
[selectedDate]="selectedDate"
4+
[eventSettings]="eventSettings"
5+
(actionBegin)="onActionBegin($event)">
6+
<e-views>
7+
<e-view option="Week"></e-view>
8+
<e-view option="WorkWeek"></e-view>
9+
<e-view option="Month"></e-view>
10+
</e-views>
11+
</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: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { Component, ViewChild } from '@angular/core';
2+
import { EventSettingsModel, ExportFieldInfo, ExportOptions, ScheduleComponent, ToolbarActionArgs } from '@syncfusion/ej2-angular-schedule';
3+
import { ItemModel } from '@syncfusion/ej2-navigations';
4+
import { scheduleData } from './data';
5+
@Component({
6+
selector: 'app-root',
7+
templateUrl: './app.component.html',
8+
styleUrls: ['./app.component.css']
9+
})
10+
export class AppComponent {
11+
title = 'myangularproject';
12+
@ViewChild('scheduler') schedulerObj !: ScheduleComponent;
13+
public selectedDate: Date = new Date(2023, 9, 9);
14+
public eventSettings: EventSettingsModel = { dataSource: scheduleData };
15+
16+
public onActionBegin(args: ToolbarActionArgs){
17+
if(args.requestType === 'toolbarItemRendering'){
18+
let exportItem: ItemModel = {
19+
text: 'Excel Export',
20+
prefixIcon: 'e-icon-schedule-excel-export',
21+
click: this.onExportClick.bind(this)
22+
};
23+
args.items?.push(exportItem);
24+
}
25+
}
26+
27+
public onExportClick(){
28+
let customFields: ExportFieldInfo[] = [
29+
{ name:'Subject', text:'Summary'},
30+
{ name: 'StartTime', text: 'First Date' },
31+
{ name: 'EndTime', text: 'Last Date' },
32+
]
33+
let options: ExportOptions = {
34+
fields: ['Id', 'Subject', 'StartTime', 'EndTime', 'Location'],
35+
fieldsInfo: customFields,
36+
fileName: 'Appointments',
37+
includeOccurrences: false,
38+
exportType: 'csv',
39+
customData: [
40+
{Id: 1, Subject: 'Scrum Meeting', StartTime: new Date(2019, 0, 6, 9, 30), EndTime: new Date(2019, 0, 6, 11, 0)},
41+
{Id: 2, Subject: 'PO Meeting', StartTime: new Date(2019, 0, 7, 9, 30), EndTime: new Date(2019, 0, 7, 11, 0)},
42+
{Id: 3, Subject: 'Lead Training', StartTime: new Date(2019, 0, 8, 9, 30), EndTime: new Date(2019, 0, 8, 11, 0)}]
43+
}
44+
this.schedulerObj.exportToExcel(options);
45+
}
46+
}

‎src/app/app.module.ts‎

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

0 commit comments

Comments
 (0)