How to get started easily with Syncfusion Angular 10 Scheduler?

This article explains how to start Synfusion Angular 10 Scheduler. A quick start project that helps you to create an Angular 10 Scheduler with minimal code configuration.

Scheduler features covered in this Project:

This is an Angular 10 project created using Angular CLI 10.1.0. The Scheduler features included in this project are as follows.

• Angular 10 Scheduler displaying basic views with appointments loaded as JSON data.
• Drag and resize actions enabled for events by default.
• Setting current date and view for the scheduler.
• Setting specific time zone on the scheduler.

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.

• Angular 10+
• TypeScript 3.8+

Angular 10 Scheduler – Introduction:

The Angular 10 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.

 

Dependencies:

Before starting with this project, the Angular 10 Scheduler requires to add the Syncfusion `ej2-angular-schedule` package from npmjs, which are is distributed in npm as @syncfusion scoped packages.

Creating Angular Project

We will see the Angular project creation steps using the Angular CLI tool.

1. Install the Angular CLI application in on your machine.

npm install -g @angular/cli@10.1.0

Refer to the screenshot:

ng new <project name>
cd <project name>

3.    3. Install the ej2-angular-schedule package using the npm install command.

   npm install @syncfusion/ej2-angular-schedule --save
   

 Adding Angular 10 Scheduler

You can add the Angular 10 Scheduler component by using `ejs-schedule` directive, and the attributes used within this tag allows you to define other scheduler functionalities.

1. Import the ScheduleModule into app.module.ts file from the ej2-angular-schedule package.
2. The next step in Angular Scheduler creation is to import and inject the other required modules within the providers section of app.module.ts.

[app.module.ts]

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ScheduleModule, AgendaService, DayService, WeekService, WorkWeekService, MonthService } from '@syncfusion/ej2-angular-schedule';
import { AppComponent } from './app.component';
 
/**
 * Module
 */
@NgModule({
    imports:[
        BrowserModule,
        ScheduleModule
    ],
    declarations:[AppComponent],
    bootstrap:[AppComponent],
    providers:[AgendaService, DayService, WeekService, WorkWeekService, MonthService],
})
export class AppModule { }

4. Define the Angular Scheduler code within the app.component.html file which is mapped to the templateUrl option in app.component.ts file.

[app.component.html]

<ejs-schedule> </ejs-schedule>

[index.html]

<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />

     5.Try running the application with the command ng serve, and have an empty Scheduler displayed on the browser.  Now, let’s load the Scheduler with event data.

Loading appointment data

Let’s populate the empty Scheduler with appointments, by binding the local JSON event data to it through the dataSource property.

[app.component.ts]

import { Component } from '@angular/core';
import { EventSettingsModel} from '@syncfusion/ej2-angular-schedule';
 
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    public eventData: EventSettingsModel = {
        dataSource: [{
            Id: 1,
            Subject: 'Board Meeting',
            StartTime: new Date(2021, 7, 13, 9, 0),
            EndTime: new Date(2021, 7, 13, 11, 0)
        },
            {
                Id: 2,
                Subject: 'Training session on JSP',
                StartTime: new Date(2021, 7, 15, 15, 0),
                EndTime: new Date(2021, 7, 15, 17, 0)
            },
            {
                Id: 3,
                Subject: 'Sprint Planning with Team members',
                StartTime: new Date(2021, 7, 25, 9, 30),
                EndTime: new Date(2021, 7, 25, 11, 0)
            }]
    }
}

Now, assign this data source to the Angular Scheduler’s eventSettings property within the app.component.html file.

[app.component.html]

<ejs-schedule [eventSettings]="eventData"></ejs-schedule>

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 themit in the providers section within the app.module.ts file.

[app.module.ts]

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ScheduleModule, AgendaService, DayService, WeekService, WorkWeekService, MonthService, DragAndDropService, ResizeService } from '@syncfusion/ej2-angular-schedule';
import { AppComponent } from './app.component';
 
/**
 * Module
 */
@NgModule({
  imports: [
    BrowserModule,
    ScheduleModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [AgendaService, DayService, WeekService, WorkWeekService, MonthService, DragAndDropService, ResizeService],
})
export class AppModule { }

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 propertiesy can be used.

[app.component.ts]

import { Component } from '@angular/core';
import { EventSettingsModel, View } from '@syncfusion/ej2-angular-schedule';
 
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    public currentDate: Date = new Date(2021, 7, 23);
    public newViewMode: View = 'Month';
}

[app.component.html]

<ejs-schedule [eventSettings]="eventData" [selectedDate]="currentDate" [currentView]="newViewMode"></ejs-schedule>

Setting timezone

To set specific timezone for Angular Scheduler, the timezone property can be defined with a valid timezone value. Here, lLet’s assign “UTC” to the timezone property of Scheduler, so that the events will get be displayed on the Scheduler with UTC time difference.

<ejs-schedule [eventSettings]="eventData" [selectedDate]="currentDate" timezone="UTC" [currentView]="newViewMode"></ejs-schedule>

Run the application with the command “ng serve” in the command prompt and you will be able to view the Angular Scheduler output with loaded appointments and other settings.

Example: Getting started with Angular 10 Scheduler

Conclusion

we hope you enjoyed learning about how to get started easily with Syncfusion Angular 10 Scheduler.

You can refer to our Angular Scheduler's feature tour page to know about its other groundbreaking feature representations and documentation. You can also explore our Angular Scheduler example to understand how to present and manipulate data.

For current customers, you can check out our Angular 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 Angular Scheduler and other Angular components.

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!