We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to get started easily with Syncfusion Angular 11 Scheduler

Platform: Angular - EJ 2 |
Control: Schedule

A quick start project that helps you to create an Angular 11 Scheduler with a minimal code configuration.

Scheduler

 

Scheduler features covered in this Project

 

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

  • Angular 11 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 scheduler.
  • Setting specific timezone on 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 11 Scheduler – Introduction

 

The Angular 11 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 11 Scheduler requires to add the Syncfusion `ej2-angular-schedule` package from npmjs, which are 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 your machine.

 

npm install -g @angular/cli@11.2.3

 

Note:

If you would like to follow and run the application in Angular 6 or Angular 5 or Angular 4, you need to replace the CLI command version number with corresponding angular version number.

 

npm install -g @angular/cli@<CLI VERSION>

 

 

  1. Now create a new Angular project by using the command `ng new` and navigate to that folder.

 

ng new angular11-app

cd angular11-app

 

  1. Install the ej2-angular-schedule package through the npm install command.

 

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

 

Adding Angular 11 Scheduler

 

You can add the Angular 11 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 { BrowserModule } from '@angular/platform-browser';

import {ScheduleModule, AgendaService, DayService, WeekService, WorkWeekService, MonthService } from '@syncfusion/ej2-angular-schedule';

import { NgModule } from '@angular/core';

 

import { AppComponent } from './app.component';

 

@NgModule({

    imports: [

        BrowserModule, ScheduleModule

    ],

    providers: [AgendaService, DayService, WeekService, WorkWeekService, MonthService],

    bootstrap: [AppComponent]

})

export class AppModule { }

 

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

 

[app.component.html]

 

<ejs-schedule> </ejs-schedule>

 

  1. Refer the CDN link of CSS reference within the index.html file.

 

[index.html]

 

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

 

  1. 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(2018, 10, 30, 9, 0),

            EndTime: new Date(2018, 10, 30, 11, 0)

        },

            {

                Id: 2,

                Subject: 'Training session on JSP',

                StartTime: new Date(2018, 10, 30, 15, 0),

                EndTime: new Date(2018, 10, 30, 17, 0)

            },

            {

                Id: 3,

                Subject: 'Sprint Planning with Team members',

                StartTime: new Date(2018, 10, 30, 9, 30),

                EndTime: new Date(2018, 10, 30, 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 it in the providers section within the app.module.ts file.

[app.module.ts]

import { BrowserModule } from '@angular/platform-browser';

import {ScheduleModule, AgendaService, DayService, DragAndDropService, ResizeService, WeekService, WorkWeekService, MonthService } from '@syncfusion/ej2-angular-schedule';

import { NgModule } from '@angular/core';

 

import { AppComponent } from './app.component';

 

@NgModule({

    imports: [

        BrowserModule, ScheduleModule

    ],

    providers: [AgendaService, DayService, WeekService, WorkWeekService, MonthService, DragAndDropService, ResizeService],

    bootstrap: [AppComponent]

})

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 property 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(2018, 10, 30);

    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, 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.

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

 

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.

There are more options to explore with Angular 11 Scheduler and you can also try playing with the downloadable example link in this knowledge base article.

Downloadable example link: Angular 11 Scheduler

 

2X faster development

The ultimate Angular UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment
Comments
Syed Shahbaz
Nov 01, 2022

Add how to save appointments created by user

Reply
Swathi Ravi [Syncfusion]
Nov 02, 2022

You can refer to the below shared UG to save data on the Schedule.

UG: https://ej2.syncfusion.com/angular/documentation/schedule/data-binding/#scheduler-crud-actions

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile