# scheduler-timeline-grouping

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

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

**Install Package(s)**

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

```vue
<template>
    <div class="schedule-vue-sample">
        <div class="col-md-12 control-section">
            <div class="content-wrapper">
                <ejs-schedule id='Schedule' height="650px" :selectedDate='selectedDate' :currentView='currentView' :workDays='workDays' :eventSettings='eventSettings'
                    :group='group'>
                    <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>
                    <e-resources>
                        <e-resource field='ProjectId' title='Choose Project' name='Projects' :dataSource='projectResourceDataSource' textField='text'
                            idField='id' colorField='color'>
                        </e-resource>
                        <e-resource field='TaskId' title='Employee' name='Employees' :dataSource='employeeDataSource' :allowMultiple='allowMultiple'
                            textField='text' idField='id' groupIDField='groupId' colorField='color'>
                        </e-resource>
                    </e-resources>    
                </ejs-schedule>
            </div>
        </div>
    </div>
</template>
<style>
    .schedule-vue-sample .e-schedule:not(.e-device) .e-agenda-view .e-content-wrap table td:first-child {
        width: 90px;
    }

    .schedule-vue-sample .e-schedule .e-agenda-view .e-resource-column {
        width: 100px;
    }
</style>

<script>
    import { ScheduleComponent, ViewDirective, ViewsDirective, ResourceDirective, ResourcesDirective, Agenda, TimelineViews, TimelineMonth, Resize, DragAndDrop } from "@syncfusion/ej2-vue-schedule";

    const resourceData = [
    {
        Id: 1,
        Subject: 'Workflow Analysis',
        StartTime: new Date(2023, 0, 1, 9, 30),
        EndTime: new Date(2023, 0, 1, 12, 0),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 2
    }, {
        Id: 2,
        Subject: 'Requirement planning',
        StartTime: new Date(2023, 0, 1, 12, 30),
        EndTime: new Date(2023, 0, 1, 14, 45),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 1
    }, {
        Id: 3,
        Subject: 'Quality Analysis',
        StartTime: new Date(2023, 0, 2, 10, 0),
        EndTime: new Date(2023, 0, 2, 12, 30),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 1
    }
];

const timelineResourceData = [
    {
        Id: 61,
        Subject: 'Decoding',
        StartTime: new Date(2023, 0, 4, 9, 30),
        EndTime: new Date(2023, 0, 4, 10, 30),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 2
    }, {
        Id: 62,
        Subject: 'Bug Automation',
        StartTime: new Date(2023, 0, 4, 16, 0),
        EndTime: new Date(2023, 0, 4, 20, 0),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 1
    }, {
        Id: 63,
        Subject: 'Functionality testing',
        StartTime: new Date(2023, 0, 4, 9),
        EndTime: new Date(2023, 0, 4, 10, 30),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 1
    }
];
    
    export default {
        components: {
          'ejs-schedule': ScheduleComponent,
          'e-view': ViewDirective,
          'e-views': ViewsDirective,
          'e-resource': ResourceDirective,
          'e-resources': ResourcesDirective
        },
        data: function () {
            return {
                eventSettings: {
                    dataSource: this.generateData()
                },
                selectedDate: new Date(2023, 0, 4),
                currentView: 'TimelineWeek',
                workDays: [0, 1, 2, 3, 4, 5],
                allowMultiple : true,
                group: {
                    resources: ['Projects', 'Employees']
                },
                projectResourceDataSource: [
                    { text: 'PROJECT 1', id: 1, color: '#cb6bb2' },
                    { text: 'PROJECT 2', id: 2, color: '#56ca85' },
                    { text: 'PROJECT 3', id: 3, color: '#df5286' }
                ],
                employeeDataSource: [
                    { 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' }
                ],
            }
        },
        provide: {
            schedule: [Agenda, TimelineViews, TimelineMonth, Resize, DragAndDrop]
        },
        methods: {
            generateData: function () {
                var collections = [];
                var dataCollections = [resourceData, timelineResourceData];
                for (var i = 0; i < dataCollections.length; i++) {
                    collections = collections.concat(dataCollections[i]);
                }
                return collections;
            }
        }
    }
</script>
```

### src/components/scheduler-timeline-grouping/SchedulerView.vue

```vue
<template>
  <Scheduler />
</template>

<script setup>
import Scheduler from '../../components/Scheduler.vue'
</script>
```