# 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/js/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.jsx

```jsx
import { useState, useRef } from 'react';
import { ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, Month, Inject, Resize, DragAndDrop } 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(null);
    const data = extend([], recurrenceData, null, true);
    const [eventSettings] = useState({ dataSource: data, editFollowingEvents: false });
    const onEventRendered = (args) => {

    };
    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;
```