# scheduler-timeline-grouping

> Scheduler uses a timeline view with multi-level resource grouping by project.

**Framework:** react  **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/react/ts/scheduler-timeline-grouping.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-react-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/Scheduler.tsx

```tsx
import { TimelineViews, TimelineMonth, Agenda, ScheduleComponent, ViewsDirective, ViewDirective, ResourcesDirective, ResourceDirective, Inject, Resize, DragAndDrop } from '@syncfusion/ej2-react-schedule';
import { extend } from '@syncfusion/ej2-base';

/**
 * schedule timeline resource grouping sample
 */
let datasource = [
    { "Id": 1, "Subject": "Workflow Analysis", "StartTime": "2023-01-01T04:00:00.000Z", "EndTime": "2023-01-01T06:30:00.000Z", "IsAllDay": false, "ProjectId": 1, "TaskId": 2 },
    { "Id": 2, "Subject": "Requirement planning", "StartTime": "2023-01-01T07:00:00.000Z", "EndTime": "2023-01-01T09:15:00.000Z", "IsAllDay": false, "ProjectId": 1, "TaskId": 1 },
    { "Id": 3, "Subject": "Quality Analysis", "StartTime": "2023-01-02T04:30:00.000Z", "EndTime": "2023-01-02T07:00:00.000Z", "IsAllDay": false, "ProjectId": 1, "TaskId": 1 },
    { "Id": 4, "Subject": "Resource planning", "StartTime": "2023-01-02T07:30:00.000Z", "EndTime": "2023-01-02T10:00:00.000Z", "IsAllDay": false, "ProjectId": 2, "TaskId": 2 },
    { "Id": 5, "Subject": "Timeline estimation", "StartTime": "2023-01-03T03:30:00.000Z", "EndTime": "2023-01-03T06:00:00.000Z", "IsAllDay": false, "ProjectId": 1, "TaskId": 1 },
    { "Id": 6, "Subject": "Developers Meeting", "StartTime": "2023-01-03T03:30:00.000Z", "EndTime": "2023-01-03T06:00:00.000Z", "IsAllDay": false, "ProjectId": 1, "TaskId": 2 },
    { "Id": 7, "Subject": "Project Review", "StartTime": "2023-01-04T05:45:00.000Z", "EndTime": "2023-01-04T07:30:00.000Z", "IsAllDay": false, "ProjectId": 2, "TaskId": 1 },
    { "Id": 8, "Subject": "Manual testing", "StartTime": "2023-01-04T03:45:00.000Z", "EndTime": "2023-01-04T06:15:00.000Z", "IsAllDay": false, "ProjectId": 1, "TaskId": 2 },
    { "Id": 9, "Subject": "Project Preview", "StartTime": "2023-01-05T04:00:00.000Z", "EndTime": "2023-01-05T07:15:00.000Z", "IsAllDay": false, "ProjectId": 2, "TaskId": 1 },
    { "Id": 10, "Subject": "Cross-browser testing", "StartTime": "2023-01-05T08:15:00.000Z", "EndTime": "2023-01-05T11:00:00.000Z", "IsAllDay": false, "ProjectId": 2, "TaskId": 2 },
    { "Id": 61, "Subject": "Decoding", "StartTime": "2023-01-04T04:00:00.000Z", "EndTime": "2023-01-04T05:00:00.000Z", "IsAllDay": false, "ProjectId": 2, "TaskId": 2 },
    { "Id": 62, "Subject": "Bug Automation", "StartTime": "2023-01-04T10:30:00.000Z", "EndTime": "2023-01-04T14:30:00.000Z", "IsAllDay": false, "ProjectId": 2, "TaskId": 1 },
    { "Id": 63, "Subject": "Functionality testing", "StartTime": "2023-01-04T03:30:00.000Z", "EndTime": "2023-01-04T05:00:00.000Z", "IsAllDay": false, "ProjectId": 1, "TaskId": 1 },
    { "Id": 64, "Subject": "Resolution-based testing", "StartTime": "2023-01-04T06:30:00.000Z", "EndTime": "2023-01-04T09:30:00.000Z", "IsAllDay": false, "ProjectId": 2, "TaskId": 4 },
    { "Id": 65, "Subject": "Test report validation", "StartTime": "2023-01-04T09:30:00.000Z", "EndTime": "2023-01-04T12:30:00.000Z", "IsAllDay": false, "ProjectId": 1, "TaskId": 1 },
    { "Id": 66, "Subject": "Test case correction", "StartTime": "2023-01-04T08:30:00.000Z", "EndTime": "2023-01-04T10:30:00.000Z", "IsAllDay": false, "ProjectId": 3, "TaskId": 6 },
    { "Id": 67, "Subject": "Bug fixing", "StartTime": "2023-01-04T09:00:00.000Z", "EndTime": "2023-01-04T13:00:00.000Z", "IsAllDay": false, "ProjectId": 3, "TaskId": 5 },
    { "Id": 68, "Subject": "Run test cases", "StartTime": "2023-01-04T12:00:00.000Z", "EndTime": "2023-01-04T14:00:00.000Z", "IsAllDay": false, "ProjectId": 2, "TaskId": 4 },
    { "Id": 70, "Subject": "Bug Automation", "StartTime": "2023-01-04T10:30:00.000Z", "EndTime": "2023-01-04T14:30:00.000Z", "IsAllDay": false, "ProjectId": 2, "TaskId": 3 }
];

const TimelineGrouping = () => {
    const data: Record<string, any>[] = extend([], datasource, null, true) as Record<string, any>[];
    const workDays: number[] = [0, 1, 2, 3, 4, 5];
    const projectData: Record<string, any>[] = [
        { text: 'PROJECT 1', id: 1, color: '#cb6bb2' },
        { text: 'PROJECT 2', id: 2, color: '#56ca85' },
        { text: 'PROJECT 3', id: 3, color: '#df5286' }
    ];
    const categoryData: 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' }
    ];

    return (
        <div className='schedule-control-section'>
            <div className='col-lg-12 control-section'>
                <div className='control-wrapper'>
                    <ScheduleComponent cssClass='timeline-resource-grouping' width='100%' height='650px' selectedDate={new Date(2023, 0, 4)} currentView='TimelineWeek' workDays={workDays} eventSettings={{ dataSource: data }} group={{ resources: ['Projects', 'Categories'] }} >
                        <ResourcesDirective>
                            <ResourceDirective field='ProjectId' title='Choose Project' name='Projects' allowMultiple={false} dataSource={projectData} textField='text' idField='id' colorField='color' />
                            <ResourceDirective field='TaskId' title='Category' name='Categories' allowMultiple={true} dataSource={categoryData} textField='text' idField='id' groupIDField='groupId' colorField='color' />
                        </ResourcesDirective>
                        <ViewsDirective>
                            <ViewDirective option='TimelineDay' />
                            <ViewDirective option='TimelineWeek' />
                            <ViewDirective option='TimelineWorkWeek' />
                            <ViewDirective option='TimelineMonth' />
                            <ViewDirective option='Agenda' />
                        </ViewsDirective>
                        <Inject services={[TimelineViews, TimelineMonth, Agenda, Resize, DragAndDrop]} />
                    </ScheduleComponent>
                </div>
            </div>
        </div>
    );
}
export default TimelineGrouping;
```