# scheduler-recurring-events

> Scheduler displays recurring appointments configured with RFC5545 recurrence rules.

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

**Install Package(s)**

```bash
npm install @syncfusion/ej2-vue-buttons @syncfusion/ej2-vue-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.vue

```vue
<template>
    <div class="schedule-vue-sample">
        <div class="col-md-9 control-section">
            <div class="content-wrapper">
                <ejs-schedule height="650px" id='Schedule' :selectedDate='selectedDate' :currentView='currentView' :eventSettings='eventSettings'
                    :eventRendered="oneventRendered">
                    <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>
        <div class="col-lg-3 property-section">
            <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"></ejs-checkbox>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</template>
<script>
    import { CheckBoxComponent } from '@syncfusion/ej2-vue-buttons';
    import { extend } from '@syncfusion/ej2-base';
    import { ScheduleComponent, ViewDirective, ViewsDirective, Day, Week, Month, Resize, DragAndDrop } from "@syncfusion/ej2-vue-schedule";
    
    const recurrenceData = [
    {
        Id: 1,
        Subject: 'Project demo meeting with Andrew',
        Location: 'Office',
        StartTime: new Date(2021, 1, 14, 12, 0),
        EndTime: new Date(2021, 1, 14, 13, 0),
        RecurrenceRule: 'FREQ=WEEKLY;INTERVAL=2;BYDAY=MO;COUNT=10',
        CategoryColor: '#1aaa55'
    }, {
        Id: 2,
        Subject: 'Scrum Meeting',
        Location: 'Office',
        StartTime: new Date(2021, 1, 12, 9, 30),
        EndTime: new Date(2021, 1, 12, 10, 30),
        RecurrenceRule: 'FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR;INTERVAL=1',
        CategoryColor: '#357cd2'
    }, {
        Id: 3,
        Subject: 'Meeting with Core team',
        Location: 'Office',
        StartTime: new Date(2021, 1, 16, 12, 0),
        EndTime: new Date(2021, 1, 16, 14, 0),
        RecurrenceRule: 'FREQ=WEEKLY;INTERVAL=1;BYDAY=FR',
        CategoryColor: '#7fa900'
    }, {
        Id: 4,
        Subject: 'Customer meeting – John Mackenzie',
        Location: 'Office',
        StartTime: new Date(2021, 1, 20, 11, 30),
        EndTime: new Date(2021, 1, 20, 13, 30),
        RecurrenceRule: 'FREQ=MONTHLY;BYMONTHDAY=20;INTERVAL=1;COUNT=5',
        CategoryColor: '#ea7a57'
    }, {
        Id: 5,
        Subject: 'Team Fun Activities',
        Location: 'Office',
        StartTime: new Date(2021, 1, 22),
        EndTime: new Date(2021, 1, 23),
        IsAllDay: true,
        RecurrenceRule: 'FREQ=YEARLY;BYDAY=TH;BYMONTH=2;BYSETPOS=4;INTERVAL=1;COUNT=10',
        CategoryColor: '#00bdae'
    }
];
    export default {
        components: {
          'ejs-checkbox': CheckBoxComponent,
          'ejs-schedule': ScheduleComponent,
          'e-view': ViewDirective,
          'e-views': ViewsDirective
        },
        data: function () {
            return {
                eventSettings: { dataSource: extend([], recurrenceData, null, true) },
                selectedDate: new Date(2021, 1, 20),
                currentView: 'Week'
            }
        },
        provide: {
            schedule: [Day, Week, Month, Resize, DragAndDrop]
        },
        methods: {
            oneventRendered: function (args) {
                let categoryColor = args.data.CategoryColor;
                if (!args.element || !categoryColor) {
                    return;
                }
                args.element.style.backgroundColor = categoryColor;
            },            
            onChange: function (args) {
                this.eventSettings = {
                    editFollowingEvents: args.checked
                };
            }
        }
    }

</script>
```

### src/components/scheduler-recurring-events/SchedulerView.vue

```vue
<template>
  <Scheduler />
</template>

<script setup>
import Scheduler from '../../components/Scheduler.vue'
</script>
```