# scheduler-recurring-events

> Scheduler displays recurring appointments configured with RFC5545 recurrence rules.

**Framework:** react  **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/react/ts/scheduler-recurring-events.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-react-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/Scheduler.tsx

```tsx
import { useState, useRef } from 'react';
import { ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, Month, type EventRenderedArgs, Inject, Resize, DragAndDrop, type EventSettingsModel } from '@syncfusion/ej2-react-schedule';
import { extend } from '@syncfusion/ej2-base';

/**
 * Schedule Recurrence events sample
 */
let recurrenceData = [
        {
            "Id": 1,
            "Subject": "Project demo meeting with Andrew",
            "Location": "Office",
            "StartTime": "2021-02-14T06:30:00.000Z",
            "EndTime": "2021-02-14T07:30:00.000Z",
            "RecurrenceRule": "FREQ=WEEKLY;INTERVAL=2;BYDAY=MO;COUNT=10",
            "CategoryColor": "#1aaa55"
        },
        {
            "Id": 2,
            "Subject": "Scrum Meeting",
            "Location": "Office",
            "StartTime": "2021-02-12T04:00:00.000Z",
            "EndTime": "2021-02-12T05:00:00.000Z",
            "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR;INTERVAL=1",
            "CategoryColor": "#357cd2"
        },
        {
            "Id": 3,
            "Subject": "Meeting with Core team",
            "Location": "Office",
            "StartTime": "2021-02-16T06:30:00.000Z",
            "EndTime": "2021-02-16T08:30:00.000Z",
            "RecurrenceRule": "FREQ=WEEKLY;INTERVAL=1;BYDAY=FR",
            "CategoryColor": "#7fa900"
        },
        {
            "Id": 4,
            "Subject": "Customer meeting – John Mackenzie",
            "Location": "Office",
            "StartTime": "2021-02-20T06:00:00.000Z",
            "EndTime": "2021-02-20T08:00:00.000Z",
            "RecurrenceRule": "FREQ=MONTHLY;BYMONTHDAY=20;INTERVAL=1;COUNT=5",
            "CategoryColor": "#ea7a57"
        },
        {
            "Id": 5,
            "Subject": "Team Fun Activities",
            "Location": "Office",
            "StartTime": "2021-02-21T18:30:00.000Z",
            "EndTime": "2021-02-22T18:30:00.000Z",
            "IsAllDay": true,
            "RecurrenceRule": "FREQ=YEARLY;BYDAY=TH;BYMONTH=2;BYSETPOS=4;INTERVAL=1;COUNT=10",
            "CategoryColor": "#00bdae"
        }
    ];

const RecurrenceEvents = () => {
  const scheduleObj = useRef<ScheduleComponent>(null);
  const data: Record<string, any>[] = extend([], recurrenceData, null, true) as Record<string, any>[];
  const [eventSettings] = useState<EventSettingsModel>({ dataSource: data, editFollowingEvents: false });
  const onEventRendered = (args: EventRenderedArgs): void => {

  }

  return (
    <div className='schedule-control-section'>
      <div className='col-lg-9 control-section'>
        <div className='control-wrapper'>
          <ScheduleComponent width='100%' height='650px' selectedDate={new Date(2021, 1, 20)} ref={scheduleObj} eventSettings={eventSettings} eventRendered={onEventRendered}>
            <ViewsDirective>
              <ViewDirective option='Day' />
              <ViewDirective option='Week' />
              <ViewDirective option='Month' />
            </ViewsDirective>
            <Inject services={[Day, Week, Month, Resize, DragAndDrop]} />
          </ScheduleComponent>
        </div>
      </div>
    </div>
  );
}
export default RecurrenceEvents;
```