{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "scheduler-recurring-events",
  "framework": "vue",
  "type": "registry:component",
  "component": "Scheduler",
  "variant": "recurring-events",
  "dependencies": [
    "@syncfusion/ej2-vue-buttons",
    "@syncfusion/ej2-vue-schedule"
  ],
  "description": "Scheduler displays recurring appointments configured with RFC5545 recurrence rules.",
  "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/vue/llms.txt",
    "skillPack": "syncfusion/vue-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/vue/scheduler-recurring-events.md"
  },
  "files": [
    {
      "target": "src/components/scheduler-recurring-events/Scheduler.vue",
      "content": "<template>\n    <div class=\"schedule-vue-sample\">\n        <div class=\"col-md-9 control-section\">\n            <div class=\"content-wrapper\">\n                <ejs-schedule height=\"650px\" id='Schedule' :selectedDate='selectedDate' :currentView='currentView' :eventSettings='eventSettings'\n                    :eventRendered=\"oneventRendered\">\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>\n        <div class=\"col-lg-3 property-section\">\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\"></ejs-checkbox>\n                            </td>\n                        </tr>\n                    </tbody>\n                </table>\n            </div>\n        </div>\n\n    </div>\n</template>\n<script>\n    import { CheckBoxComponent } from '@syncfusion/ej2-vue-buttons';\n    import { extend } from '@syncfusion/ej2-base';\n    import { ScheduleComponent, ViewDirective, ViewsDirective, Day, Week, Month, Resize, DragAndDrop } from \"@syncfusion/ej2-vue-schedule\";\n    \n    const recurrenceData = [\n    {\n        Id: 1,\n        Subject: 'Project demo meeting with Andrew',\n        Location: 'Office',\n        StartTime: new Date(2021, 1, 14, 12, 0),\n        EndTime: new Date(2021, 1, 14, 13, 0),\n        RecurrenceRule: 'FREQ=WEEKLY;INTERVAL=2;BYDAY=MO;COUNT=10',\n        CategoryColor: '#1aaa55'\n    }, {\n        Id: 2,\n        Subject: 'Scrum Meeting',\n        Location: 'Office',\n        StartTime: new Date(2021, 1, 12, 9, 30),\n        EndTime: new Date(2021, 1, 12, 10, 30),\n        RecurrenceRule: 'FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR;INTERVAL=1',\n        CategoryColor: '#357cd2'\n    }, {\n        Id: 3,\n        Subject: 'Meeting with Core team',\n        Location: 'Office',\n        StartTime: new Date(2021, 1, 16, 12, 0),\n        EndTime: new Date(2021, 1, 16, 14, 0),\n        RecurrenceRule: 'FREQ=WEEKLY;INTERVAL=1;BYDAY=FR',\n        CategoryColor: '#7fa900'\n    }, {\n        Id: 4,\n        Subject: 'Customer meeting – John Mackenzie',\n        Location: 'Office',\n        StartTime: new Date(2021, 1, 20, 11, 30),\n        EndTime: new Date(2021, 1, 20, 13, 30),\n        RecurrenceRule: 'FREQ=MONTHLY;BYMONTHDAY=20;INTERVAL=1;COUNT=5',\n        CategoryColor: '#ea7a57'\n    }, {\n        Id: 5,\n        Subject: 'Team Fun Activities',\n        Location: 'Office',\n        StartTime: new Date(2021, 1, 22),\n        EndTime: new Date(2021, 1, 23),\n        IsAllDay: true,\n        RecurrenceRule: 'FREQ=YEARLY;BYDAY=TH;BYMONTH=2;BYSETPOS=4;INTERVAL=1;COUNT=10',\n        CategoryColor: '#00bdae'\n    }\n];\n    export default {\n        components: {\n          'ejs-checkbox': CheckBoxComponent,\n          'ejs-schedule': ScheduleComponent,\n          'e-view': ViewDirective,\n          'e-views': ViewsDirective\n        },\n        data: function () {\n            return {\n                eventSettings: { dataSource: extend([], recurrenceData, null, true) },\n                selectedDate: new Date(2021, 1, 20),\n                currentView: 'Week'\n            }\n        },\n        provide: {\n            schedule: [Day, Week, Month, Resize, DragAndDrop]\n        },\n        methods: {\n            oneventRendered: function (args) {\n                let categoryColor = args.data.CategoryColor;\n                if (!args.element || !categoryColor) {\n                    return;\n                }\n                args.element.style.backgroundColor = categoryColor;\n            },            \n            onChange: function (args) {\n                this.eventSettings = {\n                    editFollowingEvents: args.checked\n                };\n            }\n        }\n    }\n\n</script>"
    },
    {
      "target": "src/components/scheduler-recurring-events/SchedulerView.vue",
      "content": "<template>\n  <Scheduler />\n</template>\n\n<script setup>\nimport Scheduler from '../../components/Scheduler.vue'\n</script>"
    }
  ]
}