Create an Angular Scheduler Using the Angular CLI

Learn how easily you can create and configure the Angular Scheduler component of Syncfusion using the “ng add” command of Angular Schematics.

Remember, the Syncfusion Angular Scheduler can be used in any Angular version starting from 4.

In this video, I’ll create an application with the help of Angular CLI and Angular Schematics to make the initial configuration process of Angular Scheduler much simpler. Also, by the end of this video, you will know how to create an Angular Scheduler in just two steps using the "ng add" command [03:11].

Step 1: app.module.ts file changes [05:19]
Step 2: Add Scheduler code in app.component.ts [06:23]

To learn how to add appointments to the Angular Scheduler, check out my next video: https://youtu.be/z4n09yn1Jq0

ANGULAR SCHEDULER -
--------------------
Product overview: https://www.syncfusion.com/angular-ui-components/angular-scheduler
Examples: https://ej2.syncfusion.com/angular/demos/#/material/schedule/timeline-resource
Documentation: https://ej2.syncfusion.com/angular/documentation/schedule/getting-started/
Download free trial: https://www.syncfusion.com/angular-ui-components
GitHub source: https://github.com/syncfusion/ej2-angular-ui-components/tree/master/components/schedule
npmjs package: https://www.npmjs.com/package/@syncfusion/ej2-angular-schedule
--------------------
SUBSCRIBE

Syncfusion on YouTube: http://bit.ly/syncfusionyoutube
Sign up to receive email updates: http://bit.ly/syncfusionemail
---------------------
SOCIAL COMMUNITY

Facebook: https://www.facebook.com/Syncfusion/
Twitter: https://twitter.com/Syncfusion
LinkedIn: https://www.linkedin.com/company/syncfusion/
Instagram: http://instagram.com/syncfusion

TRANSCRIPT REFERENCE
---------------------
Before moving onto the appointment creation process, make sure that you have the compatible versions of TypeScript and Angular in your machine:
- Angular: 4 and above
- TypeScript: 2.6 and above

Also, use the Visual Studio Code to view and edit the code better. View the output result on any of the supported browsers.

Set up the CLI project by installing the Angular CLI on your machine. For that, open the integrated terminal window in Visual Studio Code and type the command:
npm install -g @angular/cli
This command will add the latest Angular packages to your machine.

Start a new Angular application using the CLI command:
ng new my-scheduler-app
[It'll prompt you to choose the routing option for your application. Choose "No". It also asks for CSS or SASS usage; opt for CSS here.]
Choosing this will generate an empty CSS file on your application.

Now, an empty Angular application is created, so navigate to that newly created application folder.
cd my-scheduler-app

To use the Angular Scheduler within this empty Angular application, I need to install the necessary packages first.

Here comes the usage of the “ng add” command to make the initial configuration steps much easier in just two steps. This command will take care of the initial configuration processes such as installing the latest Angular Scheduler package, configuring and registering the necessary modules in app.module.ts file, and referencing the default theme styles in your application.

Just type this command:
ng add @syncfusion/ej2-angular-schedule
and this command will install the Angular Scheduler package and then update the angular.json, package.json, app.module.ts, and style.css files as well.

The two-step process to continue further is as follows.

1 [05:19] - Simply import the other needed modules from the scheduler package into the “app.module.ts” file. Here, I’ll import the required view services from the Angular schedule package and define the same view services within the providers section.
Module injection reference - https://ej2.syncfusion.com/angular/documentation/schedule/module-injection/

2 [06:23] - Add the Scheduler code within the template section of the “app.component.ts” file as "ejs-schedule" to display an empty scheduler.

Now, open the terminal and run the application with the command “ng serve –open”. This will compile the code and open the output result in your default browser.

[07:40] - You can also set the height, width, current date, and current view on the Angular Scheduler using the properties height, width, selectedDate, and currentView, respectively.

#scheduler #eventcalendar #angular