Scheduler features covered in this Project
This is an Angular 7 project created using Angular CLI 7.0.4. The Scheduler features included in this project are as follows.
Make sure that you have the compatible versions of TypeScript and Angular in your machine before starting to work on this project.
Angular 7 Scheduler – Introduction
The Angular 7 Scheduler used in this project is created from the Syncfusion `ej2-angular-schedule` package. You can simply define it as <ejs-schedule> within the template.
Creating Angular Project
We will see the Angular project creation steps using the Angular CLI tool.
Adding Angular 7 Scheduler
You can add the Angular 7 Scheduler component by using `ejs-schedule` directive and the attributes used within this tag allows you to define other scheduler functionalities.
Loading appointment data
Let’s populate the empty Scheduler with appointments, by binding the local JSON event data to it through the dataSource property.
Now assign this data source to the Angular Scheduler’s eventSettings property within the app.component.html file.
Enabling drag-and-resize options
To enable the drag and resize actions on Scheduler events, import the required module services from the ej2-angular-schedule package and then mention it in the providers section within the app.module.ts file.
Setting current date and view
By default, Scheduler displays the current system date in Week view mode. To change both the display date as well as view mode, selectedDate and currentView property can be used.
To set specific timezone for Angular Scheduler, timezone property can be defined with valid timezone value. Here, let’s assign “UTC” to the timezone property of Scheduler, so that the events will get displayed on Scheduler with UTC time difference.
Run the application with the command “ng serve” in command prompt and you will be able to view the Angular Scheduler output with loaded appointments and other settings.
This page will automatically be redirected to the sign-in page in 10 seconds.