{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "scheduler-recurring-events",
  "framework": "angular",
  "type": "registry:component",
  "component": "Scheduler",
  "variant": "recurring-events",
  "dependencies": [
    "@syncfusion/ej2-angular-schedule"
  ],
  "description": "Scheduler showing recurring events colored by category with a toggle for following-event edits.",
  "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-recurring-events.md"
  },
  "files": [
    {
      "target": "src/components/scheduler-recurring-events/recurrence-events.component.ts",
      "content": "import { Component, ViewChild } from '@angular/core';\nimport { recurrenceData } from '../data';\nimport { extend } from '@syncfusion/ej2-base';\nimport { ScheduleComponent, EventSettingsModel, EventRenderedArgs, View, DayService, WeekService, MonthService, ResizeService, DragAndDropService, ScheduleModule } from '@syncfusion/ej2-angular-schedule';\nimport { ChangeEventArgs } from '@syncfusion/ej2-buttons';\nimport { CheckBoxModule } from '@syncfusion/ej2-angular-buttons';\n\n@Component({\n    // tslint:disable-next-line:component-selector\n    selector: 'control-content',\n    templateUrl: 'recurrence-events.html',\n    providers: [DayService, WeekService, MonthService, ResizeService, DragAndDropService],\n    standalone: true,\n    imports: [ScheduleModule, CheckBoxModule]\n})\nexport class RecurrenceComponent {\n  public data: Record<string, any>[] = extend([], recurrenceData as object[], undefined, true) as Record<string, any>[];\n  public selectedDate: Date = new Date(2021, 1, 20);\n  public eventSettings: EventSettingsModel = { dataSource: this.data };\n  public currentView: View = 'Week';\n  @ViewChild('scheduleObj') public scheduleObj!: ScheduleComponent;\n\n  public onEventRendered(args: EventRenderedArgs): void {\n    const categoryColor: string = args.data['CategoryColor'] as string;\n    if (!args.element || !categoryColor) {\n      return;\n    }\n    if (this.currentView === 'Agenda') {\n      (args.element.firstChild as HTMLElement).style.borderLeftColor = categoryColor;\n    } else {\n      args.element.style.backgroundColor = categoryColor;\n    }\n  }\n\n  public onChange(args: ChangeEventArgs): void {\n    this.scheduleObj.eventSettings.editFollowingEvents = args.checked;\n  }\n\n}\n"
    },
    {
      "target": "src/components/scheduler-recurring-events/recurrence-events.html",
      "content": "<div class=\"control-section\">\n  <div class=\"col-lg-9 content-wrapper\">\n    <ejs-schedule #scheduleObj width='100%' height='650px' [selectedDate]=\"selectedDate\" [eventSettings]=\"eventSettings\"\n      [currentView]=\"currentView\" (eventRendered)=\"onEventRendered($event)\">\n      <e-views>\n        <e-view option=\"Day\"></e-view>\n        <e-view option=\"Week\"></e-view>\n        <e-view option=\"Month\"></e-view>\n      </e-views>\n    </ejs-schedule>\n  </div>\n  <div class=\"col-lg-3 property-section\">\n    <div class=\"property-panel-section\">\n      <div class=\"property-panel-header\">Properties</div>\n      <div class=\"property-panel-content\">\n        <div id=\"property\" class=\"property-panel-table\" title=\"Properties\">\n          <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n            <tbody>\n              <tr style=\"height: 50px\">\n                <td style=\"width: 100%\">\n                  <ejs-checkbox label=\"Enable Following Events\" [checked]=\"false\" (change)=\"onChange($event)\">\n                  </ejs-checkbox>\n                </td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n"
    }
  ]
}