Post
Ask Question

How To Integrate Schedule Component In Angular

Introduction

 
In this article, we are going to see how to create a scheduler component and configure its available Angular.
 
First, we setup an angular application using angular CLI. Once finish the setup need to add a schedule reference package. Please refer and install the below scheduler component npm command.
 
npm install @syncfusion/ej2-angular-schedule --save
 
 
After installing that reference the related dependencies are added in the package.json file.
 

Import Weekly Schedule Module

 
Now add the schedule module to the app.module.ts file. Please add the below code to your app.module.ts file.
  1. import {  
  2.     NgModule  
  3. } from '@angular/core';  
  4. import {  
  5.     BrowserModule  
  6. } from '@angular/platform-browser';  
  7. import {  
  8.     AppRoutingModule  
  9. } from './app-routing.module';  
  10. import {  
  11.     AppComponent  
  12. } from './app.component';  
  13. import {  
  14.     ScheduleModule  
  15. } from '@syncfusion/ej2-angular-schedule';  
  16. @NgModule({  
  17.     declarations: [  
  18.         AppComponent  
  19.     ],  
  20.     imports: [  
  21.         BrowserModule,  
  22.         AppRoutingModule,  
  23.         ScheduleModule  
  24.     ],  
  25.     providers: [],  
  26.     bootstrap: [AppComponent]  
  27. })  
  28. export class AppModule {}  

Adding CSS Reference File

 
Schedule CSS files are available in the ej2-angular-schedule package folder. This can be referenced in your application using the following code.
  1. /* You can add global styles to this file, and also import other style files */  
  2. @import '../node_modules/@syncfusion/ej2-base/styles/material.css';  
  3. @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';  
  4. @import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';  
  5. @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';  
  6. @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';  
  7. @import '../node_modules/@syncfusion/ej2-lists/styles/material.css';  
  8. @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';  
  9. @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';  
  10. @import '../node_modules/@syncfusion/ej2-angular-schedule/styles/material.css';  

Module injection

 
The scheduler module required some of the modules. So we are going to inject the needed module for those views. Please refer to the below names.
  1. Day - Inject this module for displaying day view.
  2. Week - Inject this module for displaying the week view.
  3. WorkWeek - Inject this module for displaying the workweek view.
  4. Month - Inject this module for displaying the month view.
  5. Year - Inject this module for displaying the year view.
  6. Agenda - Inject this module for displaying agenda view.
  7. MonthAgenda - Inject this module for displaying the month agenda view.
  8. TimelineViews - Inject this module for displaying timeline day, timeline week, timeline work week view.
  9. TimelineMonth - Inject this module for displaying timeline month view.
  10. TimelineYear - Inject this module for displaying timeline year view.
These modules should be injected into the schedule using the providers' method within the app.component.ts.
  1. import {  
  2.     Component  
  3. } from '@angular/core';  
  4. import {  
  5.     DayService,  
  6.     WeekService,  
  7.     WorkWeekService,  
  8.     MonthService,  
  9.     AgendaService  
  10. } from '@syncfusion/ej2-angular-schedule';  
  11. @Component({  
  12.     selector: 'app-root',  
  13.     providers: [DayService, WeekService, WorkWeekService, MonthService, AgendaService],  
  14.     templateUrl: './app.component.html',  
  15.     styleUrls: ['./app.component.css']  
  16. })  
  17. export class AppComponent {  
  18.     title = 'shedulecomponents';  
  19. }  

ScheduleInitialization

 
Add <ejs-schedule> </ejs-schedule> tag to app.components.html file. Followed above steps and codes and run the application ng serve --open
 
 
Set Date
 
The scheduler usually displays the system date as its current date. To change the current date of Scheduler with a specific date, define the selecteddatavalue property.
  1. public selecteddatavalue : Date = new Date(2021, 3, 11);  

Highlights appointments

 
Next to populate the empty scheduler with appointments, define some of the json data passed to the datasource property available within the eventSettings option.
 
The eventSettings options need to import EventSettingsModel from @syncfusion/ej2-angular-schedule.
 
To define any appointments, start and end times are required. In the following example, you can see the appointment defined with default fields such as Id, Subject, StartTime, and EndTime.
 
app.component.html
  1. <ejs-schedule width='100%' height='550px' [selectedDate]='selecteddatavalue'  
  2. [eventSettings]='eventSettings'></ejs-schedule>  
app.component.ts
  1. import {  
  2.     Component  
  3. } from '@angular/core';  
  4. import {  
  5.     DayService,  
  6.     WeekService,  
  7.     WorkWeekService,  
  8.     MonthService,  
  9.     AgendaService,  
  10.     EventSettingsModel  
  11. } from '@syncfusion/ej2-angular-schedule';  
  12. @Component({  
  13.     selector: 'app-root',  
  14.     providers: [DayService, WeekService, WorkWeekService, MonthService, AgendaService],  
  15.     templateUrl: './app.component.html',  
  16.     styleUrls: ['./app.component.css']  
  17. })  
  18. export class AppComponent {  
  19.     title = 'shedulecomponents';  
  20.     public data: object[] = [{  
  21.         id: 2,  
  22.         eventName: 'Interview Meeting',  
  23.         startTime: new Date(2021, 3, 11, 10, 30),  
  24.         endTime: new Date(2021, 3, 11, 11, 50),  
  25.         isAllDay: false  
  26.     }];  
  27.     public selecteddatavalue: Date = new Date(2021, 3, 11);  
  28.     public eventSettings: EventSettingsModel = {  
  29.         dataSource: this.data,  
  30.         fields: {  
  31.             id: 'id',  
  32.             subject: {  
  33.                 name: 'eventName'  
  34.             },  
  35.             isAllDay: {  
  36.                 name: 'isAllDay'  
  37.             },  
  38.             startTime: {  
  39.                 name: 'startTime'  
  40.             },  
  41.             endTime: {  
  42.                 name: 'endTime'  
  43.             },  
  44.         }  
  45.     };  
  46. }  
 
Check the above image to add the event name “Interview Meeting” at data passed time.
 

Set Views

 
If we need to use different views .please import View from @syncfusion/ej2-angular-schedule. The scheduler displays the week view by default. To change the current view, define the applicable view name to the currentviewdata property name.
 
Follow the available view names below.
  • l ·Day
  • l Week
  • l WorkWeek
  • l Month
  • l Year
  • l Agenda
  • l MonthAgenda
  • l TimelineDay
  • l TimelineWeek
  • l TimelineWorkWeek
  • l TimelineMonth
  • l TimelineYear
app.component.html
  1. <ejs-schedule width='100%' height='550px' [selectedDate]='selecteddatavalue'  
  2. [currentView]='currentviewdata ' [eventSettings]='eventSettings'></ejs-schedule>  
app.components.ts
  1. import {  
  2.     Component  
  3. } from '@angular/core';  
  4. import {  
  5.     DayService,  
  6.     WeekService,  
  7.     WorkWeekService,  
  8.     MonthService,  
  9.     AgendaService,  
  10.     EventSettingsModel,  
  11.     View  
  12. } from '@syncfusion/ej2-angular-schedule';  
  13. @Component({  
  14.     selector: 'app-root',  
  15.     providers: [DayService, WeekService, WorkWeekService, MonthService, AgendaService],  
  16.     templateUrl: './app.component.html',  
  17.     styleUrls: ['./app.component.css']  
  18. })  
  19. export class AppComponent {  
  20.     title = 'shedulecomponents';  
  21.     public selecteddatavalue: Date = new Date(2021, 3, 11);  
  22.     public currentviewdata: View = 'Month';  
  23.     public data: object[] = [{  
  24.         id: 2,  
  25.         eventName: 'Interview Meeting',  
  26.         startTime: new Date(2021, 3, 11, 10, 30),  
  27.         endTime: new Date(2021, 3, 11, 11, 50),  
  28.         isAllDay: false  
  29.     }];  
  30.     public eventSettings: EventSettingsModel = {  
  31.         dataSource: this.data,  
  32.         fields: {  
  33.             id: 'id',  
  34.             subject: {  
  35.                 name: 'eventName'  
  36.             },  
  37.             isAllDay: {  
  38.                 name: 'isAllDay'  
  39.             },  
  40.             startTime: {  
  41.                 name: 'startTime'  
  42.             },  
  43.             endTime: {  
  44.                 name: 'endTime'  
  45.             },  
  46.         }  
  47.     };  
  48. }  
For example set view is the day,
  1. public selecteddatavalue : Date = new Date(2021, 3, 11);  
  2. public currentviewdata : View = 'Day';  
 
Here we are going to set view month,
  1. public selecteddatavalue : Date = new Date(2021, 3, 11);  
  2. public currentviewdata : View = 'Month';  
 
Others are similar to the above view please changes the view one by one and see the changes in your scheduler.
 
I hope this article most helpful for us.


Similar Articles