{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "scheduler-timeline-grouping",
  "framework": "angular",
  "type": "registry:component",
  "component": "Scheduler",
  "variant": "timeline-grouping",
  "dependencies": [
    "@syncfusion/ej2-angular-schedule"
  ],
  "description": "Timeline scheduler grouped by project and category with multi-resource rows across all-day bars.",
  "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/angular/llms.txt",
    "skillPack": "syncfusion/angular-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/angular/scheduler-timeline-grouping.md"
  },
  "files": [
    {
      "target": "src/components/scheduler-timeline-grouping/timeline-resource-grouping.component.ts",
      "content": "import { Component, ViewEncapsulation } from '@angular/core';\nimport { extend } from '@syncfusion/ej2-base';\nimport { TimelineViewsService, AgendaService, GroupModel, EventSettingsModel, ResizeService, DragAndDropService, ScheduleModule } from '@syncfusion/ej2-angular-schedule';\nimport { timelineResourceData, resourceData } from '../data';\n\n@Component({\n    // tslint:disable-next-line:component-selector\n    selector: 'control-content',\n    templateUrl: 'timeline-resource-grouping.html',\n    styles: [`\n    .timeline-resource-grouping.e-schedule:not(.e-device) .e-agenda-view .e-content-wrap table td:first-child {\n        width: 90px;\n    }\n    .timeline-resource-grouping.e-schedule .e-agenda-view .e-resource-column {\n        width: 100px;\n    }\n    `],\n    encapsulation: ViewEncapsulation.None,\n    providers: [TimelineViewsService, AgendaService, ResizeService, DragAndDropService],\n    standalone: true,\n    imports: [ScheduleModule]\n})\n\nexport class TimelineResourceGroupingComponent {\n  public selectedDate: Date = new Date(2023, 0, 4);\n  public workDays: number[] = [0, 1, 2, 3, 4, 5];\n  public group: GroupModel = {\n    resources: ['Projects', 'Categories']\n  };\n  public projectDataSource: Record<string, any>[] = [\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  public categoryDataSource: Record<string, any>[] = [\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  public allowMultiple = true;\n  public eventSettings: EventSettingsModel = {\n    dataSource: extend([], resourceData.concat(timelineResourceData) as object[], undefined, true) as Record<string, any>[]\n  };\n\n}\n"
    },
    {
      "target": "src/components/scheduler-timeline-grouping/timeline-resource-grouping.html",
      "content": "<div class=\"control-section\">\n  <div class=\"col-lg-12 content-wrapper\">\n    <ejs-schedule #scheduleObj width='100%' cssClass='timeline-resource-grouping' height='650px'\n      [selectedDate]=\"selectedDate\" [group]=\"group\" [workDays]=\"workDays\" [eventSettings]=\"eventSettings\">\n      <e-resources>\n        <e-resource field='ProjectId' title='Choose Project' [dataSource]='projectDataSource'\n          [allowMultiple]='allowMultiple' name='Projects' textField='text' idField='id' colorField='color'>\n        </e-resource>\n        <e-resource field='TaskId' title='Category' [dataSource]='categoryDataSource' [allowMultiple]='allowMultiple'\n          name='Categories' textField='text' idField='id' groupIDField='groupId' colorField='color'>\n        </e-resource>\n      </e-resources>\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    </ejs-schedule>\n  </div>\n</div>\n"
    }
  ]
}