How to get started easily with Syncfusion Angular 13 Scheduler?
This article explains how to get started easily with Syncfusion Angular 13 Scheduler. In Syncfusion Angular UI (Essential JS 2) is a collection of modern TypeScript based true Angular components. The Scheduler component is developed from the ground up to be lightweight, responsive, modular and touch-friendly.
Project pre-requisites
Make sure that you have the compatible versions of TypeScript and Angular in your machine before starting to work on this project.
You can use the Angular CLI to setup your Angular applications:
To install Angular CLI, use the following command.
npm install -g @angular/cli@13.0.1
Create an Angular application
Start a new Angular application using the Angular CLI command as follows.
ng new angular13-app cd angular13-app
Adding Syncfusion Schedule package
All the available Essential JS 2 packages are published in npmjs.com registry.
To install Scheduler component, use the following command.
npm install @syncfusion/ej2-angular-schedule --save
Note:
The --save will instruct NPM to include the Schedule package inside the dependencies section of the package.json.
Registering Schedule module
Import Scheduler module into Angular application(app.module.ts) from the package @syncfusion/ej2-angular-schedule.
[src/app/app.module.ts]
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ScheduleModule, View } from '@syncfusion/ej2-angular-schedule';
import { WeekService, MonthService} from '@syncfusion/ej2-angular-schedule';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
ScheduleModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [WeekService,
MonthService]
})
export class AppModule { }
Adding CSS reference
The following CSS files are available in ../node_modules/@syncfusion package folder. This can be referenced in [src/styles.css] using the following code.
@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-calendars/styles/material.css'; @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; @import '../node_modules/@syncfusion/ej2-lists/styles/material.css'; @import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; @import '../node_modules/@syncfusion/ej2-angular-schedule/styles/material.css';
Add Scheduler component
Modify the template in [src/app/app.component.ts] file to render the Scheduler component. Add the Angular Scheduler by using
import { Component } from '@angular/core';
import { WeekService, MonthService, WorkWeekService, EventSettingsModel } from '@syncfusion/ej2-angular-schedule';
import { defaultData } from './data';
@Component({
selector: 'app-root',
providers: [WeekService, MonthService, WorkWeekService],
// specifies the template string for the Schedule component
template: `<ejs-schedule width='100%' height='550px' [selectedDate]="selectedDate" [eventSettings]="eventSettings"><e-views> <e-view option="Week" startHour="07:00" endHour="15:00"></e-view>
<e-view option="WorkWeek" startHour="10:00" endHour="18:00"></e-view> <e-view option="Month" [showWeekend]="showWeekend"></e-view></e-views></ejs-schedule>`
})
export class AppComponent {
public selectedDate: Date = new Date(2018, 1, 15);
public showWeekend: boolean = false;
public eventSettings: EventSettingsModel = { dataSource: defaultData };
}
Adding the datasource [src/app/data.ts]
export let defaultData: Object[] = [
{
Id: 1,
Subject: 'Conference',
StartTime: new Date(2018, 1, 7, 10, 0),
EndTime: new Date(2018, 1, 7, 11, 0),
IsAllDay: false
}, {
Id: 2,
Subject: 'Meeting - 1',
StartTime: new Date(2018, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 16, 12, 30),
IsAllDay: false
}, {
Id: 3,
Subject: 'Paris',
StartTime: new Date(2018, 1, 13, 12, 0),
EndTime: new Date(2018, 1, 13, 12, 30),
IsAllDay: false
}, {
Id: 4,
Subject: 'Vacation',
StartTime: new Date(2018, 1, 12, 10, 0),
EndTime: new Date(2018, 1, 12, 10, 30),
IsAllDay: false
}
];
Example Sample: https://github.com/SyncfusionExamples/ej2-angular-13-scheduler
Conclusion
We hope you enjoyed learning about how to get started easily with Syncfusion Angular 13 Scheduler.
You can refer to our Angular Schedule feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Schedule example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!
