Built-In Directives

The Scheduler provides built-in, reactive directives for automating and simplifying the implementation of its editing operations in Angular reactive forms.

Support for editing in Angular template-driven forms is planned for future releases.

Setup

The kendoSchedulerReactiveEditing directive handles the necessary Scheduler events and enables you to skip the boilerplate code which is required to set up the Scheduler for editing with Angular reactive forms. The directive requires a createFormGroup input—you have to set the input to a function which creates a FormGroup for the event model or, when the user adds a new event, for the new model.

The following example demonstrates how to use the kendoSchedulerReactiveEditing directive.

import { Component } from '@angular/core';
import { SchedulerEvent, CreateFormGroupArgs } from '@progress/kendo-angular-scheduler';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

import '@progress/kendo-date-math/tz/regions/Europe';
import '@progress/kendo-date-math/tz/regions/NorthAmerica';

@Component({
    selector: 'my-app',
    template: `
        <kendo-scheduler
            [kendoSchedulerBinding]="events"
            [kendoSchedulerReactiveEditing]="createFormGroup"
            [selectedDate]="selectedDate"
            style="height: 600px;"
        >
            <kendo-scheduler-week-view startTime="07:00">
            </kendo-scheduler-week-view>
        </kendo-scheduler>
    `
})
export class AppComponent {
    public selectedDate: Date = new Date('2018-10-22T00:00:00');
    public formGroup: FormGroup;
    public events: SchedulerEvent[] = [{
        id: 1,
        title: 'Breakfast',
        start: new Date('2018-10-22T09:00:00'),
        end: new Date('2018-10-22T09:30:00'),
        recurrenceRule: 'FREQ=DAILY;COUNT=5;'
    }];

    constructor(private formBuilder: FormBuilder) {
        this.createFormGroup = this.createFormGroup.bind(this);
    }

    public createFormGroup(args: CreateFormGroupArgs): FormGroup {
        const dataItem = args.dataItem;

        this.formGroup = this.formBuilder.group({
            'id': args.isNew ? this.getNextId() : dataItem.id,
            'start': [dataItem.start, Validators.required],
            'end': [dataItem.end, Validators.required],
            'startTimezone': [dataItem.startTimezone],
            'endTimezone': [dataItem.endTimezone],
            'isAllDay': dataItem.isAllDay,
            'title': dataItem.title,
            'description': dataItem.description,
            'recurrenceRule': dataItem.recurrenceRule,
            'recurrenceId': dataItem.recurrenceId
        });

        return this.formGroup;
    }

    public getNextId(): number {
        const len = this.events.length;

        return (len === 0) ? 1 : this.events[this.events.length - 1].id + 1;
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ReactiveFormsModule } from '@angular/forms';
import { SchedulerModule } from '@progress/kendo-angular-scheduler';

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

@NgModule({
  imports:      [ BrowserModule, BrowserAnimationsModule, ReactiveFormsModule, 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)
    }
));

Editing of Resources

The kendoSchedulerReactiveEditing directive handles the editing of Scheduler resources. The corresponding values of the resources have to be part of the FormGroup that is returned by the createFormGroup input.

The following example demonstrates how to use the kendoSchedulerReactiveEditing directive to edit resources.

import { Component } from '@angular/core';
import { SchedulerEvent, CreateFormGroupArgs } from '@progress/kendo-angular-scheduler';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { sampleDataWithResources, displayDate } from './events-utc';

import '@progress/kendo-date-math/tz/regions/Europe';
import '@progress/kendo-date-math/tz/regions/NorthAmerica';

@Component({
    selector: 'my-app',
    template: `
        <kendo-scheduler
            [kendoSchedulerBinding]="events"
            [kendoSchedulerReactiveEditing]="createFormGroup"
            [selectedDate]="selectedDate"
            [resources]="resources"
            [group]="group"
            style="height: 600px;"
        >
            <kendo-scheduler-week-view startTime="07:00">
            </kendo-scheduler-week-view>
        </kendo-scheduler>
    `
})
export class AppComponent {
    public selectedDate: Date = displayDate;
    public events: SchedulerEvent[] = sampleDataWithResources;
    public formGroup: FormGroup;

    public group: any = {
        resources: ['Rooms'],
        orientation: 'horizontal'
    };

    public resources: any[] = [{
        name: 'Rooms',
        data: [
            { text: 'Meeting Room 101', value: 1, color: '#6eb3fa' },
            { text: 'Meeting Room 201', value: 2, color: '#f58a8a' }
        ],
        field: 'roomId',
        valueField: 'value',
        textField: 'text',
        colorField: 'color'
    }, {
        name: 'Attendees',
        data: [
            { text: 'Alex', value: 1, color: '#f8a398' },
            { text: 'Bob', value: 2, color: '#51a0ed' },
            { text: 'Charlie', value: 3, color: '#56ca85' }
        ],
        multiple: true,
        field: 'attendees',
        valueField: 'value',
        textField: 'text',
        colorField: 'color'
    }];

    constructor(private formBuilder: FormBuilder) {
        this.createFormGroup = this.createFormGroup.bind(this);
    }

    public createFormGroup(args: CreateFormGroupArgs): FormGroup {
        const dataItem = args.dataItem;

        this.formGroup = this.formBuilder.group({
            'id': args.isNew ? this.getNextId() : dataItem.id,
            'start': [dataItem.start, Validators.required],
            'end': [dataItem.end, Validators.required],
            'startTimezone': [dataItem.startTimezone],
            'endTimezone': [dataItem.endTimezone],
            'isAllDay': dataItem.isAllDay,
            'title': dataItem.title,
            'description': dataItem.description,
            'recurrenceRule': dataItem.recurrenceRule,
            'recurrenceId': dataItem.recurrenceId,
            'roomId': dataItem.roomId,
            'attendees': [ dataItem.attendees ]
        });

        return this.formGroup;
    }

    public getNextId(): number {
        const len = this.events.length;

        return (len === 0) ? 1 : this.events[this.events.length - 1].id + 1;
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ReactiveFormsModule } from '@angular/forms';
import { SchedulerModule } from '@progress/kendo-angular-scheduler';

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

@NgModule({
  imports:      [ BrowserModule, BrowserAnimationsModule, ReactiveFormsModule, 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)
    }
));

Custom Service

By default, the built-in editing directives modify the data that is passed to the Scheduler in memory. You can customize this behavior by implementing a custom service through the editService input. The custom service handles the data operations which are defined by the EditService interface.

Custom services typically persist data by using a table-based API such as OData. To cut on the repetitive code, especially in regards to editing recurring events, services may inherit from the BaseEditService base class.

The following example demonstrates how to implement a custom service by using the base class.

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { CreateFormGroupArgs } from '@progress/kendo-angular-scheduler';

import '@progress/kendo-date-math/tz/regions/Europe';
import '@progress/kendo-date-math/tz/regions/NorthAmerica';

import { EditService } from './edit.service';

@Component({
    selector: 'my-app',
    template: `
        <kendo-scheduler
            [kendoSchedulerBinding]="editService.events | async"
            [kendoSchedulerReactiveEditing]="createFormGroup"
            [editService]="editService"
            [modelFields]="editService.fields"
            [loading]="editService.loading"
            [selectedDate]="selectedDate"
            style="height: 600px;"
        >
            <kendo-scheduler-week-view startTime="07:00">
            </kendo-scheduler-week-view>
        </kendo-scheduler>
    `
})
export class AppComponent implements OnInit {
    public formGroup: FormGroup;
    public selectedDate: Date = new Date('2013-06-10T00:00:00');

    constructor(
        private formBuilder: FormBuilder,
        public editService: EditService
    ) {}

    public ngOnInit(): void {
        this.editService.read();
    }

    // Note the use of a lambda function in order to bind `this`
    public createFormGroup = (args: CreateFormGroupArgs): FormGroup => {
        const dataItem = args.dataItem;

        this.formGroup = this.formBuilder.group({
            'TaskID': args.isNew ? 0 : dataItem.TaskID,
            'Start': [dataItem.Start, Validators.required],
            'End': [dataItem.End, Validators.required],
            'StartTimezone': [dataItem.StartTimezone],
            'EndTimezone': [dataItem.EndTimezone],
            'IsAllDay': dataItem.IsAllDay,
            'Title': dataItem.Title,
            'Description': dataItem.Description,
            'RecurrenceRule': dataItem.RecurrenceRule,
            'RecurrenceID': dataItem.RecurrenceID
        });

        return this.formGroup;
    }
}
import { HttpClientJsonpModule, HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
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';
import { EditService } from './edit.service';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ReactiveFormsModule,
        SchedulerModule,
        HttpClientModule,
        HttpClientJsonpModule
    ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ],
    providers: [ EditService ]
})

export class AppModule { }

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Observable, zip } from 'rxjs';
import { map, tap } from 'rxjs/operators';

import { BaseEditService, SchedulerModelFields } from '@progress/kendo-angular-scheduler';
import { parseDate } from '@progress/kendo-angular-intl';

import { MyEvent } from './my-event.interface';

const CREATE_ACTION = 'create';
const UPDATE_ACTION = 'update';
const REMOVE_ACTION = 'destroy';

const fields: SchedulerModelFields = {
    id: 'TaskID',
    title: 'Title',
    description: 'Description',
    startTimezone: 'StartTimezone',
    start: 'Start',
    end: 'End',
    endTimezone: 'EndTimezone',
    isAllDay: 'IsAllDay',
    recurrenceRule: 'RecurrenceRule',
    recurrenceId: 'RecurrenceID',
    recurrenceExceptions: 'RecurrenceException'
};

@Injectable()
export class EditService extends BaseEditService<MyEvent> {
    public loading = false;

    constructor(private http: HttpClient) {
        super(fields);
    }

    public read(): void {
        if (this.data.length) {
            this.source.next(this.data);
            return;
        }

        this.fetch().subscribe(data => {
            this.data = data.map(item => this.readEvent(item));
            this.source.next(this.data);
        });
    }

    protected save(created: MyEvent[], updated: MyEvent[], deleted: MyEvent[]): void {
        const completed = [];
        if (deleted.length) {
            completed.push(this.fetch(REMOVE_ACTION, deleted));
        }

        if (updated.length) {
            completed.push(this.fetch(UPDATE_ACTION, updated));
        }

        if (created.length) {
            completed.push(this.fetch(CREATE_ACTION, created));
        }

        zip(...completed).subscribe(() => this.read());
    }

    protected fetch(action: string = '', data?: any): Observable<any[]> {
        this.loading = true;

        return this.http
            .jsonp(`https://demos.telerik.com/kendo-ui/service/tasks/${action}?${this.serializeModels(data)}`, 'callback')
            .pipe(
                map(res => <any[]>res),
                tap(() => this.loading = false)
            );
    }

    private readEvent(item: any): MyEvent {
        return {
            ...item,
            Start: parseDate(item.Start),
            End: parseDate(item.End),
            RecurrenceException: this.parseExceptions(item.RecurrenceException)
        };
    }

    private serializeModels(events: MyEvent[]): string {
        if (!events) {
            return '';
        }

        const data = events.map(event => ({
             ...event,
             RecurrenceException:
                this.serializeExceptions(event.RecurrenceException)
        }));

        return `&models=${JSON.stringify(data)}`;
    }
}

export interface MyEvent {
    TaskID?: number;
    OwnerID?: number;
    Title?: string;
    Description?: string;
    Start?: Date;
    End?: Date;
    StartTimezone?: string;
    EndTimezone?: string;
    IsAllDay?: boolean;
    RecurrenceException?: any;
    RecurrenceID?: number;
    RecurrenceRule?: string;
}
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

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

In this article