# scheduler-timeline-grouping

> Timeline scheduler grouped by project and category with multi-resource rows across all-day bars.

**Framework:** angular  **Component:** Scheduler  **Variant:** timeline-grouping

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/angular/scheduler-timeline-grouping.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-angular-schedule
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/scheduler-timeline-grouping/timeline-resource-grouping.component.ts

```typescript
import { Component, ViewEncapsulation } from '@angular/core';
import { extend } from '@syncfusion/ej2-base';
import { TimelineViewsService, AgendaService, GroupModel, EventSettingsModel, ResizeService, DragAndDropService, ScheduleModule } from '@syncfusion/ej2-angular-schedule';
import { timelineResourceData, resourceData } from '../data';

@Component({
    // tslint:disable-next-line:component-selector
    selector: 'control-content',
    templateUrl: 'timeline-resource-grouping.html',
    styles: [`
    .timeline-resource-grouping.e-schedule:not(.e-device) .e-agenda-view .e-content-wrap table td:first-child {
        width: 90px;
    }
    .timeline-resource-grouping.e-schedule .e-agenda-view .e-resource-column {
        width: 100px;
    }
    `],
    encapsulation: ViewEncapsulation.None,
    providers: [TimelineViewsService, AgendaService, ResizeService, DragAndDropService],
    standalone: true,
    imports: [ScheduleModule]
})

export class TimelineResourceGroupingComponent {
  public selectedDate: Date = new Date(2023, 0, 4);
  public workDays: number[] = [0, 1, 2, 3, 4, 5];
  public group: GroupModel = {
    resources: ['Projects', 'Categories']
  };
  public projectDataSource: Record<string, any>[] = [
    { text: 'PROJECT 1', id: 1, color: '#cb6bb2' },
    { text: 'PROJECT 2', id: 2, color: '#56ca85' },
    { text: 'PROJECT 3', id: 3, color: '#df5286' }
  ];
  public categoryDataSource: Record<string, any>[] = [
    { text: 'Nancy', id: 1, groupId: 1, color: '#df5286' },
    { text: 'Steven', id: 2, groupId: 1, color: '#7fa900' },
    { text: 'Robert', id: 3, groupId: 2, color: '#ea7a57' },
    { text: 'Smith', id: 4, groupId: 2, color: '#5978ee' },
    { text: 'Michael', id: 5, groupId: 3, color: '#df5286' },
    { text: 'Root', id: 6, groupId: 3, color: '#00bdae' }
  ];
  public allowMultiple = true;
  public eventSettings: EventSettingsModel = {
    dataSource: extend([], resourceData.concat(timelineResourceData) as object[], undefined, true) as Record<string, any>[]
  };

}

```

### src/components/scheduler-timeline-grouping/timeline-resource-grouping.html

```html
<div class="control-section">
  <div class="col-lg-12 content-wrapper">
    <ejs-schedule #scheduleObj width='100%' cssClass='timeline-resource-grouping' height='650px'
      [selectedDate]="selectedDate" [group]="group" [workDays]="workDays" [eventSettings]="eventSettings">
      <e-resources>
        <e-resource field='ProjectId' title='Choose Project' [dataSource]='projectDataSource'
          [allowMultiple]='allowMultiple' name='Projects' textField='text' idField='id' colorField='color'>
        </e-resource>
        <e-resource field='TaskId' title='Category' [dataSource]='categoryDataSource' [allowMultiple]='allowMultiple'
          name='Categories' textField='text' idField='id' groupIDField='groupId' colorField='color'>
        </e-resource>
      </e-resources>
      <e-views>
        <e-view option="TimelineDay"></e-view>
        <e-view option="TimelineWeek"></e-view>
        <e-view option="TimelineWorkWeek"></e-view>
        <e-view option="TimelineMonth"></e-view>
        <e-view option="Agenda"></e-view>
      </e-views>
    </ejs-schedule>
  </div>
</div>

```