Angular
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Resources and Grouping in Angular Schedule component

13 May 2021 / 30 minutes to read

Resources and grouping support allows the Scheduler to be shared by multiple resources. Also, the appointments of each resources are displayed under relevant resources. Each resource in the Scheduler is arranged in a column/row wise order, with individual spacing to display all its respective appointments on a single page. It also supports the multiple levels of grouping of resources, thus enabling the categorization of resources in a hierarchical structure and shows it either in expandable groups (Timeline views) or else vertical hierarchy one after the other (Calendar views).

It is also possible to assign one or more resources to the same appointment, by allowing multiple selection of resource options available in the event editor window.

The HTML5 JavaScript Scheduler groups the resources based on different criteria. It includes grouping appointments based on resources, grouping resources based on dates, and timeline scheduling. Also, the data for resources bind with Scheduler either as a local JSON collection or URL, retrieving data from remote data services.

Learn how to add appointments of multiple resources to the Angular Scheduler from this video:

Resource fields

The default options available within the resources collection are as follows,

Field name Type Description
field String A value that binds to the resource field of event object.
title String It holds the title of the resource field to be displayed on the event editor window.
name String A unique resource name used for differentiating various resource objects while grouping.
allowMultiple Boolean When set to true, allows multiple selection of resource names, thus creating multiple instances of same appointment for the selected resources.
dataSource Object Assigns the resource dataSource, where data can be passed either as an array of JavaScript objects, or else can create an instance of DataManager in case of processing remote data and can be assigned to the dataSource property. With the remote data assigned to dataSource, check the available adaptors to customize the data processing.
query Query Defines the external query that will be executed along with the data processing.
idField String Binds the resource ID field name from the resources dataSource.
textField String Binds the text field name from the resources dataSource. It usually holds the resource names.
groupIDField String Binds the group ID field name from the resource dataSource. It usually holds the value of resource IDs of parent level resources.
colorField String Binds the color field name from the resource dataSource. The color value mapped in this field will be applied to the events of resources.
startHourField String Binds the start hour field name from the resource dataSource. It allows to provide different work start hour for the resources.
endHourField String Binds the end hour field name from the resource dataSource. It allows to provide different work end hour for the resources.
workDaysField String Binds the work days field name from the resources dataSource. It allows to provide different working days collection for the resources.
cssClassField String Binds the custom CSS class field name from the resources dataSource. It maps the CSS class written for the specific resources and applies it to the events of those resources.

Resource data binding

The data for resources can bind with Scheduler either as a local JSON collection or a service URL, retrieving resource data from remote data services.

Using local JSON data

The following code example depicts how to bind the local JSON data to the dataSource of resources collection.

Copied to clipboard
import { Component } from '@angular/core';
import {
    WeekService, MonthService, AgendaService, TimelineViewsService, TimelineMonthService, EventSettingsModel
} from '@syncfusion/ej2-angular-schedule';
import { resourceData } from './datasource.ts';

@Component({
    selector: "app-root",
    providers: [WeekService, MonthService, AgendaService, TimelineViewsService, TimelineMonthService],
    // specifies the template string for the Schedule component
    template: `
    <ejs-schedule width="100%" height="550px" [selectedDate]="selectedDate" [views]="views"
      [eventSettings]="eventSettings">
      <e-resources>
        <e-resource field="OwnerId" title="Owner" name="Owners"
          [dataSource]="ownerDataSource" [allowMultiple]="allowMultipleOwner"
          textField="OwnerText" idField="Id" colorField="OwnerColor">
        </e-resource>
      </e-resources>
    </ejs-schedule>`
})
export class AppComponent {
    public selectedDate: Date = new Date(2018, 3, 1);
    public views: Array<string> = ['Week', 'Month', 'TimelineWeek', 'TimelineMonth', 'Agenda'];
    public eventSettings: EventSettingsModel = {
        dataSource: resourceData
    };
    public allowMultipleOwner: Boolean = true;
    public ownerDataSource: Object[] = [
        { OwnerText: 'Nancy', Id: 1, OwnerColor: '#ffaa00' },
        { OwnerText: 'Steven', Id: 2, OwnerColor: '#f8a398' },
        { OwnerText: 'Michael', Id: 3, OwnerColor: '#7499e1' }
    ];
}

Using remote service URL

The following code example depicts how to bind the remote data for resources dataSource.

Copied to clipboard
import { Component } from '@angular/core';
import {
    WeekService, MonthService, AgendaService, TimelineViewsService, TimelineMonthService, EventSettingsModel
} from '@syncfusion/ej2-angular-schedule';
import { resourceData } from './datasource.ts';
import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data';

@Component({
    selector: "app-root",
    providers: [WeekService, MonthService, AgendaService, TimelineViewsService, TimelineMonthService],
    // specifies the template string for the Schedule component
    template: `
    <ejs-schedule width="100%" height="550px" [selectedDate]="selectedDate" [views]="views"
      [eventSettings]="eventSettings">
      <e-resources>
        <e-resource field="OwnerId" title="Owner" name="Owners"
          [dataSource]="resourceDataManager" [allowMultiple]="allowMultipleOwner"
          textField="OwnerText" idField="Id" colorField="OwnerColor">
        </e-resource>
      </e-resources>
    </ejs-schedule>`
})
export class AppComponent {
    public selectedDate: Date = new Date(2018, 3, 1);
    public views: Array<string> = ['Week', 'Month', 'TimelineWeek', 'TimelineMonth', 'Agenda'];
    public resourceDataManager: DataManager = new DataManager({
        url: 'Home/GetResourceData',
        adaptor: new UrlAdaptor,
        crossDomain: true
    });
    public eventSettings: EventSettingsModel = {
        dataSource: resourceData
    };
    public allowMultipleOwner: Boolean = true;
}

Scheduler with multiple resources

It is possible to display the Scheduler in default mode without visually showcasing all the resources in it, but allowing to assign the required resources to the appointments through the event editor resource options.

The appointments belonging to the different resources will be displayed altogether on the default Scheduler, which will be differentiated based on the resource color assigned in the resources (depicting to which resource that particular appointment belongs) collection.

Example: To display default Scheduler with multiple resource options in the event editor, ignore the group option and simply define the resources property with all its internal options.

Source
Preview
app.component.ts
app.module.ts
datasource.ts
main.ts
Copied to clipboard
import { Component } from '@angular/core';
import {
    WeekService, MonthService, AgendaService, TimelineViewsService, TimelineMonthService, EventSettingsModel
} from '@syncfusion/ej2-angular-schedule';
import { resourceData } from './datasource.ts';

@Component({
    selector: "app-root",
    providers: [WeekService, MonthService, AgendaService, TimelineViewsService, TimelineMonthService],
    // specifies the template string for the Schedule component
    template: `
    <ejs-schedule width="100%" height="550px" [selectedDate]="selectedDate" [views]="views"
      [eventSettings]="eventSettings">
      <e-resources>
        <e-resource field="OwnerId" title="Owner" name="Owners"
          [dataSource]="ownerDataSource" [allowMultiple]="allowMultipleOwner"
          textField="OwnerText" idField="Id" colorField="OwnerColor">
        </e-resource>
      </e-resources>
    </ejs-schedule>`
})
export class AppComponent {
    public selectedDate: Date = new Date(2018, 3, 1);
    public views: Array<string> = ['Week', 'Month', 'TimelineWeek', 'TimelineMonth', 'Agenda'];
    public eventSettings: EventSettingsModel = {
        dataSource: resourceData
    };
    public allowMultipleOwner: Boolean = true;
    public ownerDataSource: Object[] = [
        { OwnerText: 'Nancy', Id: 1, OwnerColor: '#ffaa00' },
        { OwnerText: 'Steven', Id: 2, OwnerColor: '#f8a398' },
        { OwnerText: 'Michael', Id: 3, OwnerColor: '#7499e1' }
    ];
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ScheduleModule } from '@syncfusion/ej2-angular-schedule';
import { RadioButtonModule } from '@syncfusion/ej2-angular-buttons';
import { DayService, WeekService, WorkWeekService, MonthService, AgendaService, MonthAgendaService} from '@syncfusion/ej2-angular-schedule';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        ScheduleModule,
        RadioButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [DayService, 
                WeekService, 
                WorkWeekService, 
                MonthService,
                AgendaService,
                MonthAgendaService]
})
export class AppModule { }
Copied to clipboard
/**
 * Schedule datasource spec
 */

export let eventData: Object[] = [
    {
        Id: 1,
        Subject: 'Surgery - Andrew',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 12, 9, 0),
        EndTime: new Date(2018, 1, 12, 10, 0),
        OwnerId: 3
    }, {
        Id: 2,
        Subject: 'Consulting - John',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 12, 10, 0),
        EndTime: new Date(2018, 1, 12, 11, 30),
        OwnerId: 3
    }, {
        Id: 3,
        Subject: 'Therapy - Robert',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 12, 11, 30),
        EndTime: new Date(2018, 1, 12, 12, 30),
        OwnerId: 1
    }, {
        Id: 4,
        Subject: 'Observation - Steven',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 12, 12, 30),
        EndTime: new Date(2018, 1, 12, 13, 30),
        OwnerId: 1
    }, {
        Id: 5,
        Subject: 'Extraction - Nancy',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 12, 13, 30),
        EndTime: new Date(2018, 1, 12, 15, 0),
        OwnerId: 2
    }, {
        Id: 6,
        Subject: 'Surgery - Paul',
        EventType: 'New',
        StartTime: new Date(2018, 1, 13, 9, 0),
        EndTime: new Date(2018, 1, 13, 10, 0),
        OwnerId: 3
    }, {
        Id: 7,
        Subject: 'Extraction - Josephs',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 13, 10, 0),
        EndTime: new Date(2018, 1, 13, 11, 0),
        OwnerId: 3
    }, {
        Id: 8,
        Subject: 'Consulting - Mario',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 13, 11, 0),
        EndTime: new Date(2018, 1, 13, 12, 0),
        OwnerId: 2
    }, {
        Id: 9,
        Subject: 'Therapy - Saveley',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 13, 12, 0),
        EndTime: new Date(2018, 1, 13, 13, 30),
        OwnerId: 2
    }, {
        Id: 10,
        Subject: 'Observation - Cartrain',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 13, 13, 30),
        EndTime: new Date(2018, 1, 13, 15, 30),
        OwnerId: 2
    }, {
        Id: 11,
        Subject: 'Consulting - Yang',
        EventType: 'New',
        StartTime: new Date(2018, 1, 14, 9, 0),
        EndTime: new Date(2018, 1, 14, 10, 0),
        OwnerId: 1
    }, {
        Id: 12,
        Subject: 'Observation - Michael',
        EventType: 'New',
        StartTime: new Date(2018, 1, 14, 10, 0),
        EndTime: new Date(2018, 1, 14, 11, 30),
        OwnerId: 1
    }, {
        Id: 13,
        Subject: 'Surgery - Roland',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 14, 11, 30),
        EndTime: new Date(2018, 1, 14, 12, 30),
        OwnerId: 1
    }, {
        Id: 14,
        Subject: 'Extraction - Francisco',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 14, 12, 30),
        EndTime: new Date(2018, 1, 14, 13, 30),
        OwnerId: 2
    }, {
        Id: 15,
        Subject: 'Therapy - Henriette',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 14, 13, 30),
        EndTime: new Date(2018, 1, 14, 15, 0),
        OwnerId: 3
    }, {
        Id: 16,
        Subject: 'Observation - Bernardo',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 15, 9, 0),
        EndTime: new Date(2018, 1, 15, 10, 0),
        OwnerId: 1
    }, {
        Id: 17,
        Subject: 'Therapy - Wilson',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 15, 10, 0),
        EndTime: new Date(2018, 1, 15, 11, 0),
        OwnerId: 2
    }, {
        Id: 18,
        Subject: 'Consulting - Horst',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 15, 11, 0),
        EndTime: new Date(2018, 1, 15, 12, 0),
        OwnerId: 3
    }, {
        Id: 19,
        Subject: 'Surgery - Limeira',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 15, 12, 0),
        EndTime: new Date(2018, 1, 15, 13, 30),
        OwnerId: 3
    }, {
        Id: 20,
        Subject: 'Observation - Victoria',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 15, 13, 30),
        EndTime: new Date(2018, 1, 15, 15, 30),
        OwnerId: 1
    }, {
        Id: 21,
        Subject: 'Extraction - Afonso',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 16, 9, 0),
        EndTime: new Date(2018, 1, 16, 10, 0),
        OwnerId: 2
    }, {
        Id: 22,
        Subject: 'Extraction - Paula',
        EventType: 'New',
        StartTime: new Date(2018, 1, 16, 10, 0),
        EndTime: new Date(2018, 1, 16, 11, 0),
        OwnerId: 3
    }, {
        Id: 23,
        Subject: 'Observation - George',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 16, 11, 0),
        EndTime: new Date(2018, 1, 16, 12, 0),
        OwnerId: 2
    }, {
        Id: 24,
        Subject: 'Therapy - Smith',
        EventType: 'New',
        StartTime: new Date(2018, 1, 16, 12, 0),
        EndTime: new Date(2018, 1, 16, 13, 30),
        OwnerId: 1
    }, {
        Id: 25,
        Subject: 'Surgery - Jennifer',
        EventType: 'New',
        StartTime: new Date(2018, 1, 16, 13, 30),
        EndTime: new Date(2018, 1, 16, 15, 30),
        OwnerId: 1
    }
];

export let resourceData: Object[] = [
    {
        Id: 1,
        Subject: 'Workflow Analysis',
        StartTime: new Date(2018, 3, 1, 9, 30),
        EndTime: new Date(2018, 3, 1, 12, 0),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 2,
        Subject: 'Requirement planning',
        StartTime: new Date(2018, 3, 1, 12, 30),
        EndTime: new Date(2018, 3, 1, 14, 45),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 3,
        Subject: 'Quality Analysis',
        StartTime: new Date(2018, 3, 2, 10, 0),
        EndTime: new Date(2018, 3, 2, 12, 30),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 4,
        Subject: 'Resource planning',
        StartTime: new Date(2018, 3, 2, 13, 0),
        EndTime: new Date(2018, 3, 2, 15, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 5,
        Subject: 'Timeline estimation',
        StartTime: new Date(2018, 3, 3, 9, 0),
        EndTime: new Date(2018, 3, 3, 11, 30),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 6,
        Subject: 'Developers Meeting',
        StartTime: new Date(2018, 3, 3, 14, 0),
        EndTime: new Date(2018, 3, 3, 16, 45),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 7,
        Subject: 'Project Review',
        StartTime: new Date(2018, 3, 4, 11, 15),
        EndTime: new Date(2018, 3, 4, 13, 30),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 8,
        Subject: 'Manual testing',
        StartTime: new Date(2018, 3, 4, 9, 15),
        EndTime: new Date(2018, 3, 4, 11, 45),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 9,
        Subject: 'Project Preview',
        StartTime: new Date(2018, 3, 5, 9, 30),
        EndTime: new Date(2018, 3, 5, 12, 45),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 10,
        Subject: 'Cross-browser testing',
        StartTime: new Date(2018, 3, 5, 13, 45),
        EndTime: new Date(2018, 3, 5, 16, 30),
        IsAllDay: false,
        OwnerId: 2
    }, {
        Id: 11,
        Subject: 'Bug Automation',
        StartTime: new Date(2018, 3, 6, 10, 0),
        EndTime: new Date(2018, 3, 6, 12, 15),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 12,
        Subject: 'Functionality testing',
        StartTime: new Date(2018, 3, 6, 9, 0),
        EndTime: new Date(2018, 3, 6, 11, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 13,
        Subject: 'Resolution-based testing',
        StartTime: new Date(2018, 3, 7, 13, 0),
        EndTime: new Date(2018, 3, 7, 15, 15),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 14,
        Subject: 'Test report Validation',
        StartTime: new Date(2018, 3, 7, 9),
        EndTime: new Date(2018, 3, 7, 11),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 15,
        Subject: 'Test case correction',
        StartTime: new Date(2018, 3, 8, 9, 45),
        EndTime: new Date(2018, 3, 8, 11, 30),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 16,
        Subject: 'Run test cases',
        StartTime: new Date(2018, 3, 8, 10, 30),
        EndTime: new Date(2018, 3, 8, 13, 0),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 17,
        Subject: 'Quality Analysis',
        StartTime: new Date(2018, 3, 9, 12),
        EndTime: new Date(2018, 3, 9, 15, 30),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 18,
        Subject: 'Debugging',
        StartTime: new Date(2018, 3, 9, 9, 0),
        EndTime: new Date(2018, 3, 9, 11, 15),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 19,
        Subject: 'Exception handling',
        StartTime: new Date(2018, 3, 10, 10, 10),
        EndTime: new Date(2018, 3, 10, 13, 30),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 20,
        Subject: 'Decoding',
        StartTime: new Date(2018, 3, 10, 10, 30),
        EndTime: new Date(2018, 3, 10, 12, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 21,
        Subject: 'workflow Analysis',
        StartTime: new Date(2018, 3, 11, 9, 30),
        EndTime: new Date(2018, 3, 11, 11, 30),
        IsAllDay: false,
        OwnerId: 3,
        RoomId: 1
    }, {
        Id: 22,
        Subject: 'Requirement planning',
        StartTime: new Date(2018, 3, 11, 12, 30),
        EndTime: new Date(2018, 3, 11, 14, 45),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 23,
        Subject: 'Quality Analysis',
        StartTime: new Date(2018, 3, 12, 10),
        EndTime: new Date(2018, 3, 12, 12, 30),
        IsAllDay: false,
        OwnerId: 3,
        RoomId: 1
    }, {
        Id: 24,
        Subject: 'Resource planning',
        StartTime: new Date(2018, 3, 12, 13),
        EndTime: new Date(2018, 3, 12, 14, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 25,
        Subject: 'Timeline estimation',
        StartTime: new Date(2018, 3, 13, 9),
        EndTime: new Date(2018, 3, 13, 11),
        IsAllDay: false,
        OwnerId: 3,
        RoomId: 1
    }, {
        Id: 26,
        Subject: 'Developers Meeting',
        StartTime: new Date(2018, 3, 13, 9),
        EndTime: new Date(2018, 3, 13, 11, 45),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 27,
        Subject: 'Project Review',
        StartTime: new Date(2018, 3, 14, 11),
        EndTime: new Date(2018, 3, 14, 13),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 28,
        Subject: 'Manual testing',
        StartTime: new Date(2018, 3, 14, 9),
        EndTime: new Date(2018, 3, 14, 11, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 29,
        Subject: 'Project Preview',
        StartTime: new Date(2018, 3, 15, 9, 30),
        EndTime: new Date(2018, 3, 15, 11),
        IsAllDay: false,
        OwnerId: 3,
        RoomId: 1
    }, {
        Id: 30,
        Subject: 'Cross-browser testing',
        StartTime: new Date(2018, 3, 15, 8),
        EndTime: new Date(2018, 3, 15, 11, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 31,
        Subject: 'Bug Automation',
        StartTime: new Date(2018, 3, 16, 10),
        EndTime: new Date(2018, 3, 16, 11),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 32,
        Subject: 'Functionality testing',
        StartTime: new Date(2018, 3, 11, 9),
        EndTime: new Date(2018, 3, 11, 11, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 33,
        Subject: 'Resolution-based testing',
        StartTime: new Date(2018, 3, 17, 14),
        EndTime: new Date(2018, 3, 17, 15),
        IsAllDay: false,
        OwnerId: 3,
        RoomId: 1
    }, {
        Id: 34,
        Subject: 'Test report Validation',
        StartTime: new Date(2018, 3, 17, 9),
        EndTime: new Date(2018, 3, 17, 11),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 35,
        Subject: 'Test case correction',
        StartTime: new Date(2018, 3, 18, 10),
        EndTime: new Date(2018, 3, 18, 11, 30),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 36,
        Subject: 'Run test cases',
        StartTime: new Date(2018, 3, 18, 10),
        EndTime: new Date(2018, 3, 18, 10, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 37,
        Subject: 'Bug fixing',
        StartTime: new Date(2018, 3, 9, 10),
        EndTime: new Date(2018, 3, 9, 10, 30),
        IsAllDay: false,
        OwnerId: 3,
        RoomId: 1
    }, {
        Id: 38,
        Subject: 'Debugging',
        StartTime: new Date(2018, 3, 12, 9),
        EndTime: new Date(2018, 3, 12, 10, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 39,
        Subject: 'Exception handling',
        StartTime: new Date(2018, 3, 20, 10),
        EndTime: new Date(2018, 3, 20, 11),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 40,
        Subject: 'Decoding',
        StartTime: new Date(2018, 3, 20, 10, 30),
        EndTime: new Date(2018, 3, 20, 12, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 41,
        Subject: 'workflow Analysis',
        StartTime: new Date(2018, 3, 21, 9, 30),
        EndTime: new Date(2018, 3, 21, 11, 30),
        IsAllDay: false,
        OwnerId: 1,RoomId: 1
    }, {
        Id: 42,
        Subject: 'Requirement planning',
        StartTime: new Date(2018, 3, 21, 12, 30),
        EndTime: new Date(2018, 3, 21, 13, 45),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 43,
        Subject: 'Quality Analysis',
        StartTime: new Date(2018, 3, 22, 10),
        EndTime: new Date(2018, 3, 22, 11, 30),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 44,
        Subject: 'Resource planning',
        StartTime: new Date(2018, 3, 22, 13),
        EndTime: new Date(2018, 3, 22, 14, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 45,
        Subject: 'Timeline estimation',
        StartTime: new Date(2018, 3, 23, 9),
        EndTime: new Date(2018, 3, 23, 10),
        IsAllDay: false,
        OwnerId: 3,
        RoomId: 1
    }, {
        Id: 46,
        Subject: 'Developers Meeting',
        StartTime: new Date(2018, 3, 23, 14),
        EndTime: new Date(2018, 3, 23, 15, 45),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 47,
        Subject: 'Project Review',
        StartTime: new Date(2018, 3, 24, 11),
        EndTime: new Date(2018, 3, 24, 12),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 48,
        Subject: 'Manual testing',
        StartTime: new Date(2018, 3, 24, 9),
        EndTime: new Date(2018, 3, 24, 11, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 49,
        Subject: 'Project Preview',
        StartTime: new Date(2018, 3, 25, 9, 30),
        EndTime: new Date(2018, 3, 25, 11),
        IsAllDay: false,
        OwnerId: 3,
        RoomId: 1
    }, {
        Id: 50,
        Subject: 'Cross-browser testing',
        StartTime: new Date(2018, 3, 25, 14),
        EndTime: new Date(2018, 3, 25, 15, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 51,
        Subject: 'Bug Automation',
        StartTime: new Date(2018, 3, 26, 10),
        EndTime: new Date(2018, 3, 26, 11),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 52,
        Subject: 'Functionality testing',
        StartTime: new Date(2018, 3, 26, 9),
        EndTime: new Date(2018, 3, 26, 11, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 53,
        Subject: 'Resolution-based testing',
        StartTime: new Date(2018, 3, 27, 14),
        EndTime: new Date(2018, 3, 27, 15),
        IsAllDay: false,
        OwnerId: 3,
        RoomId: 1
    }, {
        Id: 54,
        Subject: 'Test report Validation',
        StartTime: new Date(2018, 3, 27, 9),
        EndTime: new Date(2018, 3, 27, 11),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 55,
        Subject: 'Test case correction',
        StartTime: new Date(2018, 3, 28, 10),
        EndTime: new Date(2018, 3, 28, 11, 30),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 56,
        Subject: 'Run test cases',
        StartTime: new Date(2018, 3, 28, 10),
        EndTime: new Date(2018, 3, 28, 10, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 57,
        Subject: 'Bug fixing',
        StartTime: new Date(2018, 3, 29, 12),
        EndTime: new Date(2018, 3, 29, 12, 30),
        IsAllDay: false,
        OwnerId: 3,
        RoomId: 1
    }, {
        Id: 58,
        Subject: 'Debugging',
        StartTime: new Date(2018, 3, 29, 9),
        EndTime: new Date(2018, 3, 29, 10, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 59,
        Subject: 'Exception handling',
        StartTime: new Date(2018, 3, 30, 10),
        EndTime: new Date(2018, 3, 30, 11),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 60,
        Subject: 'Decoding',
        StartTime: new Date(2018, 3, 30, 10, 30),
        EndTime: new Date(2018, 3, 30, 12, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }
];

export let doctorData: Object[] = [
    {
        Id: 1,
        Subject: 'Echocardiogram',
        StartTime: new Date(2018, 3, 2, 9, 30),
        EndTime: new Date(2018, 3, 2, 11, 30),
        IsAllDay: false,
        DoctorId: 1
    }, {
        Id: 2,
        Subject: 'Lumbar punctures',
        StartTime: new Date(2018, 3, 2, 9, 30),
        EndTime: new Date(2018, 3, 2, 10, 45),
        IsAllDay: false,
        DoctorId: 2
    }, {
        Id: 3,
        Subject: 'Osteoarthritis',
        StartTime: new Date(2018, 3, 2, 8),
        EndTime: new Date(2018, 3, 2, 10, 30),
        IsAllDay: false,
        DoctorId: 3
    }, {
        Id: 4,
        Subject: 'Ambulatory ECG',
        StartTime: new Date(2018, 3, 3, 12),
        EndTime: new Date(2018, 3, 3, 12, 30),
        IsAllDay: false,
        DoctorId: 1
    }, {
        Id: 5,
        Subject: 'Osteoporosis',
        StartTime: new Date(2018, 3, 3, 11),
        EndTime: new Date(2018, 3, 3, 11, 50),
        IsAllDay: false,
        DoctorId: 3
    }, {
        Id: 6,
        Subject: 'Neuromuscular',
        StartTime: new Date(2018, 3, 4, 11, 30),
        EndTime: new Date(2018, 3, 4, 13, 30),
        IsAllDay: false,
        DoctorId: 2
    }, {
        Id: 7,
        Subject: 'Rheumatoid arthritis',
        StartTime: new Date(2018, 3, 4, 13, 40),
        EndTime: new Date(2018, 3, 4, 14, 40),
        IsAllDay: false,
        DoctorId: 3
    }, {
        Id: 8,
        Subject: 'Cardiac Catheterization',
        StartTime: new Date(2018, 3, 5, 11, 30),
        EndTime: new Date(2018, 3, 5, 13),
        IsAllDay: false,
        DoctorId: 1
    }, {
        Id: 9,
        Subject: 'Growth abnormalities',
        StartTime: new Date(2018, 3, 5, 14),
        EndTime: new Date(2018, 3, 5, 15, 30),
        IsAllDay: false,
        DoctorId: 3
    }, {
        Id: 10,
        Subject: 'Sleep disorders',
        StartTime: new Date(2018, 3, 6, 12),
        EndTime: new Date(2018, 3, 6, 14),
        IsAllDay: false,
        DoctorId: 2
    }, {
        Id: 11,
        Subject: 'Torn ligaments',
        StartTime: new Date(2018, 3, 6, 13, 30),
        EndTime: new Date(2018, 3, 6, 14, 45),
        IsAllDay: false,
        DoctorId: 3
    }, {
        Id: 12,
        Subject: 'Coronary angiogram',
        StartTime: new Date(2018, 3, 6, 8),
        EndTime: new Date(2018, 3, 6, 8, 30),
        IsAllDay: false,
        DoctorId: 1
    }, {
        Id: 13,
        Subject: 'Blood pressure',
        StartTime: new Date(2018, 3, 9, 12),
        EndTime: new Date(2018, 3, 9, 12, 30),
        IsAllDay: false,
        DoctorId: 1
    }, {
        Id: 14,
        Subject: 'Radiculopathy',
        StartTime: new Date(2018, 3, 9, 15, 45),
        EndTime: new Date(2018, 3, 9, 16, 30),
        IsAllDay: false,
        DoctorId: 2
    }, {
        Id: 15,
        Subject: 'Sprains and strains',
        StartTime: new Date(2018, 3, 9, 14),
        EndTime: new Date(2018, 3, 9, 15, 30),
        IsAllDay: false,
        DoctorId: 3
    }, {
        Id: 16,
        Subject: 'Cardiac stress testing',
        StartTime: new Date(2018, 3, 10, 10),
        EndTime: new Date(2018, 3, 10, 10, 30),
        IsAllDay: false,
        DoctorId: 1
    }, {
        Id: 17,
        Subject: 'Tendon injuries',
        StartTime: new Date(2018, 3, 10, 14),
        EndTime: new Date(2018, 3, 10, 15, 30),
        IsAllDay: false,
        DoctorId: 3
    }, {
        Id: 18,
        Subject: 'Dementia',
        StartTime: new Date(2018, 3, 11, 15),
        EndTime: new Date(2018, 3, 11, 17),
        IsAllDay: false,
        DoctorId: 2
    }, {
        Id: 19,
        Subject: 'Pulled muscles',
        StartTime: new Date(2018, 3, 11, 13, 30),
        EndTime: new Date(2018, 3, 11, 15, 50),
        IsAllDay: false,
        DoctorId: 3
    }, {
        Id: 20,
        Subject: 'Coronary angiogram',
        StartTime: new Date(2018, 3, 12, 10, 30),
        EndTime: new Date(2018, 3, 12, 12, 30),
        IsAllDay: false,
        DoctorId: 1
    }, {
        Id: 21,
        Subject: 'Back pain',
        StartTime: new Date(2018, 3, 12, 10, 30),
        EndTime: new Date(2018, 3, 12, 11, 30),
        IsAllDay: false,
        DoctorId: 3
    }, {
        Id: 22,
        Subject: 'Neuropathy',
        StartTime: new Date(2018, 3, 13, 12, 30),
        EndTime: new Date(2018, 3, 13, 13, 45),
        IsAllDay: false,
        DoctorId: 2
    }, {
        Id: 23,
        Subject: 'Ruptured disks',
        StartTime: new Date(2018, 3, 13, 13),
        EndTime: new Date(2018, 3, 13, 15, 50),
        IsAllDay: false,
        DoctorId: 3
    }, {
        Id: 24,
        Subject: 'Atherosclerosis',
        StartTime: new Date(2018, 3, 13, 10),
        EndTime: new Date(2018, 3, 13, 12, 30),
        IsAllDay: false,
        DoctorId: 1
    }, {
        Id: 25,
        Subject: 'Arthroplasty',
        StartTime: new Date(2018, 3, 16, 9),
        EndTime: new Date(2018, 3, 16, 10),
        IsAllDay: false,
        DoctorId: 1
    }, {
        Id: 26,
        Subject: 'Hyperactivity disorder',
        StartTime: new Date(2018, 3, 16, 14),
        EndTime: new Date(2018, 3, 16, 15, 45),
        IsAllDay: false,
        DoctorId: 2
    }, {
        Id: 27,
        Subject: 'Muscular dystrophy',
        StartTime: new Date(2018, 3, 16, 13, 10),
        EndTime: new Date(2018, 3, 16, 15, 20),
        IsAllDay: false,
        DoctorId: 3
    }, {
        Id: 28,
        Subject: 'Consulting',
        StartTime: new Date(2018, 3, 17, 9, 20),
        EndTime: new Date(2018, 3, 17, 10, 30),
        IsAllDay: false,
        DoctorId: 1
    }, {
        Id: 29,
        Subject: 'Hand surgery',
        StartTime: new Date(2018, 3, 17, 13, 20),
        EndTime: new Date(2018, 3, 17, 15, 22),
        IsAllDay: false,
        DoctorId: 3
    }, {
        Id: 30,
        Subject: 'Neuromuscular',
        StartTime: new Date(2018, 3, 18, 14),
        EndTime: new Date(2018, 3, 18, 15, 40),
        IsAllDay: false,
        DoctorId: 2
    }, {
        Id: 31,
        Subject: 'Spine surgery',
        StartTime: new Date(2018, 3, 18, 12, 18),
        EndTime: new Date(2018, 3, 18, 14, 23),
        IsAllDay: false,
        DoctorId: 3
    }, {
        Id: 32,
        Subject: 'Fibrinogen',
        StartTime: new Date(2018, 3, 19, 9),
        EndTime: new Date(2018, 3, 19, 12, 30),
        IsAllDay: false,
        DoctorId: 1
    }, {
        Id: 33,
        Subject: 'Bone tumors',
        StartTime: new Date(2018, 3, 19, 10, 45),
        EndTime: new Date(2018, 3, 19, 12, 20),
        IsAllDay: false,
        DoctorId: 3
    }, {
        Id: 34,
        Subject: 'Neuromuscular',
        StartTime: new Date(2018, 3, 20, 13),
        EndTime: new Date(2018, 3, 20, 17),
        IsAllDay: false,
        DoctorId: 2
    }, {
        Id: 35,
        Subject: 'Osteoporosis',
        StartTime: new Date(2018, 3, 20, 11, 45),
        EndTime: new Date(2018, 3, 20, 14, 30),
        IsAllDay: false,
        DoctorId: 3
    }, {
        Id: 36,
        Subject: 'Triglyceride',
        StartTime: new Date(2018, 3, 20, 7),
        EndTime: new Date(2018, 3, 20, 10, 45),
        IsAllDay: false,
        DoctorId: 1
    }, {
        Id: 37,
        Subject: 'Fibrinogen',
        StartTime: new Date(2018, 3, 23, 8),
        EndTime: new Date(2018, 3, 23, 12, 30),
        IsAllDay: false,
        DoctorId: 1
    }, {
        Id: 38,
        Subject: 'Head trauma',
        StartTime: new Date(2018, 3, 23, 12),
        EndTime: new Date(2018, 3, 23, 15),
        IsAllDay: false,
        DoctorId: 2
    }, {
        Id: 39,
        Subject: 'Arthroplasty',
        StartTime: new Date(2018, 3, 23, 12, 18),
        EndTime: new Date(2018, 3, 23, 13, 22),
        IsAllDay: false,
        DoctorId: 3
    }, {
        Id: 40,
        Subject: 'Echocardiogram',
        StartTime: new Date(2018, 3, 24, 7, 30),
        EndTime: new Date(2018, 3, 24, 12, 40),
        IsAllDay: false,
        DoctorId: 1
    }, {
        Id: 41,
        Subject: 'Skull reconstruction',
        StartTime: new Date(2018, 3, 24, 13, 20),
        EndTime: new Date(2018, 3, 24, 15, 45),
        IsAllDay: false,
        DoctorId: 3
    }, {
        Id: 42,
        Subject: 'Dementia',
        StartTime: new Date(2018, 3, 25, 12, 30),
        EndTime: new Date(2018, 3, 25, 16, 45),
        IsAllDay: false,
        DoctorId: 2
    }, {
        Id: 43,
        Subject: 'Orthopedic trauma',
        StartTime: new Date(2018, 3, 25, 10, 18),
        EndTime: new Date(2018, 3, 25, 12, 20),
        IsAllDay: false,
        DoctorId: 3
    }, {
        Id: 44,
        Subject: 'Blood pressure',
        StartTime: new Date(2018, 3, 26, 7, 50),
        EndTime: new Date(2018, 3, 26, 12, 30),
        IsAllDay: false,
        DoctorId: 1
    }, {
        Id: 45,
        Subject: 'Ruptured disks',
        StartTime: new Date(2018, 3, 26, 12, 50),
        EndTime: new Date(2018, 3, 26, 15, 20),
        IsAllDay: false,
        DoctorId: 3
    }, {
        Id: 46,
        Subject: 'Head trauma',
        StartTime: new Date(2018, 3, 27, 11, 50),
        EndTime: new Date(2018, 3, 27, 12, 45),
        IsAllDay: false,
        DoctorId: 2
    }, {
        Id: 47,
        Subject: 'Cerebral palsy',
        StartTime: new Date(2018, 3, 27, 14, 50),
        EndTime: new Date(2018, 3, 27, 15, 50),
        IsAllDay: false,
        DoctorId: 3
    }, {
        Id: 48,
        Subject: 'Consulting',
        StartTime: new Date(2018, 3, 27, 9),
        EndTime: new Date(2018, 3, 27, 11, 30),
        IsAllDay: false,
        DoctorId: 1
    }, {
        Id: 49,
        Subject: 'Electrocardiogram',
        StartTime: new Date(2018, 3, 30, 9, 30),
        EndTime: new Date(2018, 3, 30, 11, 50),
        IsAllDay: false,
        DoctorId: 1
    }, {
        Id: 50,
        Subject: 'Radiculopathy',
        StartTime: new Date(2018, 3, 30, 14),
        EndTime: new Date(2018, 3, 30, 15, 30),
        IsAllDay: false,
        DoctorId: 2
    }, {
        Id: 51,
        Subject: 'Skull reconstruction',
        StartTime: new Date(2018, 3, 30, 14),
        EndTime: new Date(2018, 3, 30, 16),
        IsAllDay: false,
        DoctorId: 3
    }
];
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Setting allowMultiple to true in the above code example allows you to select multiple resources from the event editor and also creates multiple copies of the same appointment in the Scheduler for each resources while rendering.

Resource grouping

Resource grouping support allows the Scheduler to group the resources in a hierarchical structure both as an expandable groups (Timeline views) and as vertical hierarchy displaying resources one after the other (Resources view).

Scheduler supports both single and multiple levels of resource grouping that can be customized both in timeline and vertical Scheduler views.

Explore the advanced options available with the multiple resources and grouping concepts of Angular Scheduler by watching this video:

Vertical resource view

The following code example displays how the multiple resources are grouped and its events are portrayed in the default calendar views.

Source
Preview
app.component.ts
app.module.ts
datasource.ts
main.ts
Copied to clipboard
import { Component } from '@angular/core';
import {
    WeekService, MonthService, AgendaService, EventSettingsModel, GroupModel
} from '@syncfusion/ej2-angular-schedule';
import { resourceConferenceData } from './datasource.ts';

@Component({
    selector: "app-root",
    providers: [WeekService, MonthService, AgendaService],
    // specifies the template string for the Schedule component
    template: `
    <ejs-schedule width="100%" height="550px" [selectedDate]="selectedDate" [views]="views"
      [eventSettings]="eventSettings" [group]='group'>
      <e-resources>
        <e-resource field="ProjectId" title="Choose Project" name="Projects"
            [dataSource]="projectDataSource"
            textField="text" idField="id" colorField="color">
        </e-resource>
        <e-resource field="TaskId" title="Category" name="Categories"
          [dataSource]="categoryDataSource" [allowMultiple]="allowMultipleCategory"
          textField="text" idField="id" colorField="color">
        </e-resource>
      </e-resources>
    </ejs-schedule>`
})
export class AppComponent {
    public selectedDate: Date = new Date(2018, 3, 1);
    public views: Array<string> = ['Week', 'Month', 'Agenda'];
    public eventSettings: EventSettingsModel = {
        dataSource: resourceConferenceData
    };
    public group: GroupModel = {
        byGroupID: false,
        resources: ['Projects', 'Categories']
    };
    public projectDataSource: Object[] = [
        { text: 'PROJECT 1', id: 1, color: '#cb6bb2' },
        { text: 'PROJECT 2', id: 2, color: '#56ca85' },
        { text: 'PROJECT 3', id: 3, color: '#df5286' }
    ];
    public allowMultipleCategory: Boolean = true;
    public categoryDataSource: Object[] = [
        { text: 'Development', id: 1, color: '#df5286' },
        { text: 'Testing', id: 2, color: '#7fa900' }
    ];
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ScheduleModule } from '@syncfusion/ej2-angular-schedule';
import { TimePickerModule } from '@syncfusion/ej2-angular-calendars';
import { DayService, WeekService, WorkWeekService, MonthService, AgendaService, MonthAgendaService} from '@syncfusion/ej2-angular-schedule';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        ScheduleModule,
        TimePickerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [DayService, 
                WeekService, 
                WorkWeekService, 
                MonthService,
                AgendaService,
                MonthAgendaService]
})
export class AppModule { }
Copied to clipboard
/**
 * Schedule datasource spec
 */

export let resourceConferenceData: Object[] = [
    {
        Id: 1,
        Subject: 'Workflow Analysis',
        StartTime: new Date(2018, 3, 1, 9, 30),
        EndTime: new Date(2018, 3, 1, 12, 0),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 2
    }, {
        Id: 2,
        Subject: 'Requirement planning',
        StartTime: new Date(2018, 3, 1, 12, 30),
        EndTime: new Date(2018, 3, 1, 14, 45),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 1
    }, {
        Id: 3,
        Subject: 'Quality Analysis',
        StartTime: new Date(2018, 3, 2, 10, 0),
        EndTime: new Date(2018, 3, 2, 12, 30),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 1
    }, {
        Id: 4,
        Subject: 'Resource planning',
        StartTime: new Date(2018, 3, 2, 13, 0),
        EndTime: new Date(2018, 3, 2, 15, 30),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 2
    }, {
        Id: 5,
        Subject: 'Timeline estimation',
        StartTime: new Date(2018, 3, 3, 9, 0),
        EndTime: new Date(2018, 3, 3, 11, 30),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 1
    }, {
        Id: 6,
        Subject: 'Developers Meeting',
        StartTime: new Date(2018, 3, 3, 14, 0),
        EndTime: new Date(2018, 3, 3, 16, 45),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 2
    }, {
        Id: 7,
        Subject: 'Project Review',
        StartTime: new Date(2018, 3, 4, 11, 15),
        EndTime: new Date(2018, 3, 4, 13, 0),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 1
    }, {
        Id: 8,
        Subject: 'Manual testing',
        StartTime: new Date(2018, 3, 4, 9, 15),
        EndTime: new Date(2018, 3, 4, 11, 45),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 2
    }, {
        Id: 9,
        Subject: 'Project Preview',
        StartTime: new Date(2018, 3, 5, 9, 30),
        EndTime: new Date(2018, 3, 5, 12, 45),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 1
    }, {
        Id: 10,
        Subject: 'Cross-browser testing',
        StartTime: new Date(2018, 3, 5, 13, 45),
        EndTime: new Date(2018, 3, 5, 16, 30),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 2
    }, {
        Id: 11,
        Subject: 'Bug Automation',
        StartTime: new Date(2018, 3, 6, 10, 0),
        EndTime: new Date(2018, 3, 6, 12, 15),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 1
    }, {
        Id: 12,
        Subject: 'Functionality testing',
        StartTime: new Date(2018, 3, 6, 9, 0),
        EndTime: new Date(2018, 3, 6, 11, 30),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 2
    }, {
        Id: 13,
        Subject: 'Resolution-based testing',
        StartTime: new Date(2018, 3, 7, 13, 0),
        EndTime: new Date(2018, 3, 7, 15, 15),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 1
    }, {
        Id: 14,
        Subject: 'Test report Validation',
        StartTime: new Date(2018, 3, 7, 9),
        EndTime: new Date(2018, 3, 7, 11),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 2
    }, {
        Id: 15,
        Subject: 'Test case correction',
        StartTime: new Date(2018, 3, 8, 9, 45),
        EndTime: new Date(2018, 3, 8, 11, 30),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 1
    }, {
        Id: 16,
        Subject: 'Run test cases',
        StartTime: new Date(2018, 3, 8, 10, 30),
        EndTime: new Date(2018, 3, 8, 13, 0),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 2
    }, {
        Id: 17,
        Subject: 'Quality Analysis',
        StartTime: new Date(2018, 3, 9, 12),
        EndTime: new Date(2018, 3, 9, 15, 30),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 1
    }, {
        Id: 18,
        Subject: 'Debugging',
        StartTime: new Date(2018, 3, 9, 9, 0),
        EndTime: new Date(2018, 3, 9, 11, 15),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 2
    }, {
        Id: 19,
        Subject: 'Exception handling',
        StartTime: new Date(2018, 3, 10, 10, 10),
        EndTime: new Date(2018, 3, 10, 13, 30),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 2
    }, {
        Id: 20,
        Subject: 'Decoding',
        StartTime: new Date(2018, 3, 10, 10, 30),
        EndTime: new Date(2018, 3, 10, 12, 30),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 2
    }, {
        Id: 21,
        Subject: 'workflow Analysis',
        StartTime: new Date(2018, 3, 11, 9, 30),
        EndTime: new Date(2018, 3, 11, 11, 30),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 1
    }, {
        Id: 22,
        Subject: 'Requirement planning',
        StartTime: new Date(2018, 3, 11, 12, 30),
        EndTime: new Date(2018, 3, 11, 14, 45),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 2
    }, {
        Id: 23,
        Subject: 'Quality Analysis',
        StartTime: new Date(2018, 3, 12, 10),
        EndTime: new Date(2018, 3, 12, 12, 30),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 1
    }, {
        Id: 24,
        Subject: 'Resource planning',
        StartTime: new Date(2018, 3, 12, 13),
        EndTime: new Date(2018, 3, 12, 14, 30),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 2
    }, {
        Id: 25,
        Subject: 'Timeline estimation',
        StartTime: new Date(2018, 3, 13, 9),
        EndTime: new Date(2018, 3, 13, 11),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 1
    }, {
        Id: 26,
        Subject: 'Developers Meeting',
        StartTime: new Date(2018, 3, 13, 14),
        EndTime: new Date(2018, 3, 13, 15, 45),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 2
    }, {
        Id: 27,
        Subject: 'Project Review',
        StartTime: new Date(2018, 3, 14, 11),
        EndTime: new Date(2018, 3, 14, 13),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 1
    }, {
        Id: 28,
        Subject: 'Manual testing',
        StartTime: new Date(2018, 3, 14, 9),
        EndTime: new Date(2018, 3, 14, 11, 30),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 2
    }, {
        Id: 29,
        Subject: 'Project Preview',
        StartTime: new Date(2018, 3, 15, 9, 30),
        EndTime: new Date(2018, 3, 15, 11),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 1
    }, {
        Id: 30,
        Subject: 'Cross-browser testing',
        StartTime: new Date(2018, 3, 15, 14),
        EndTime: new Date(2018, 3, 15, 16, 30),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 2
    }, {
        Id: 31,
        Subject: 'Bug Automation',
        StartTime: new Date(2018, 3, 16, 10),
        EndTime: new Date(2018, 3, 16, 11),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 1
    }, {
        Id: 32,
        Subject: 'Functionality testing',
        StartTime: new Date(2018, 3, 16, 9),
        EndTime: new Date(2018, 3, 16, 11, 30),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 2
    }, {
        Id: 33,
        Subject: 'Resolution-based testing',
        StartTime: new Date(2018, 3, 17, 14),
        EndTime: new Date(2018, 3, 17, 15),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 1
    }, {
        Id: 34,
        Subject: 'Test report Validation',
        StartTime: new Date(2018, 3, 17, 9),
        EndTime: new Date(2018, 3, 17, 11),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 2
    }, {
        Id: 35,
        Subject: 'Test case correction',
        StartTime: new Date(2018, 3, 18, 10),
        EndTime: new Date(2018, 3, 18, 11, 30),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 1
    }, {
        Id: 36,
        Subject: 'Run test cases',
        StartTime: new Date(2018, 3, 18, 10),
        EndTime: new Date(2018, 3, 18, 10, 30),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 2
    }, {
        Id: 37,
        Subject: 'Bug fixing',
        StartTime: new Date(2018, 3, 9, 10),
        EndTime: new Date(2018, 3, 9, 10, 30),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 1
    }, {
        Id: 38,
        Subject: 'Debugging',
        StartTime: new Date(2018, 3, 19, 9),
        EndTime: new Date(2018, 3, 19, 10, 30),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 2
    }, {
        Id: 39,
        Subject: 'Exception handling',
        StartTime: new Date(2018, 3, 20, 10),
        EndTime: new Date(2018, 3, 20, 11),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 1
    }, {
        Id: 40,
        Subject: 'Decoding',
        StartTime: new Date(2018, 3, 20, 10, 30),
        EndTime: new Date(2018, 3, 20, 12, 30),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 2
    }, {
        Id: 41,
        Subject: 'workflow Analysis',
        StartTime: new Date(2018, 3, 21, 9, 30),
        EndTime: new Date(2018, 3, 21, 11, 30),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 1
    }, {
        Id: 42,
        Subject: 'Requirement planning',
        StartTime: new Date(2018, 3, 21, 12, 30),
        EndTime: new Date(2018, 3, 21, 13, 45),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 2
    }, {
        Id: 43,
        Subject: 'Quality Analysis',
        StartTime: new Date(2018, 3, 22, 10),
        EndTime: new Date(2018, 3, 22, 11, 30),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 1
    }, {
        Id: 44,
        Subject: 'Resource planning',
        StartTime: new Date(2018, 3, 4, 10),
        EndTime: new Date(2018, 3, 4, 12, 30),
        IsAllDay: false,
        ProjectId: 3,
        TaskId: 2
    }, {
        Id: 45,
        Subject: 'Timeline estimation',
        StartTime: new Date(2018, 3, 4, 9),
        EndTime: new Date(2018, 3, 4, 11),
        IsAllDay: false,
        ProjectId: 3,
        TaskId: 1
    }, {
        Id: 46,
        Subject: 'Developers Meeting',
        StartTime: new Date(2018, 3, 4, 14, 30),
        EndTime: new Date(2018, 3, 4, 16, 30),
        IsAllDay: false,
        ProjectId: 3,
        TaskId: 2
    }, {
        Id: 47,
        Subject: 'Project Review',
        StartTime: new Date(2018, 3, 4, 14),
        EndTime: new Date(2018, 3, 4, 16),
        IsAllDay: false,
        ProjectId: 3,
        TaskId: 1
    }, {
        Id: 48,
        Subject: 'Manual testing',
        StartTime: new Date(2018, 3, 4, 17, 30),
        EndTime: new Date(2018, 3, 4, 19, 30),
        IsAllDay: false,
        ProjectId: 3,
        TaskId: 2
    }, {
        Id: 49,
        Subject: 'Project Preview',
        StartTime: new Date(2018, 3, 4, 18, 0),
        EndTime: new Date(2018, 3, 4, 20),
        IsAllDay: false,
        ProjectId: 3,
        TaskId: 1
    }, {
        Id: 50,
        Subject: 'Cross-browser testing',
        StartTime: new Date(2018, 3, 25, 14),
        EndTime: new Date(2018, 3, 25, 15, 30),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 2
    }, {
        Id: 51,
        Subject: 'Bug Automation',
        StartTime: new Date(2018, 3, 26, 10),
        EndTime: new Date(2018, 3, 26, 11),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 1
    }, {
        Id: 52,
        Subject: 'Functionality testing',
        StartTime: new Date(2018, 3, 26, 9),
        EndTime: new Date(2018, 3, 26, 11, 30),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 2
    }, {
        Id: 53,
        Subject: 'Resolution-based testing',
        StartTime: new Date(2018, 3, 27, 14),
        EndTime: new Date(2018, 3, 27, 15),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 1
    }, {
        Id: 54,
        Subject: 'Test report Validation',
        StartTime: new Date(2018, 3, 27, 9),
        EndTime: new Date(2018, 3, 27, 11),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 2
    }, {
        Id: 55,
        Subject: 'Test case correction',
        StartTime: new Date(2018, 3, 28, 10),
        EndTime: new Date(2018, 3, 28, 11, 30),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 1
    }, {
        Id: 56,
        Subject: 'Run test cases',
        StartTime: new Date(2018, 3, 28, 10),
        EndTime: new Date(2018, 3, 28, 10, 30),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 2
    }, {
        Id: 57,
        Subject: 'Bug fixing',
        StartTime: new Date(2018, 3, 29, 12),
        EndTime: new Date(2018, 3, 29, 12, 30),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 1
    }, {
        Id: 58,
        Subject: 'Debugging',
        StartTime: new Date(2018, 3, 29, 9),
        EndTime: new Date(2018, 3, 29, 10, 30),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 2
    }, {
        Id: 59,
        Subject: 'Exception handling',
        StartTime: new Date(2018, 3, 30, 10),
        EndTime: new Date(2018, 3, 30, 11),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 1
    }, {
        Id: 60,
        Subject: 'Decoding',
        StartTime: new Date(2018, 3, 30, 10, 30),
        EndTime: new Date(2018, 3, 30, 12, 30),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 2
    }
];

export let resourceData: Object[] = [
    {
        Id: 1,
        Subject: 'Workflow Analysis',
        StartTime: new Date(2018, 3, 1, 9, 30),
        EndTime: new Date(2018, 3, 1, 12, 0),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 2,
        Subject: 'Requirement planning',
        StartTime: new Date(2018, 3, 1, 12, 30),
        EndTime: new Date(2018, 3, 1, 14, 45),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 3,
        Subject: 'Quality Analysis',
        StartTime: new Date(2018, 3, 2, 10, 0),
        EndTime: new Date(2018, 3, 2, 12, 30),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 4,
        Subject: 'Resource planning',
        StartTime: new Date(2018, 3, 2, 13, 0),
        EndTime: new Date(2018, 3, 2, 15, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 5,
        Subject: 'Timeline estimation',
        StartTime: new Date(2018, 3, 3, 9, 0),
        EndTime: new Date(2018, 3, 3, 11, 30),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 6,
        Subject: 'Developers Meeting',
        StartTime: new Date(2018, 3, 3, 14, 0),
        EndTime: new Date(2018, 3, 3, 16, 45),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 7,
        Subject: 'Project Review',
        StartTime: new Date(2018, 3, 4, 11, 15),
        EndTime: new Date(2018, 3, 4, 13, 30),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 8,
        Subject: 'Manual testing',
        StartTime: new Date(2018, 3, 4, 9, 15),
        EndTime: new Date(2018, 3, 4, 11, 45),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 9,
        Subject: 'Project Preview',
        StartTime: new Date(2018, 3, 5, 9, 30),
        EndTime: new Date(2018, 3, 5, 12, 45),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 10,
        Subject: 'Cross-browser testing',
        StartTime: new Date(2018, 3, 5, 13, 45),
        EndTime: new Date(2018, 3, 5, 16, 30),
        IsAllDay: false,
        OwnerId: 2
    }, {
        Id: 11,
        Subject: 'Bug Automation',
        StartTime: new Date(2018, 3, 6, 10, 0),
        EndTime: new Date(2018, 3, 6, 12, 15),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 12,
        Subject: 'Functionality testing',
        StartTime: new Date(2018, 3, 6, 9, 0),
        EndTime: new Date(2018, 3, 6, 11, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 13,
        Subject: 'Resolution-based testing',
        StartTime: new Date(2018, 3, 7, 13, 0),
        EndTime: new Date(2018, 3, 7, 15, 15),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 14,
        Subject: 'Test report Validation',
        StartTime: new Date(2018, 3, 7, 9),
        EndTime: new Date(2018, 3, 7, 11),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 15,
        Subject: 'Test case correction',
        StartTime: new Date(2018, 3, 8, 9, 45),
        EndTime: new Date(2018, 3, 8, 11, 30),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 16,
        Subject: 'Run test cases',
        StartTime: new Date(2018, 3, 8, 10, 30),
        EndTime: new Date(2018, 3, 8, 13, 0),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 17,
        Subject: 'Quality Analysis',
        StartTime: new Date(2018, 3, 9, 12),
        EndTime: new Date(2018, 3, 9, 15, 30),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 18,
        Subject: 'Debugging',
        StartTime: new Date(2018, 3, 9, 9, 0),
        EndTime: new Date(2018, 3, 9, 11, 15),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 19,
        Subject: 'Exception handling',
        StartTime: new Date(2018, 3, 10, 10, 10),
        EndTime: new Date(2018, 3, 10, 13, 30),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 20,
        Subject: 'Decoding',
        StartTime: new Date(2018, 3, 10, 10, 30),
        EndTime: new Date(2018, 3, 10, 12, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 21,
        Subject: 'workflow Analysis',
        StartTime: new Date(2018, 3, 11, 9, 30),
        EndTime: new Date(2018, 3, 11, 11, 30),
        IsAllDay: false,
        OwnerId: 3,
        RoomId: 1
    }, {
        Id: 22,
        Subject: 'Requirement planning',
        StartTime: new Date(2018, 3, 11, 12, 30),
        EndTime: new Date(2018, 3, 11, 14, 45),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 23,
        Subject: 'Quality Analysis',
        StartTime: new Date(2018, 3, 12, 10),
        EndTime: new Date(2018, 3, 12, 12, 30),
        IsAllDay: false,
        OwnerId: 3,
        RoomId: 1
    }, {
        Id: 24,
        Subject: 'Resource planning',
        StartTime: new Date(2018, 3, 12, 13),
        EndTime: new Date(2018, 3, 12, 14, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 25,
        Subject: 'Timeline estimation',
        StartTime: new Date(2018, 3, 13, 9),
        EndTime: new Date(2018, 3, 13, 11),
        IsAllDay: false,
        OwnerId: 3,
        RoomId: 1
    }, {
        Id: 26,
        Subject: 'Developers Meeting',
        StartTime: new Date(2018, 3, 13, 14),
        EndTime: new Date(2018, 3, 13, 15, 45),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 27,
        Subject: 'Project Review',
        StartTime: new Date(2018, 3, 14, 11),
        EndTime: new Date(2018, 3, 14, 13),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 28,
        Subject: 'Manual testing',
        StartTime: new Date(2018, 3, 14, 9),
        EndTime: new Date(2018, 3, 14, 11, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 29,
        Subject: 'Project Preview',
        StartTime: new Date(2018, 3, 15, 9, 30),
        EndTime: new Date(2018, 3, 15, 11),
        IsAllDay: false,
        OwnerId: 3,
        RoomId: 1
    }, {
        Id: 30,
        Subject: 'Cross-browser testing',
        StartTime: new Date(2018, 3, 15, 14),
        EndTime: new Date(2018, 3, 15, 16, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 31,
        Subject: 'Bug Automation',
        StartTime: new Date(2018, 3, 16, 10),
        EndTime: new Date(2018, 3, 16, 11),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 32,
        Subject: 'Functionality testing',
        StartTime: new Date(2018, 3, 16, 9),
        EndTime: new Date(2018, 3, 16, 11, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 33,
        Subject: 'Resolution-based testing',
        StartTime: new Date(2018, 3, 17, 14),
        EndTime: new Date(2018, 3, 17, 15),
        IsAllDay: false,
        OwnerId: 3,
        RoomId: 1
    }, {
        Id: 34,
        Subject: 'Test report Validation',
        StartTime: new Date(2018, 3, 17, 9),
        EndTime: new Date(2018, 3, 17, 11),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 35,
        Subject: 'Test case correction',
        StartTime: new Date(2018, 3, 18, 10),
        EndTime: new Date(2018, 3, 18, 11, 30),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 36,
        Subject: 'Run test cases',
        StartTime: new Date(2018, 3, 18, 10),
        EndTime: new Date(2018, 3, 18, 10, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 37,
        Subject: 'Bug fixing',
        StartTime: new Date(2018, 3, 9, 10),
        EndTime: new Date(2018, 3, 9, 10, 30),
        IsAllDay: false,
        OwnerId: 3,
        RoomId: 1
    }, {
        Id: 38,
        Subject: 'Debugging',
        StartTime: new Date(2018, 3, 19, 9),
        EndTime: new Date(2018, 3, 19, 10, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 39,
        Subject: 'Exception handling',
        StartTime: new Date(2018, 3, 20, 10),
        EndTime: new Date(2018, 3, 20, 11),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 40,
        Subject: 'Decoding',
        StartTime: new Date(2018, 3, 20, 10, 30),
        EndTime: new Date(2018, 3, 20, 12, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 41,
        Subject: 'workflow Analysis',
        StartTime: new Date(2018, 3, 21, 9, 30),
        EndTime: new Date(2018, 3, 21, 11, 30),
        IsAllDay: false,
        OwnerId: 1, RoomId: 1
    }, {
        Id: 42,
        Subject: 'Requirement planning',
        StartTime: new Date(2018, 3, 21, 12, 30),
        EndTime: new Date(2018, 3, 21, 13, 45),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 43,
        Subject: 'Quality Analysis',
        StartTime: new Date(2018, 3, 22, 10),
        EndTime: new Date(2018, 3, 22, 11, 30),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 44,
        Subject: 'Resource planning',
        StartTime: new Date(2018, 3, 22, 13),
        EndTime: new Date(2018, 3, 22, 14, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 45,
        Subject: 'Timeline estimation',
        StartTime: new Date(2018, 3, 23, 9),
        EndTime: new Date(2018, 3, 23, 10),
        IsAllDay: false,
        OwnerId: 3,
        RoomId: 1
    }, {
        Id: 46,
        Subject: 'Developers Meeting',
        StartTime: new Date(2018, 3, 23, 14),
        EndTime: new Date(2018, 3, 23, 15, 45),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 47,
        Subject: 'Project Review',
        StartTime: new Date(2018, 3, 24, 11),
        EndTime: new Date(2018, 3, 24, 12),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 48,
        Subject: 'Manual testing',
        StartTime: new Date(2018, 3, 24, 9),
        EndTime: new Date(2018, 3, 24, 11, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 49,
        Subject: 'Project Preview',
        StartTime: new Date(2018, 3, 25, 9, 30),
        EndTime: new Date(2018, 3, 25, 11),
        IsAllDay: false,
        OwnerId: 3,
        RoomId: 1
    }, {
        Id: 50,
        Subject: 'Cross-browser testing',
        StartTime: new Date(2018, 3, 25, 14),
        EndTime: new Date(2018, 3, 25, 15, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 51,
        Subject: 'Bug Automation',
        StartTime: new Date(2018, 3, 26, 10),
        EndTime: new Date(2018, 3, 26, 11),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 52,
        Subject: 'Functionality testing',
        StartTime: new Date(2018, 3, 26, 9),
        EndTime: new Date(2018, 3, 26, 11, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 53,
        Subject: 'Resolution-based testing',
        StartTime: new Date(2018, 3, 27, 14),
        EndTime: new Date(2018, 3, 27, 15),
        IsAllDay: false,
        OwnerId: 3,
        RoomId: 1
    }, {
        Id: 54,
        Subject: 'Test report Validation',
        StartTime: new Date(2018, 3, 27, 9),
        EndTime: new Date(2018, 3, 27, 11),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 55,
        Subject: 'Test case correction',
        StartTime: new Date(2018, 3, 28, 10),
        EndTime: new Date(2018, 3, 28, 11, 30),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 56,
        Subject: 'Run test cases',
        StartTime: new Date(2018, 3, 28, 10),
        EndTime: new Date(2018, 3, 28, 10, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 57,
        Subject: 'Bug fixing',
        StartTime: new Date(2018, 3, 29, 12),
        EndTime: new Date(2018, 3, 29, 12, 30),
        IsAllDay: false,
        OwnerId: 3,
        RoomId: 1
    }, {
        Id: 58,
        Subject: 'Debugging',
        StartTime: new Date(2018, 3, 29, 9),
        EndTime: new Date(2018, 3, 29, 10, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 59,
        Subject: 'Exception handling',
        StartTime: new Date(2018, 3, 30, 10),
        EndTime: new Date(2018, 3, 30, 11),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 60,
        Subject: 'Decoding',
        StartTime: new Date(2018, 3, 30, 10, 30),
        EndTime: new Date(2018, 3, 30, 12, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }
];
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Timeline resource view

The following code example depicts how to group the multiple resources on Timeline Scheduler views and its relevant events are displayed accordingly under those resources.

Source
Preview
app.component.ts
app.module.ts
datasource.ts
main.ts
Copied to clipboard
import { Component } from '@angular/core';
import {
    TimelineViewsService, TimelineMonthService, AgendaService, EventSettingsModel, GroupModel
} from '@syncfusion/ej2-angular-schedule';
import { resourceData } from './datasource.ts';

@Component({
    selector: "app-root",
    providers: [TimelineViewsService, TimelineMonthService, AgendaService],
    // specifies the template string for the Schedule component
    template: `
    <ejs-schedule width="100%" height="550px" [selectedDate]="selectedDate" [views]="views"
      [currentView]='currentView' [eventSettings]="eventSettings" [group]='group'>
      <e-resources>
        <e-resource field="RoomId" title="Room" name="Rooms"
            [dataSource]="roomDataSource"
            textField="RoomText" idField="Id" colorField="RoomColor">
        </e-resource>
        <e-resource field="OwnerId" title="Owner" name="Owners"
          [dataSource]="ownerDataSource" [allowMultiple]="allowMultipleCategory"
          textField='OwnerText' idField='Id' groupIDField='OwnerGroupId' colorField='OwnerColor'>
        </e-resource>
      </e-resources>
    </ejs-schedule>`
})
export class AppComponent {
    public selectedDate: Date = new Date(2018, 3, 4);
    public currentView: string = 'TimelineWeek';
    public views: Array<string> = ['TimelineWeek', 'TimelineMonth', 'Agenda'];
    public eventSettings: EventSettingsModel = {
        dataSource: resourceData
    };
    public group: GroupModel = {
        resources: ['Rooms', 'Owners']
    };
    public roomDataSource: Object[] = [
        { RoomText: 'ROOM 1', Id: 1, RoomColor: '#cb6bb2' },
        { RoomText: 'ROOM 2', Id: 2, RoomColor: '#56ca85' }
    ];
    public allowMultipleOwner: Boolean = true;
    public ownerDataSource: Object[] = [
        { OwnerText: 'Nancy', Id: 1, OwnerGroupId: 1, OwnerColor: '#ffaa00' },
        { OwnerText: 'Steven', Id: 2, OwnerGroupId: 2, OwnerColor: '#f8a398' },
        { OwnerText: 'Michael', Id: 3, OwnerGroupId: 1, OwnerColor: '#7499e1' }
    ];
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ScheduleModule } from '@syncfusion/ej2-angular-schedule';
import { TimePickerModule } from '@syncfusion/ej2-angular-calendars';
import { DayService, WeekService, WorkWeekService, MonthService, AgendaService, MonthAgendaService} from '@syncfusion/ej2-angular-schedule';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        ScheduleModule,
        TimePickerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [DayService, 
                WeekService, 
                WorkWeekService, 
                MonthService,
                AgendaService,
                MonthAgendaService]
})
export class AppModule { }
Copied to clipboard
/**
 * Schedule datasource spec
 */

export let resourceConferenceData: Object[] = [
    {
        Id: 1,
        Subject: 'Workflow Analysis',
        StartTime: new Date(2018, 3, 1, 9, 30),
        EndTime: new Date(2018, 3, 1, 12, 0),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 2
    }, {
        Id: 2,
        Subject: 'Requirement planning',
        StartTime: new Date(2018, 3, 1, 12, 30),
        EndTime: new Date(2018, 3, 1, 14, 45),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 1
    }, {
        Id: 3,
        Subject: 'Quality Analysis',
        StartTime: new Date(2018, 3, 2, 10, 0),
        EndTime: new Date(2018, 3, 2, 12, 30),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 1
    }, {
        Id: 4,
        Subject: 'Resource planning',
        StartTime: new Date(2018, 3, 2, 13, 0),
        EndTime: new Date(2018, 3, 2, 15, 30),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 2
    }, {
        Id: 5,
        Subject: 'Timeline estimation',
        StartTime: new Date(2018, 3, 3, 9, 0),
        EndTime: new Date(2018, 3, 3, 11, 30),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 1
    }, {
        Id: 6,
        Subject: 'Developers Meeting',
        StartTime: new Date(2018, 3, 3, 14, 0),
        EndTime: new Date(2018, 3, 3, 16, 45),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 2
    }, {
        Id: 7,
        Subject: 'Project Review',
        StartTime: new Date(2018, 3, 4, 11, 15),
        EndTime: new Date(2018, 3, 4, 13, 0),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 1
    }, {
        Id: 8,
        Subject: 'Manual testing',
        StartTime: new Date(2018, 3, 4, 9, 15),
        EndTime: new Date(2018, 3, 4, 11, 45),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 2
    }, {
        Id: 9,
        Subject: 'Project Preview',
        StartTime: new Date(2018, 3, 5, 9, 30),
        EndTime: new Date(2018, 3, 5, 12, 45),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 1
    }, {
        Id: 10,
        Subject: 'Cross-browser testing',
        StartTime: new Date(2018, 3, 5, 13, 45),
        EndTime: new Date(2018, 3, 5, 16, 30),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 2
    }, {
        Id: 11,
        Subject: 'Bug Automation',
        StartTime: new Date(2018, 3, 6, 10, 0),
        EndTime: new Date(2018, 3, 6, 12, 15),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 1
    }, {
        Id: 12,
        Subject: 'Functionality testing',
        StartTime: new Date(2018, 3, 6, 9, 0),
        EndTime: new Date(2018, 3, 6, 11, 30),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 2
    }, {
        Id: 13,
        Subject: 'Resolution-based testing',
        StartTime: new Date(2018, 3, 7, 13, 0),
        EndTime: new Date(2018, 3, 7, 15, 15),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 1
    }, {
        Id: 14,
        Subject: 'Test report Validation',
        StartTime: new Date(2018, 3, 7, 9),
        EndTime: new Date(2018, 3, 7, 11),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 2
    }, {
        Id: 15,
        Subject: 'Test case correction',
        StartTime: new Date(2018, 3, 8, 9, 45),
        EndTime: new Date(2018, 3, 8, 11, 30),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 1
    }, {
        Id: 16,
        Subject: 'Run test cases',
        StartTime: new Date(2018, 3, 8, 10, 30),
        EndTime: new Date(2018, 3, 8, 13, 0),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 2
    }, {
        Id: 17,
        Subject: 'Quality Analysis',
        StartTime: new Date(2018, 3, 9, 12),
        EndTime: new Date(2018, 3, 9, 15, 30),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 1
    }, {
        Id: 18,
        Subject: 'Debugging',
        StartTime: new Date(2018, 3, 9, 9, 0),
        EndTime: new Date(2018, 3, 9, 11, 15),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 2
    }, {
        Id: 19,
        Subject: 'Exception handling',
        StartTime: new Date(2018, 3, 10, 10, 10),
        EndTime: new Date(2018, 3, 10, 13, 30),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 2
    }, {
        Id: 20,
        Subject: 'Decoding',
        StartTime: new Date(2018, 3, 10, 10, 30),
        EndTime: new Date(2018, 3, 10, 12, 30),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 2
    }, {
        Id: 21,
        Subject: 'workflow Analysis',
        StartTime: new Date(2018, 3, 11, 9, 30),
        EndTime: new Date(2018, 3, 11, 11, 30),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 1
    }, {
        Id: 22,
        Subject: 'Requirement planning',
        StartTime: new Date(2018, 3, 11, 12, 30),
        EndTime: new Date(2018, 3, 11, 14, 45),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 2
    }, {
        Id: 23,
        Subject: 'Quality Analysis',
        StartTime: new Date(2018, 3, 12, 10),
        EndTime: new Date(2018, 3, 12, 12, 30),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 1
    }, {
        Id: 24,
        Subject: 'Resource planning',
        StartTime: new Date(2018, 3, 12, 13),
        EndTime: new Date(2018, 3, 12, 14, 30),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 2
    }, {
        Id: 25,
        Subject: 'Timeline estimation',
        StartTime: new Date(2018, 3, 13, 9),
        EndTime: new Date(2018, 3, 13, 11),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 1
    }, {
        Id: 26,
        Subject: 'Developers Meeting',
        StartTime: new Date(2018, 3, 13, 14),
        EndTime: new Date(2018, 3, 13, 15, 45),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 2
    }, {
        Id: 27,
        Subject: 'Project Review',
        StartTime: new Date(2018, 3, 14, 11),
        EndTime: new Date(2018, 3, 14, 13),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 1
    }, {
        Id: 28,
        Subject: 'Manual testing',
        StartTime: new Date(2018, 3, 14, 9),
        EndTime: new Date(2018, 3, 14, 11, 30),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 2
    }, {
        Id: 29,
        Subject: 'Project Preview',
        StartTime: new Date(2018, 3, 15, 9, 30),
        EndTime: new Date(2018, 3, 15, 11),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 1
    }, {
        Id: 30,
        Subject: 'Cross-browser testing',
        StartTime: new Date(2018, 3, 15, 14),
        EndTime: new Date(2018, 3, 15, 16, 30),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 2
    }, {
        Id: 31,
        Subject: 'Bug Automation',
        StartTime: new Date(2018, 3, 16, 10),
        EndTime: new Date(2018, 3, 16, 11),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 1
    }, {
        Id: 32,
        Subject: 'Functionality testing',
        StartTime: new Date(2018, 3, 16, 9),
        EndTime: new Date(2018, 3, 16, 11, 30),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 2
    }, {
        Id: 33,
        Subject: 'Resolution-based testing',
        StartTime: new Date(2018, 3, 17, 14),
        EndTime: new Date(2018, 3, 17, 15),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 1
    }, {
        Id: 34,
        Subject: 'Test report Validation',
        StartTime: new Date(2018, 3, 17, 9),
        EndTime: new Date(2018, 3, 17, 11),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 2
    }, {
        Id: 35,
        Subject: 'Test case correction',
        StartTime: new Date(2018, 3, 18, 10),
        EndTime: new Date(2018, 3, 18, 11, 30),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 1
    }, {
        Id: 36,
        Subject: 'Run test cases',
        StartTime: new Date(2018, 3, 18, 10),
        EndTime: new Date(2018, 3, 18, 10, 30),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 2
    }, {
        Id: 37,
        Subject: 'Bug fixing',
        StartTime: new Date(2018, 3, 9, 10),
        EndTime: new Date(2018, 3, 9, 10, 30),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 1
    }, {
        Id: 38,
        Subject: 'Debugging',
        StartTime: new Date(2018, 3, 19, 9),
        EndTime: new Date(2018, 3, 19, 10, 30),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 2
    }, {
        Id: 39,
        Subject: 'Exception handling',
        StartTime: new Date(2018, 3, 20, 10),
        EndTime: new Date(2018, 3, 20, 11),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 1
    }, {
        Id: 40,
        Subject: 'Decoding',
        StartTime: new Date(2018, 3, 20, 10, 30),
        EndTime: new Date(2018, 3, 20, 12, 30),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 2
    }, {
        Id: 41,
        Subject: 'workflow Analysis',
        StartTime: new Date(2018, 3, 21, 9, 30),
        EndTime: new Date(2018, 3, 21, 11, 30),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 1
    }, {
        Id: 42,
        Subject: 'Requirement planning',
        StartTime: new Date(2018, 3, 21, 12, 30),
        EndTime: new Date(2018, 3, 21, 13, 45),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 2
    }, {
        Id: 43,
        Subject: 'Quality Analysis',
        StartTime: new Date(2018, 3, 22, 10),
        EndTime: new Date(2018, 3, 22, 11, 30),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 1
    }, {
        Id: 44,
        Subject: 'Resource planning',
        StartTime: new Date(2018, 3, 4, 10),
        EndTime: new Date(2018, 3, 4, 12, 30),
        IsAllDay: false,
        ProjectId: 3,
        TaskId: 2
    }, {
        Id: 45,
        Subject: 'Timeline estimation',
        StartTime: new Date(2018, 3, 4, 9),
        EndTime: new Date(2018, 3, 4, 11),
        IsAllDay: false,
        ProjectId: 3,
        TaskId: 1
    }, {
        Id: 46,
        Subject: 'Developers Meeting',
        StartTime: new Date(2018, 3, 4, 14, 30),
        EndTime: new Date(2018, 3, 4, 16, 30),
        IsAllDay: false,
        ProjectId: 3,
        TaskId: 2
    }, {
        Id: 47,
        Subject: 'Project Review',
        StartTime: new Date(2018, 3, 4, 14),
        EndTime: new Date(2018, 3, 4, 16),
        IsAllDay: false,
        ProjectId: 3,
        TaskId: 1
    }, {
        Id: 48,
        Subject: 'Manual testing',
        StartTime: new Date(2018, 3, 4, 17, 30),
        EndTime: new Date(2018, 3, 4, 19, 30),
        IsAllDay: false,
        ProjectId: 3,
        TaskId: 2
    }, {
        Id: 49,
        Subject: 'Project Preview',
        StartTime: new Date(2018, 3, 4, 18, 0),
        EndTime: new Date(2018, 3, 4, 20),
        IsAllDay: false,
        ProjectId: 3,
        TaskId: 1
    }, {
        Id: 50,
        Subject: 'Cross-browser testing',
        StartTime: new Date(2018, 3, 25, 14),
        EndTime: new Date(2018, 3, 25, 15, 30),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 2
    }, {
        Id: 51,
        Subject: 'Bug Automation',
        StartTime: new Date(2018, 3, 26, 10),
        EndTime: new Date(2018, 3, 26, 11),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 1
    }, {
        Id: 52,
        Subject: 'Functionality testing',
        StartTime: new Date(2018, 3, 26, 9),
        EndTime: new Date(2018, 3, 26, 11, 30),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 2
    }, {
        Id: 53,
        Subject: 'Resolution-based testing',
        StartTime: new Date(2018, 3, 27, 14),
        EndTime: new Date(2018, 3, 27, 15),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 1
    }, {
        Id: 54,
        Subject: 'Test report Validation',
        StartTime: new Date(2018, 3, 27, 9),
        EndTime: new Date(2018, 3, 27, 11),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 2
    }, {
        Id: 55,
        Subject: 'Test case correction',
        StartTime: new Date(2018, 3, 28, 10),
        EndTime: new Date(2018, 3, 28, 11, 30),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 1
    }, {
        Id: 56,
        Subject: 'Run test cases',
        StartTime: new Date(2018, 3, 28, 10),
        EndTime: new Date(2018, 3, 28, 10, 30),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 2
    }, {
        Id: 57,
        Subject: 'Bug fixing',
        StartTime: new Date(2018, 3, 29, 12),
        EndTime: new Date(2018, 3, 29, 12, 30),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 1
    }, {
        Id: 58,
        Subject: 'Debugging',
        StartTime: new Date(2018, 3, 29, 9),
        EndTime: new Date(2018, 3, 29, 10, 30),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 2
    }, {
        Id: 59,
        Subject: 'Exception handling',
        StartTime: new Date(2018, 3, 30, 10),
        EndTime: new Date(2018, 3, 30, 11),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 1
    }, {
        Id: 60,
        Subject: 'Decoding',
        StartTime: new Date(2018, 3, 30, 10, 30),
        EndTime: new Date(2018, 3, 30, 12, 30),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 2
    }
];

export let resourceData: Object[] = [
    {
        Id: 1,
        Subject: 'Workflow Analysis',
        StartTime: new Date(2018, 3, 1, 9, 30),
        EndTime: new Date(2018, 3, 1, 12, 0),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 2,
        Subject: 'Requirement planning',
        StartTime: new Date(2018, 3, 1, 12, 30),
        EndTime: new Date(2018, 3, 1, 14, 45),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 3,
        Subject: 'Quality Analysis',
        StartTime: new Date(2018, 3, 2, 10, 0),
        EndTime: new Date(2018, 3, 2, 12, 30),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 4,
        Subject: 'Resource planning',
        StartTime: new Date(2018, 3, 2, 13, 0),
        EndTime: new Date(2018, 3, 2, 15, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 5,
        Subject: 'Timeline estimation',
        StartTime: new Date(2018, 3, 3, 9, 0),
        EndTime: new Date(2018, 3, 3, 11, 30),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 6,
        Subject: 'Developers Meeting',
        StartTime: new Date(2018, 3, 3, 14, 0),
        EndTime: new Date(2018, 3, 3, 16, 45),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 7,
        Subject: 'Project Review',
        StartTime: new Date(2018, 3, 4, 11, 15),
        EndTime: new Date(2018, 3, 4, 13, 30),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 8,
        Subject: 'Manual testing',
        StartTime: new Date(2018, 3, 4, 9, 15),
        EndTime: new Date(2018, 3, 4, 11, 45),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 9,
        Subject: 'Project Preview',
        StartTime: new Date(2018, 3, 5, 9, 30),
        EndTime: new Date(2018, 3, 5, 12, 45),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 10,
        Subject: 'Cross-browser testing',
        StartTime: new Date(2018, 3, 5, 13, 45),
        EndTime: new Date(2018, 3, 5, 16, 30),
        IsAllDay: false,
        OwnerId: 2
    }, {
        Id: 11,
        Subject: 'Bug Automation',
        StartTime: new Date(2018, 3, 6, 10, 0),
        EndTime: new Date(2018, 3, 6, 12, 15),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 12,
        Subject: 'Functionality testing',
        StartTime: new Date(2018, 3, 6, 9, 0),
        EndTime: new Date(2018, 3, 6, 11, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 13,
        Subject: 'Resolution-based testing',
        StartTime: new Date(2018, 3, 7, 13, 0),
        EndTime: new Date(2018, 3, 7, 15, 15),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 14,
        Subject: 'Test report Validation',
        StartTime: new Date(2018, 3, 7, 9),
        EndTime: new Date(2018, 3, 7, 11),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 15,
        Subject: 'Test case correction',
        StartTime: new Date(2018, 3, 8, 9, 45),
        EndTime: new Date(2018, 3, 8, 11, 30),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 16,
        Subject: 'Run test cases',
        StartTime: new Date(2018, 3, 8, 10, 30),
        EndTime: new Date(2018, 3, 8, 13, 0),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 17,
        Subject: 'Quality Analysis',
        StartTime: new Date(2018, 3, 9, 12),
        EndTime: new Date(2018, 3, 9, 15, 30),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 18,
        Subject: 'Debugging',
        StartTime: new Date(2018, 3, 9, 9, 0),
        EndTime: new Date(2018, 3, 9, 11, 15),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 19,
        Subject: 'Exception handling',
        StartTime: new Date(2018, 3, 10, 10, 10),
        EndTime: new Date(2018, 3, 10, 13, 30),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 20,
        Subject: 'Decoding',
        StartTime: new Date(2018, 3, 10, 10, 30),
        EndTime: new Date(2018, 3, 10, 12, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 21,
        Subject: 'workflow Analysis',
        StartTime: new Date(2018, 3, 11, 9, 30),
        EndTime: new Date(2018, 3, 11, 11, 30),
        IsAllDay: false,
        OwnerId: 3,
        RoomId: 1
    }, {
        Id: 22,
        Subject: 'Requirement planning',
        StartTime: new Date(2018, 3, 11, 12, 30),
        EndTime: new Date(2018, 3, 11, 14, 45),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 23,
        Subject: 'Quality Analysis',
        StartTime: new Date(2018, 3, 12, 10),
        EndTime: new Date(2018, 3, 12, 12, 30),
        IsAllDay: false,
        OwnerId: 3,
        RoomId: 1
    }, {
        Id: 24,
        Subject: 'Resource planning',
        StartTime: new Date(2018, 3, 12, 13),
        EndTime: new Date(2018, 3, 12, 14, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 25,
        Subject: 'Timeline estimation',
        StartTime: new Date(2018, 3, 13, 9),
        EndTime: new Date(2018, 3, 13, 11),
        IsAllDay: false,
        OwnerId: 3,
        RoomId: 1
    }, {
        Id: 26,
        Subject: 'Developers Meeting',
        StartTime: new Date(2018, 3, 13, 14),
        EndTime: new Date(2018, 3, 13, 15, 45),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 27,
        Subject: 'Project Review',
        StartTime: new Date(2018, 3, 14, 11),
        EndTime: new Date(2018, 3, 14, 13),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 28,
        Subject: 'Manual testing',
        StartTime: new Date(2018, 3, 14, 9),
        EndTime: new Date(2018, 3, 14, 11, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 29,
        Subject: 'Project Preview',
        StartTime: new Date(2018, 3, 15, 9, 30),
        EndTime: new Date(2018, 3, 15, 11),
        IsAllDay: false,
        OwnerId: 3,
        RoomId: 1
    }, {
        Id: 30,
        Subject: 'Cross-browser testing',
        StartTime: new Date(2018, 3, 15, 14),
        EndTime: new Date(2018, 3, 15, 16, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 31,
        Subject: 'Bug Automation',
        StartTime: new Date(2018, 3, 16, 10),
        EndTime: new Date(2018, 3, 16, 11),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 32,
        Subject: 'Functionality testing',
        StartTime: new Date(2018, 3, 16, 9),
        EndTime: new Date(2018, 3, 16, 11, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 33,
        Subject: 'Resolution-based testing',
        StartTime: new Date(2018, 3, 17, 14),
        EndTime: new Date(2018, 3, 17, 15),
        IsAllDay: false,
        OwnerId: 3,
        RoomId: 1
    }, {
        Id: 34,
        Subject: 'Test report Validation',
        StartTime: new Date(2018, 3, 17, 9),
        EndTime: new Date(2018, 3, 17, 11),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 35,
        Subject: 'Test case correction',
        StartTime: new Date(2018, 3, 18, 10),
        EndTime: new Date(2018, 3, 18, 11, 30),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 36,
        Subject: 'Run test cases',
        StartTime: new Date(2018, 3, 18, 10),
        EndTime: new Date(2018, 3, 18, 10, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 37,
        Subject: 'Bug fixing',
        StartTime: new Date(2018, 3, 9, 10),
        EndTime: new Date(2018, 3, 9, 10, 30),
        IsAllDay: false,
        OwnerId: 3,
        RoomId: 1
    }, {
        Id: 38,
        Subject: 'Debugging',
        StartTime: new Date(2018, 3, 19, 9),
        EndTime: new Date(2018, 3, 19, 10, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 39,
        Subject: 'Exception handling',
        StartTime: new Date(2018, 3, 20, 10),
        EndTime: new Date(2018, 3, 20, 11),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 40,
        Subject: 'Decoding',
        StartTime: new Date(2018, 3, 20, 10, 30),
        EndTime: new Date(2018, 3, 20, 12, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 41,
        Subject: 'workflow Analysis',
        StartTime: new Date(2018, 3, 21, 9, 30),
        EndTime: new Date(2018, 3, 21, 11, 30),
        IsAllDay: false,
        OwnerId: 1, RoomId: 1
    }, {
        Id: 42,
        Subject: 'Requirement planning',
        StartTime: new Date(2018, 3, 21, 12, 30),
        EndTime: new Date(2018, 3, 21, 13, 45),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 43,
        Subject: 'Quality Analysis',
        StartTime: new Date(2018, 3, 22, 10),
        EndTime: new Date(2018, 3, 22, 11, 30),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 44,
        Subject: 'Resource planning',
        StartTime: new Date(2018, 3, 22, 13),
        EndTime: new Date(2018, 3, 22, 14, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 45,
        Subject: 'Timeline estimation',
        StartTime: new Date(2018, 3, 23, 9),
        EndTime: new Date(2018, 3, 23, 10),
        IsAllDay: false,
        OwnerId: 3,
        RoomId: 1
    }, {
        Id: 46,
        Subject: 'Developers Meeting',
        StartTime: new Date(2018, 3, 23, 14),
        EndTime: new Date(2018, 3, 23, 15, 45),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 47,
        Subject: 'Project Review',
        StartTime: new Date(2018, 3, 24, 11),
        EndTime: new Date(2018, 3, 24, 12),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 48,
        Subject: 'Manual testing',
        StartTime: new Date(2018, 3, 24, 9),
        EndTime: new Date(2018, 3, 24, 11, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 49,
        Subject: 'Project Preview',
        StartTime: new Date(2018, 3, 25, 9, 30),
        EndTime: new Date(2018, 3, 25, 11),
        IsAllDay: false,
        OwnerId: 3,
        RoomId: 1
    }, {
        Id: 50,
        Subject: 'Cross-browser testing',
        StartTime: new Date(2018, 3, 25, 14),
        EndTime: new Date(2018, 3, 25, 15, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 51,
        Subject: 'Bug Automation',
        StartTime: new Date(2018, 3, 26, 10),
        EndTime: new Date(2018, 3, 26, 11),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 52,
        Subject: 'Functionality testing',
        StartTime: new Date(2018, 3, 26, 9),
        EndTime: new Date(2018, 3, 26, 11, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 53,
        Subject: 'Resolution-based testing',
        StartTime: new Date(2018, 3, 27, 14),
        EndTime: new Date(2018, 3, 27, 15),
        IsAllDay: false,
        OwnerId: 3,
        RoomId: 1
    }, {
        Id: 54,
        Subject: 'Test report Validation',
        StartTime: new Date(2018, 3, 27, 9),
        EndTime: new Date(2018, 3, 27, 11),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 55,
        Subject: 'Test case correction',
        StartTime: new Date(2018, 3, 28, 10),
        EndTime: new Date(2018, 3, 28, 11, 30),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 56,
        Subject: 'Run test cases',
        StartTime: new Date(2018, 3, 28, 10),
        EndTime: new Date(2018, 3, 28, 10, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 57,
        Subject: 'Bug fixing',
        StartTime: new Date(2018, 3, 29, 12),
        EndTime: new Date(2018, 3, 29, 12, 30),
        IsAllDay: false,
        OwnerId: 3,
        RoomId: 1
    }, {
        Id: 58,
        Subject: 'Debugging',
        StartTime: new Date(2018, 3, 29, 9),
        EndTime: new Date(2018, 3, 29, 10, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 59,
        Subject: 'Exception handling',
        StartTime: new Date(2018, 3, 30, 10),
        EndTime: new Date(2018, 3, 30, 11),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 60,
        Subject: 'Decoding',
        StartTime: new Date(2018, 3, 30, 10, 30),
        EndTime: new Date(2018, 3, 30, 12, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }
];
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Grouping single-level resources

This kind of grouping allows the Scheduler to display all the resources at a single level simultaneously. The appointments mapped under resources will be displayed with the colors as per the colorField defined on the resources collection.

Example: To display the Scheduler with single level resource grouping,

Source
Preview
app.component.ts
app.module.ts
datasource.ts
main.ts
Copied to clipboard
import { Component } from '@angular/core';
import {
    WeekService, MonthService, AgendaService, TimelineViewsService, TimelineMonthService, EventSettingsModel, GroupModel
} from '@syncfusion/ej2-angular-schedule';
import { resourceData } from './datasource.ts';

@Component({
    selector: "app-root",
    providers: [WeekService, MonthService, AgendaService, TimelineViewsService, TimelineMonthService],
    // specifies the template string for the Schedule component
    template: `
    <ejs-schedule width="100%" height="550px" [selectedDate]="selectedDate" [views]="views"
      [eventSettings]="eventSettings" [group]='group'>
      <e-resources>
        <e-resource field="OwnerId" title="Owner" name="Owners"
          [dataSource]="ownerDataSource" [allowMultiple]="allowMultipleCategory"
          textField='OwnerText' idField='Id' colorField='OwnerColor'>
        </e-resource>
      </e-resources>
    </ejs-schedule>`
})
export class AppComponent {
    public selectedDate: Date = new Date(2018, 3, 1);
    public views: Array<string> = ['Week', 'Month', 'TimelineWeek', 'TimelineMonth', 'Agenda'];
    public eventSettings: EventSettingsModel = {
        dataSource: resourceData
    };
    public group: GroupModel = {
        resources: ['Owners']
    };
    public allowMultipleOwner: Boolean = true;
    public ownerDataSource: Object[] = [
        { OwnerText: 'Nancy', Id: 1, OwnerColor: '#ffaa00' },
        { OwnerText: 'Steven', Id: 2, OwnerColor: '#f8a398' },
        { OwnerText: 'Michael', Id: 3, OwnerColor: '#7499e1' }
    ];
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ScheduleModule } from '@syncfusion/ej2-angular-schedule';
import { TimePickerModule } from '@syncfusion/ej2-angular-calendars';
import { DayService, WeekService, WorkWeekService, MonthService, AgendaService, MonthAgendaService} from '@syncfusion/ej2-angular-schedule';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        ScheduleModule,
        TimePickerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [DayService, 
                WeekService, 
                WorkWeekService, 
                MonthService,
                AgendaService,
                MonthAgendaService]
})
export class AppModule { }
Copied to clipboard
/**
 * Schedule datasource spec
 */

export let resourceData: Object[] = [
    {
        Id: 1,
        Subject: 'Workflow Analysis',
        StartTime: new Date(2018, 3, 1, 9, 30),
        EndTime: new Date(2018, 3, 1, 12, 0),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 2,
        Subject: 'Requirement planning',
        StartTime: new Date(2018, 3, 1, 12, 30),
        EndTime: new Date(2018, 3, 1, 14, 45),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 3,
        Subject: 'Quality Analysis',
        StartTime: new Date(2018, 3, 2, 10, 0),
        EndTime: new Date(2018, 3, 2, 12, 30),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 4,
        Subject: 'Resource planning',
        StartTime: new Date(2018, 3, 2, 13, 0),
        EndTime: new Date(2018, 3, 2, 15, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 5,
        Subject: 'Timeline estimation',
        StartTime: new Date(2018, 3, 3, 9, 0),
        EndTime: new Date(2018, 3, 3, 11, 30),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 6,
        Subject: 'Developers Meeting',
        StartTime: new Date(2018, 3, 3, 14, 0),
        EndTime: new Date(2018, 3, 3, 16, 45),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 7,
        Subject: 'Project Review',
        StartTime: new Date(2018, 3, 4, 11, 15),
        EndTime: new Date(2018, 3, 4, 13, 30),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 8,
        Subject: 'Manual testing',
        StartTime: new Date(2018, 3, 4, 9, 15),
        EndTime: new Date(2018, 3, 4, 11, 45),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 9,
        Subject: 'Project Preview',
        StartTime: new Date(2018, 3, 5, 9, 30),
        EndTime: new Date(2018, 3, 5, 12, 45),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 10,
        Subject: 'Cross-browser testing',
        StartTime: new Date(2018, 3, 5, 13, 45),
        EndTime: new Date(2018, 3, 5, 16, 30),
        IsAllDay: false,
        OwnerId: 2
    }, {
        Id: 11,
        Subject: 'Bug Automation',
        StartTime: new Date(2018, 3, 6, 10, 0),
        EndTime: new Date(2018, 3, 6, 12, 15),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 12,
        Subject: 'Functionality testing',
        StartTime: new Date(2018, 3, 6, 9, 0),
        EndTime: new Date(2018, 3, 6, 11, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId