{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "scheduler-timeline-grouping",
  "framework": "vue",
  "type": "registry:component",
  "component": "Scheduler",
  "variant": "timeline-grouping",
  "dependencies": [
    "@syncfusion/ej2-vue-schedule"
  ],
  "description": "Scheduler uses a timeline view with multi-level resource grouping by project.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/vue/llms.txt",
    "skillPack": "syncfusion/vue-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/vue/scheduler-timeline-grouping.md"
  },
  "files": [
    {
      "target": "src/components/scheduler-timeline-grouping/Scheduler.vue",
      "content": "<template>\n    <div class=\"schedule-vue-sample\">\n        <div class=\"col-md-12 control-section\">\n            <div class=\"content-wrapper\">\n                <ejs-schedule id='Schedule' height=\"650px\" :selectedDate='selectedDate' :currentView='currentView' :workDays='workDays' :eventSettings='eventSettings'\n                    :group='group'>\n                    <e-views>\n                        <e-view option=\"TimelineDay\"></e-view>\n                        <e-view option=\"TimelineWeek\"></e-view>\n                        <e-view option=\"TimelineWorkWeek\"></e-view>\n                        <e-view option=\"TimelineMonth\"></e-view>\n                        <e-view option=\"Agenda\"></e-view>\n                    </e-views>\n                    <e-resources>\n                        <e-resource field='ProjectId' title='Choose Project' name='Projects' :dataSource='projectResourceDataSource' textField='text'\n                            idField='id' colorField='color'>\n                        </e-resource>\n                        <e-resource field='TaskId' title='Employee' name='Employees' :dataSource='employeeDataSource' :allowMultiple='allowMultiple'\n                            textField='text' idField='id' groupIDField='groupId' colorField='color'>\n                        </e-resource>\n                    </e-resources>    \n                </ejs-schedule>\n            </div>\n        </div>\n    </div>\n</template>\n<style>\n    .schedule-vue-sample .e-schedule:not(.e-device) .e-agenda-view .e-content-wrap table td:first-child {\n        width: 90px;\n    }\n\n    .schedule-vue-sample .e-schedule .e-agenda-view .e-resource-column {\n        width: 100px;\n    }\n</style>\n\n<script>\n    import { ScheduleComponent, ViewDirective, ViewsDirective, ResourceDirective, ResourcesDirective, Agenda, TimelineViews, TimelineMonth, Resize, DragAndDrop } from \"@syncfusion/ej2-vue-schedule\";\n\n    const resourceData = [\n    {\n        Id: 1,\n        Subject: 'Workflow Analysis',\n        StartTime: new Date(2023, 0, 1, 9, 30),\n        EndTime: new Date(2023, 0, 1, 12, 0),\n        IsAllDay: false,\n        ProjectId: 1,\n        TaskId: 2\n    }, {\n        Id: 2,\n        Subject: 'Requirement planning',\n        StartTime: new Date(2023, 0, 1, 12, 30),\n        EndTime: new Date(2023, 0, 1, 14, 45),\n        IsAllDay: false,\n        ProjectId: 1,\n        TaskId: 1\n    }, {\n        Id: 3,\n        Subject: 'Quality Analysis',\n        StartTime: new Date(2023, 0, 2, 10, 0),\n        EndTime: new Date(2023, 0, 2, 12, 30),\n        IsAllDay: false,\n        ProjectId: 1,\n        TaskId: 1\n    }\n];\n\nconst timelineResourceData = [\n    {\n        Id: 61,\n        Subject: 'Decoding',\n        StartTime: new Date(2023, 0, 4, 9, 30),\n        EndTime: new Date(2023, 0, 4, 10, 30),\n        IsAllDay: false,\n        ProjectId: 2,\n        TaskId: 2\n    }, {\n        Id: 62,\n        Subject: 'Bug Automation',\n        StartTime: new Date(2023, 0, 4, 16, 0),\n        EndTime: new Date(2023, 0, 4, 20, 0),\n        IsAllDay: false,\n        ProjectId: 2,\n        TaskId: 1\n    }, {\n        Id: 63,\n        Subject: 'Functionality testing',\n        StartTime: new Date(2023, 0, 4, 9),\n        EndTime: new Date(2023, 0, 4, 10, 30),\n        IsAllDay: false,\n        ProjectId: 1,\n        TaskId: 1\n    }\n];\n    \n    export default {\n        components: {\n          'ejs-schedule': ScheduleComponent,\n          'e-view': ViewDirective,\n          'e-views': ViewsDirective,\n          'e-resource': ResourceDirective,\n          'e-resources': ResourcesDirective\n        },\n        data: function () {\n            return {\n                eventSettings: {\n                    dataSource: this.generateData()\n                },\n                selectedDate: new Date(2023, 0, 4),\n                currentView: 'TimelineWeek',\n                workDays: [0, 1, 2, 3, 4, 5],\n                allowMultiple : true,\n                group: {\n                    resources: ['Projects', 'Employees']\n                },\n                projectResourceDataSource: [\n                    { text: 'PROJECT 1', id: 1, color: '#cb6bb2' },\n                    { text: 'PROJECT 2', id: 2, color: '#56ca85' },\n                    { text: 'PROJECT 3', id: 3, color: '#df5286' }\n                ],\n                employeeDataSource: [\n                    { text: 'Nancy', id: 1, groupId: 1, color: '#df5286' },\n                    { text: 'Steven', id: 2, groupId: 1, color: '#7fa900' },\n                    { text: 'Robert', id: 3, groupId: 2, color: '#ea7a57' },\n                    { text: 'Smith', id: 4, groupId: 2, color: '#5978ee' },\n                    { text: 'Michael', id: 5, groupId: 3, color: '#df5286' },\n                    { text: 'Root', id: 6, groupId: 3, color: '#00bdae' }\n                ],\n            }\n        },\n        provide: {\n            schedule: [Agenda, TimelineViews, TimelineMonth, Resize, DragAndDrop]\n        },\n        methods: {\n            generateData: function () {\n                var collections = [];\n                var dataCollections = [resourceData, timelineResourceData];\n                for (var i = 0; i < dataCollections.length; i++) {\n                    collections = collections.concat(dataCollections[i]);\n                }\n                return collections;\n            }\n        }\n    }\n</script>"
    },
    {
      "target": "src/components/scheduler-timeline-grouping/SchedulerView.vue",
      "content": "<template>\n  <Scheduler />\n</template>\n\n<script setup>\nimport Scheduler from '../../components/Scheduler.vue'\n</script>"
    }
  ]
}