# scheduler-recurring-events

> Scheduler showing recurring events colored by category with a toggle for following-event edits.

**Framework:** angular  **Component:** Scheduler  **Variant:** recurring-events

## 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/angular/scheduler-recurring-events.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-angular-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-recurring-events/recurrence-events.component.ts

```typescript
import { Component, ViewChild } from '@angular/core';
import { recurrenceData } from '../data';
import { extend } from '@syncfusion/ej2-base';
import { ScheduleComponent, EventSettingsModel, EventRenderedArgs, View, DayService, WeekService, MonthService, ResizeService, DragAndDropService, ScheduleModule } from '@syncfusion/ej2-angular-schedule';
import { ChangeEventArgs } from '@syncfusion/ej2-buttons';
import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons';

@Component({
    // tslint:disable-next-line:component-selector
    selector: 'control-content',
    templateUrl: 'recurrence-events.html',
    providers: [DayService, WeekService, MonthService, ResizeService, DragAndDropService],
    standalone: true,
    imports: [ScheduleModule, CheckBoxModule]
})
export class RecurrenceComponent {
  public data: Record<string, any>[] = extend([], recurrenceData as object[], undefined, true) as Record<string, any>[];
  public selectedDate: Date = new Date(2021, 1, 20);
  public eventSettings: EventSettingsModel = { dataSource: this.data };
  public currentView: View = 'Week';
  @ViewChild('scheduleObj') public scheduleObj!: ScheduleComponent;

  public onEventRendered(args: EventRenderedArgs): void {
    const categoryColor: string = args.data['CategoryColor'] as string;
    if (!args.element || !categoryColor) {
      return;
    }
    if (this.currentView === 'Agenda') {
      (args.element.firstChild as HTMLElement).style.borderLeftColor = categoryColor;
    } else {
      args.element.style.backgroundColor = categoryColor;
    }
  }

  public onChange(args: ChangeEventArgs): void {
    this.scheduleObj.eventSettings.editFollowingEvents = args.checked;
  }

}

```

### src/components/scheduler-recurring-events/recurrence-events.html

```html
<div class="control-section">
  <div class="col-lg-9 content-wrapper">
    <ejs-schedule #scheduleObj width='100%' height='650px' [selectedDate]="selectedDate" [eventSettings]="eventSettings"
      [currentView]="currentView" (eventRendered)="onEventRendered($event)">
      <e-views>
        <e-view option="Day"></e-view>
        <e-view option="Week"></e-view>
        <e-view option="Month"></e-view>
      </e-views>
    </ejs-schedule>
  </div>
  <div class="col-lg-3 property-section">
    <div class="property-panel-section">
      <div class="property-panel-header">Properties</div>
      <div class="property-panel-content">
        <div id="property" class="property-panel-table" title="Properties">
          <table id="property" title="Properties" style="width: 100%">
            <tbody>
              <tr style="height: 50px">
                <td style="width: 100%">
                  <ejs-checkbox label="Enable Following Events" [checked]="false" (change)="onChange($event)">
                  </ejs-checkbox>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

```