Components / Scheduler

Getting Started with Kendo UI for Angular Scheduler

The Scheduler displays events in different views with built-in support for editing, time zones, and recurrence rules.

Basic Usage

The following example demonstrates the Scheduler in action.

import { Component } from '@angular/core';
import { SchedulerEvent } from '@progress/kendo-angular-scheduler';
import { sampleData, displayDate } from './events-utc';

@Component({
    selector: 'my-app',
    template: `
    <kendo-scheduler [kendoSchedulerBinding]="events"
                     [selectedDate]="selectedDate"
                     scrollTime="08:00"
                     style="height: 600px;">
            <kendo-scheduler-day-view>
            </kendo-scheduler-day-view>

            <kendo-scheduler-week-view>
            </kendo-scheduler-week-view>

            <kendo-scheduler-month-view>
            </kendo-scheduler-month-view>

            <kendo-scheduler-timeline-view>
            </kendo-scheduler-timeline-view>

            <kendo-scheduler-agenda-view>
            </kendo-scheduler-agenda-view>
        </kendo-scheduler>
    `
})
export class AppComponent {
    public selectedDate: Date = displayDate;
    public events: SchedulerEvent[] = sampleData;
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { SchedulerModule } from '@progress/kendo-angular-scheduler';

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

@NgModule({
  imports:      [ BrowserModule, BrowserAnimationsModule, SchedulerModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }


import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

import { SchedulerEvent } from '@progress/kendo-angular-scheduler';

/* tslint:disable */

const baseData: any[] = [
    {
        "TaskID": 4,
        "OwnerID": 2,
        "Title": "Bowling tournament",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-09T21:00:00.000Z",
        "End": "2013-06-10T00:00:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 5,
        "OwnerID": 2,
        "Title": "Take the dog to the vet",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-10T07:00:00.000Z",
        "End": "2013-06-10T08:00:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 6,
        "OwnerID": 2,
        "Title": "Call Charlie about the project",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-11T11:30:00.000Z",
        "End": "2013-06-11T13:00:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 7,
        "OwnerID": 3,
        "Title": "Meeting with Alex",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-12T11:00:00.000Z",
        "End": "2013-06-12T12:00:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 9,
        "OwnerID": 2,
        "Title": "Alex's Birthday",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-14T02:00:00.000Z",
        "End": "2013-06-14T02:00:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": true
    },
    {
        "TaskID": 12,
        "OwnerID": 2,
        "Title": "Car Service",
        "Description": "Might come to work later!",
        "StartTimezone": null,
        "Start": "2013-06-24T08:30:00.000Z",
        "End": "2013-06-24T09:30:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 14,
        "OwnerID": 3,
        "RoomID": 2,
        "Title": "Replace the printer on the 1st floor",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-24T10:00:00.000Z",
        "End": "2013-06-24T11:00:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 15,
        "OwnerID": 1,
        "Title": "Attending HR Conference",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-25T00:00:00.000Z",
        "End": "2013-06-26T00:00:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": true
    },
    {
        "TaskID": 16,
        "OwnerID": 1,
        "Title": "Business Lunch with Gregory Watkins",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-25T12:00:00.000Z",
        "End": "2013-06-25T13:00:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 17,
        "OwnerID": 1,
        "Title": "Breakfast with CFO and COO",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-27T08:30:00.000Z",
        "End": "2013-06-27T09:30:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 18,
        "OwnerID": 1,
        "Title": "Job Interview - Mathew Stevens",
        "Description": "Junior Researcher",
        "StartTimezone": null,
        "Start": "2013-06-27T10:00:00.000Z",
        "End": "2013-06-27T11:00:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 19,
        "OwnerID": 1,
        "Title": "Review CVs with Tim",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-27T11:00:00.000Z",
        "End": "2013-06-27T11:30:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 20,
        "OwnerID": 1,
        "Title": "Lunch with Monica",
        "Description": "Discuss the Employee handbook",
        "StartTimezone": null,
        "Start": "2013-06-27T12:00:00.000Z",
        "End": "2013-06-27T13:30:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 21,
        "OwnerID": 1,
        "Title": "Job Interview - John Stewart",
        "Description": "Accountant",
        "StartTimezone": null,
        "Start": "2013-06-27T14:00:00.000Z",
        "End": "2013-06-27T15:00:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 22,
        "OwnerID": 1,
        "Title": "Job Interview - Mary Smith",
        "Description": "Accountant",
        "StartTimezone": null,
        "Start": "2013-06-27T15:30:00.000Z",
        "End": "2013-06-27T16:30:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 24,
        "OwnerID": 3,
        "Title": "Register new Access Cards",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-24T12:00:00.000Z",
        "End": "2013-06-24T12:30:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 25,
        "OwnerID": 1,
        "Title": "HR Lecture",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-04T19:00:00.000Z",
        "End": "2013-06-04T21:00:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 26,
        "OwnerID": 1,
        "Title": "Dentist",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-28T08:00:00.000Z",
        "End": "2013-06-28T09:00:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 27,
        "OwnerID": 1,
        "Title": "Job Interview - Laura Bailey",
        "Description": "Helpdesk",
        "StartTimezone": null,
        "Start": "2013-06-28T09:30:00.000Z",
        "End": "2013-06-28T10:30:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 28,
        "OwnerID": 1,
        "Title": "Job Interview - Jenny Baxter",
        "Description": "Helpdesk",
        "StartTimezone": null,
        "Start": "2013-06-28T11:00:00.000Z",
        "End": "2013-06-28T12:00:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 31,
        "OwnerID": 1,
        "Title": "Team building prep tasks",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-28T14:00:00.000Z",
        "End": "2013-06-28T17:00:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 32,
        "OwnerID": 1,
        "Title": "Job Interview - Bernard Atkins",
        "Description": "Helpdesk",
        "StartTimezone": null,
        "Start": "2013-06-24T13:30:00.000Z",
        "End": "2013-06-24T14:30:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 34,
        "OwnerID": 1,
        "Title": "Review Job Applications",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-24T15:00:00.000Z",
        "End": "2013-06-24T17:30:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 35,
        "OwnerID": 1,
        "Title": "Grand Canyon tour",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-23T00:00:00.000Z",
        "End": "2013-06-23T00:00:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": true
    },
    {
        "TaskID": 40,
        "OwnerID": 3,
        "Title": "Install new laptops in conference rooms",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-24T13:30:00.000Z",
        "End": "2013-06-24T18:00:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 66,
        "OwnerID": 3,
        "Title": "Bob's Birthday",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-29T08:00:00.000Z",
        "End": "2013-06-29T06:00:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": true
    },
    {
        "TaskID": 68,
        "OwnerID": 1,
        "RoomID": 2,
        "Title": "Breakfast with Tom",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-24T08:30:00.000Z",
        "End": "2013-06-24T09:00:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 69,
        "OwnerID": 2,
        "Title": "Team planning meeting",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-24T10:00:00.000Z",
        "End": "2013-06-24T12:00:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 70,
        "OwnerID": 2,
        "Title": "Support Phone Call",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-24T16:00:00.000Z",
        "End": "2013-06-24T16:30:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 71,
        "OwnerID": 2,
        "Title": "Business breakfast with Caroline",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-25T09:00:00.000Z",
        "End": "2013-06-25T10:00:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 72,
        "OwnerID": 2,
        "Title": "Discuss preojects' deadlines",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-25T11:00:00.000Z",
        "End": "2013-06-25T11:30:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 73,
        "OwnerID": 2,
        "Title": "Support Meeting",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-25T15:00:00.000Z",
        "End": "2013-06-25T16:00:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 74,
        "OwnerID": 2,
        "Title": "Dine with Mathew",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-25T18:30:00.000Z",
        "End": "2013-06-25T20:00:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 79,
        "OwnerID": 2,
        "Title": "Banking",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-26T09:00:00.000Z",
        "End": "2013-06-26T10:00:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 80,
        "OwnerID": 3,
        "Title": "Software updates",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-25T10:00:00.000Z",
        "End": "2013-06-25T12:00:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 81,
        "OwnerID": 3,
        "Title": "UPS maintenance",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-25T16:30:00.000Z",
        "End": "2013-06-25T18:00:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 82,
        "OwnerID": 2,
        "Title": "Support Call",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-26T11:30:00.000Z",
        "End": "2013-06-26T12:00:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 83,
        "OwnerID": 3,
        "Title": "Phone Sync with NY office ",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-26T13:30:00.000Z",
        "End": "2013-06-26T14:30:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 84,
        "OwnerID": 3,
        "Title": "Phone Sync with Boston Office",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-26T15:00:00.000Z",
        "End": "2013-06-26T16:00:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 85,
        "OwnerID": 3,
        "Title": "Server maintenance",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-26T18:30:00.000Z",
        "End": "2013-06-26T21:30:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 86,
        "OwnerID": 2,
        "Title": "Status meeting",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-28T13:30:00.000Z",
        "End": "2013-06-28T15:30:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 87,
        "OwnerID": 3,
        "Title": "Helpdesk status meeting",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-27T10:30:00.000Z",
        "End": "2013-06-27T11:30:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 88,
        "OwnerID": 2,
        "Title": "Business Lunch",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-27T12:00:00.000Z",
        "End": "2013-06-27T13:00:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 89,
        "OwnerID": 3,
        "Title": "Employee database update",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-27T14:00:00.000Z",
        "End": "2013-06-27T15:30:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 90,
        "OwnerID": 3,
        "Title": "Website upload",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-27T07:30:00.000Z",
        "End": "2013-06-27T08:30:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 91,
        "OwnerID": 2,
        "Title": "Meeting with marketing guys",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-27T17:00:00.000Z",
        "End": "2013-06-27T18:30:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 92,
        "OwnerID": 3,
        "Title": "Meeting with Internet provider",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-28T10:30:00.000Z",
        "End": "2013-06-28T11:30:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 93,
        "OwnerID": 3,
        "Title": "Bob's Birthday Party",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-29T20:00:00.000Z",
        "End": "2013-06-29T23:30:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": null,
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 95,
        "OwnerID": 2,
        "Title": "Dance Practice",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-03T18:30:00.000Z",
        "End": "2013-06-03T20:00:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 114,
        "OwnerID": 3,
        "Title": "Software updates",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-04T09:00:00.000Z",
        "End": "2013-06-04T12:00:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": "",
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 115,
        "OwnerID": 1,
        "Title": "Breakfast at Starbucks",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-04T08:00:00.000Z",
        "End": "2013-06-04T09:30:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": "",
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 116,
        "OwnerID": 2,
        "Title": "Performance review",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-04T14:00:00.000Z",
        "End": "2013-06-04T17:00:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": "",
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 118,
        "OwnerID": 1,
        "Title": "HR seminar preparation",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-05T10:00:00.000Z",
        "End": "2013-06-05T12:00:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": "",
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 119,
        "OwnerID": 3,
        "Title": "Helpdesk weekly meeting",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-05T15:00:00.000Z",
        "End": "2013-06-05T16:00:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    },
    {
        "TaskID": 120,
        "OwnerID": 3,
        "Title": "Website upload",
        "Description": "",
        "StartTimezone": null,
        "Start": "2013-06-07T07:00:00.000Z",
        "End": "2013-06-07T08:30:00.000Z",
        "EndTimezone": null,
        "RecurrenceRule": "",
        "RecurrenceID": null,
        "RecurrenceException": null,
        "IsAllDay": false
    }
];

const currentYear = new Date().getFullYear();
const parseAdjust = (eventDate: string): Date => {
    const date = new Date(eventDate);
    date.setFullYear(currentYear);
    return date;
};

const randomInt = (min, max): number => {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

export const displayDate = new Date(currentYear, 5, 24);

export const sampleData = baseData.map(dataItem => (
    <SchedulerEvent> {
        id: dataItem.TaskID,
        start: parseAdjust(dataItem.Start),
        startTimezone: dataItem.startTimezone,
        end: parseAdjust(dataItem.End),
        endTimezone: dataItem.endTimezone,
        isAllDay: dataItem.IsAllDay,
        title: dataItem.Title,
        description: dataItem.Description,
        recurrenceRule: dataItem.RecurrenceRule,
        recurrenceId: dataItem.RecurrenceID,
        recurrenceException: dataItem.RecurrenceException,

        roomId: dataItem.RoomID,
        ownerID: dataItem.OwnerID
    }
));

export const sampleDataWithResources = baseData.map(dataItem => (
    <SchedulerEvent> {
        id: dataItem.TaskID,
        start: parseAdjust(dataItem.Start),
        startTimezone: dataItem.startTimezone,
        end: parseAdjust(dataItem.End),
        endTimezone: dataItem.endTimezone,
        isAllDay: dataItem.IsAllDay,
        title: dataItem.Title,
        description: dataItem.Description,
        recurrenceRule: dataItem.RecurrenceRule,
        recurrenceId: dataItem.RecurrenceID,
        recurrenceException: dataItem.RecurrenceException,
        roomId: randomInt(1, 2),
        attendees: [randomInt(1, 3)]
    }
));

export const sampleDataWithCustomSchema = baseData.map(dataItem => (
    {
        ...dataItem,
        Start: parseAdjust(dataItem.Start),
        End: parseAdjust(dataItem.End)
    }
));

Installation

Either use the quick setup (Angular CLI v6 or later) or manually add the package (Angular CLI v5 or earlier).

The Scheduler requires @progress/kendo-theme-(default|bootstrap|material) v2.59.x or greater.

Quick Setup with Angular CLI v6 or Later

Angular CLI v6 supports the addition of packages through the ng add command which executes in one step the set of otherwise individually needed commands.

ng add @progress/kendo-angular-scheduler

Manual Setup

  1. Download and install the package.

    npm install --save @progress/kendo-angular-scheduler @progress/kendo-angular-common @progress/kendo-angular-buttons @progress/kendo-angular-dateinputs @progress/kendo-angular-dropdowns @progress/kendo-angular-inputs @progress/kendo-angular-intl @progress/kendo-angular-l10n @progress/kendo-angular-popup @progress/kendo-data-query @progress/kendo-date-math @progress/kendo-drawing @progress/kendo-recurrence

  2. Once installed, import the SchedulerModule in your application root or feature module.

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { SchedulerModule } from '@progress/kendo-angular-scheduler';
import { AppComponent } from './app.component';

@NgModule({
   bootstrap: [ AppComponent ],
   declarations: [ AppComponent ],
   imports: [
       BrowserModule,
       BrowserAnimationsModule,
       SchedulerModule
   ]
})
export class AppModule {
}

  3. You are required to install one of the Kendo UI themes for Angular to style your components. For more information on how to add the styles, refer to the section on styling.

  4. For Angular 9.x and later, install the @angular/localize package:

    1. Run npm install --save @angular/localize.
    2. Add import '@angular/localize/init'; to your src/polyfills.ts file.

Dependencies

The Scheduler package requires the following peer dependencies that have to be installed by your application:

  • @angular/common
  • @angular/core
  • @angular/forms
  • @angular/animations
  • @progress/kendo-angular-common
  • @progress/kendo-angular-buttons
  • @progress/kendo-angular-dateinputs
  • @progress/kendo-angular-dropdowns
  • @progress/kendo-angular-inputs
  • @progress/kendo-angular-intl
  • @progress/kendo-angular-l10n
  • @progress/kendo-angular-popup
  • @progress/kendo-data-query
  • @progress/kendo-date-math
  • @progress/kendo-drawing
  • @progress/kendo-recurrence

The Scheduler package utilizes the Angular animation system, which supports a specific set of browsers.

Functionality and Features

In this article