{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "scheduler-timeline-grouping",
  "framework": "react",
  "type": "registry:component",
  "component": "Scheduler",
  "variant": "timeline-grouping",
  "dependencies": [
    "@syncfusion/ej2-react-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/react/llms.txt",
    "skillPack": "syncfusion/react-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/react/js/scheduler-timeline-grouping.md"
  },
  "files": [
    {
      "target": "src/components/scheduler-timeline-grouping/Scheduler.jsx",
      "content": "import { TimelineViews, TimelineMonth, Agenda, ScheduleComponent, ViewsDirective, ViewDirective, ResourcesDirective, ResourceDirective, Inject, Resize, DragAndDrop } from '@syncfusion/ej2-react-schedule';\nimport { extend } from '@syncfusion/ej2-base';\n/**\n * schedule timeline resource grouping sample\n */\nlet datasource = [\n    { \"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 },\n    { \"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 },\n    { \"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 },\n    { \"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 },\n    { \"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 },\n    { \"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 },\n    { \"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 },\n    { \"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 },\n    { \"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 },\n    { \"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 },\n    { \"Id\": 61, \"Subject\": \"Decoding\", \"StartTime\": \"2023-01-04T04:00:00.000Z\", \"EndTime\": \"2023-01-04T05:00:00.000Z\", \"IsAllDay\": false, \"ProjectId\": 2, \"TaskId\": 2 },\n    { \"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 },\n    { \"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 },\n    { \"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 },\n    { \"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 },\n    { \"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 },\n    { \"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 },\n    { \"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 },\n    { \"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 }\n];\n\nconst TimelineGrouping = () => {\n    const data = extend([], datasource, null, true);\n    const workDays = [0, 1, 2, 3, 4, 5];\n    const projectData = [\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    const categoryData = [\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    return (<div className='schedule-control-section'>\n            <div className='col-lg-12 control-section'>\n                <div className='control-wrapper'>\n                    <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'] }}>\n                        <ResourcesDirective>\n                            <ResourceDirective field='ProjectId' title='Choose Project' name='Projects' allowMultiple={false} dataSource={projectData} textField='text' idField='id' colorField='color'/>\n                            <ResourceDirective field='TaskId' title='Category' name='Categories' allowMultiple={true} dataSource={categoryData} textField='text' idField='id' groupIDField='groupId' colorField='color'/>\n                        </ResourcesDirective>\n                        <ViewsDirective>\n                            <ViewDirective option='TimelineDay'/>\n                            <ViewDirective option='TimelineWeek'/>\n                            <ViewDirective option='TimelineWorkWeek'/>\n                            <ViewDirective option='TimelineMonth'/>\n                            <ViewDirective option='Agenda'/>\n                        </ViewsDirective>\n                        <Inject services={[TimelineViews, TimelineMonth, Agenda, Resize, DragAndDrop]}/>\n                    </ScheduleComponent>\n                </div>\n            </div>\n        </div>);\n};\nexport default TimelineGrouping;"
    }
  ]
}