How do I store edit to a single item in a recurring event

[Bryan Cantwell]

So far I am able to store, update, and delete events in my database. This includes recurring events.

BUT, once I try to edit a single occurrence of a series, I cannot figure out what to do.

In my component, I use :actionBegin.

<ejs-schedule

            id="Schedule"

            ref="ScheduleObj"

            height="1100px"

            :selectedDate="selectedDate"

            :eventSettings="eventSettings"

            :currentView="currentView"

            :actionBegin="handleActionBegin"

          ></ejs-schedule>

and the args sent to my function when I've dragged and dropped a single item in the series are:

{

  "requestType": "eventChange",

  "cancel": false,

  "addedRecords": [],

  "changedRecords": [

    {

      "id": "08121ba8-3cf8-b749-fabf-5787203b9133",

      "startTime": "2023-11-24T06:00:00.000Z",

      "startTimezone": null,

      "endTime": "2023-11-25T06:00:00.000Z",

      "endTimezone": null,

      "subject": "Series",

      "description": "",

      "isAllDay": true,

      "location": "",

      "recurrenceRule": "FREQ=WEEKLY;BYDAY=TH;INTERVAL=1;",

      "recurrenceId": null,

      "user": "cebeaca4-5591-40a2-9db0-908c2b60642c",

      "business": "95cb87ad-ec8c-45f1-96f1-6b05fa2bcb10",

      "recurrenceID": "6472feae-330f-48a0-94fe-6fe4f05c834e",

      "Guid": "ca6e9da9-869b-94b2-bbc9-739cc998929a",

      "recurrenceException": "20231123T060000Z",

      "FollowingID": null

    }

  ],

  "deletedRecords": [],

  "data": {

    "occurrence": {

      "id": "08121ba8-3cf8-b749-fabf-5787203b9133",

      "startTime": "2023-11-24T06:00:00.000Z",

      "startTimezone": null,

      "endTime": "2023-11-25T06:00:00.000Z",

      "endTimezone": null,

      "subject": "Series",

      "description": "",

      "isAllDay": true,

      "location": "",

      "recurrenceRule": "FREQ=WEEKLY;BYDAY=TH;INTERVAL=1;",

      "recurrenceId": null,

      "user": "cebeaca4-5591-40a2-9db0-908c2b60642c",

      "business": "95cb87ad-ec8c-45f1-96f1-6b05fa2bcb10",

      "recurrenceID": "6472feae-330f-48a0-94fe-6fe4f05c834e",

      "Guid": "ca6e9da9-869b-94b2-bbc9-739cc998929a",

      "recurrenceException": "20231123T060000Z",

      "FollowingID": null

    },

    "parent": {

      "id": "6472feae-330f-48a0-94fe-6fe4f05c834e",

      "startTime": "2023-11-16T06:00:00.000Z",

      "startTimezone": null,

      "endTime": "2023-11-17T06:00:00.000Z",

      "endTimezone": null,

      "subject": "Series",

      "description": "",

      "isAllDay": true,

      "location": "",

      "recurrenceRule": "FREQ=WEEKLY;BYDAY=TH;INTERVAL=1;",

      "recurrenceException": ",20231123T060000Z",

      "recurrenceId": null,

      "user": "cebeaca4-5591-40a2-9db0-908c2b60642c",

      "business": "95cb87ad-ec8c-45f1-96f1-6b05fa2bcb10"

    }

  },

  "name": "actionBegin"

}

I can't find anything that explains how to handle storing this event change to 1 item in an recurring series...

My original record in the database is :

{

  "id": "6472feae-330f-48a0-94fe-6fe4f05c834e",

  "date_created": "2023-11-16 22:21:24.446110",

  "description": "",

  "end_time": "2023-11-17 06:00:00.000000",

  "end_timezone": null,

  "is_all_day": "1",

  "last_updated": "2023-11-16 22:21:24.446110",

  "location": "",

  "recurrence_rule": "FREQ=WEEKLY;BYDAY=TH;INTERVAL=1;",

  "start_time": "2023-11-16 06:00:00.000000",

  "start_timezone": null,

  "subject": "Series",

  "business_id": "95cb87ad-ec8c-45f1-96f1-6b05fa2bcb10",

  "user_id": "cebeaca4-5591-40a2-9db0-908c2b60642c",

  "recurrence_exception": "",

  "recurrence_id": null

}

[Venkateshwaran Saravanakumar]

Hi Bryan,

Before proceeding further, we would like to inform that by default, the scheduler works fine with editing on a single event of a recurring series. So could you please share the following details, as they will greatly help us understand and resolve the problem:

• Share all the code snippets related to the Scheduler, both frontend and backend codes.
• Share the details about the adaptor or datamanager you are using for querying data from the backend or
• Provide a simplified sample that replicates the issue.

Regards,

Venkatesh

[Bryan Cantwell]

This code can successfully create update and delete single events, and can create and delete series, but cannot change or delete a single event in a series:
When I change (in this case drag a series event to another day) an item, this is passed to my handleAction :

{

  "requestType": "eventChanged",

  "cancel": false,

  "data": [

    {

      "subject": "Add title",

      "location": "",

      "startTime": "2023-11-30T06:00:00.000Z",

      "endTime": "2023-12-01T06:00:00.000Z",

      "isAllDay": true,

      "startTimezone": null,

      "endTimezone": null,

      "description": "",

      "recurrenceRule": "FREQ=WEEKLY;BYDAY=WE;INTERVAL=1;",

      "id": 2,

      "recurrenceID": 1,

      "Guid": "0abb659b-c128-9fed-a87f-3f90f169b1a9",

      "recurrenceException": "20231129T060000Z",

      "FollowingID": null

    }

  ],

  "addedRecords": [

    {

      "subject": "Add title",

      "location": "",

      "startTime": "2023-11-30T06:00:00.000Z",

      "endTime": "2023-12-01T06:00:00.000Z",

      "isAllDay": true,

      "startTimezone": null,

      "endTimezone": null,

      "description": "",

      "recurrenceRule": "FREQ=WEEKLY;BYDAY=WE;INTERVAL=1;",

      "id": 2,

      "recurrenceID": 1,

      "Guid": "0abb659b-c128-9fed-a87f-3f90f169b1a9",

      "recurrenceException": "20231129T060000Z",

      "FollowingID": null

    }

  ],

  "changedRecords": [

    {

      "subject": "Add title",

      "location": "",

      "startTime": "2023-11-22T06:00:00.000Z",

      "endTime": "2023-11-23T06:00:00.000Z",

      "isAllDay": true,

      "startTimezone": null,

      "endTimezone": null,

      "description": "",

      "recurrenceRule": "FREQ=WEEKLY;BYDAY=WE;INTERVAL=1;",

      "id": 1,

      "recurrenceException": "20231129T060000Z"

    }

  ],

  "deletedRecords": [],

  "name": "actionComplete"

}

This is what is stored in my database for the original series before trying to change anything:

{

  "id": "f7591017-5a88-4581-96bc-e4bfe48c6615",

  "date_created": "2023-11-22 16:18:33.713254",

  "description": "",

  "end_time": "2023-11-23 06:00:00.000000",

  "end_timezone": null,

  "is_all_day": "1",

  "last_updated": "2023-11-22 16:18:33.713254",

  "location": "",

  "recurrence_rule": "FREQ=WEEKLY;BYDAY=WE;INTERVAL=1;",

  "start_time": "2023-11-22 06:00:00.000000",

  "start_timezone": null,

  "subject": "Add title",

  "business_id": "95cb87ad-ec8c-45f1-96f1-6b05fa2bcb10",

  "user_id": "cebeaca4-5591-40a2-9db0-908c2b60642c",

  "recurrence_exception": "",

  "recurrence_id": null

}

I'm just not seeing what to do to keep my current series and change one event in that series successfully. I'm sure it's obvious, but not to me unfortunately...

This is the entire Calendar.vue

​

<template>

<div v-if="isDataLoaded">

<div class="schedule-vue-sample">

<div class="col-md-12 control-section">

<div class="content-wrapper">

<ejs-schedule

id="Schedule"

ref="ScheduleObj"

height="1100px"

:selectedDate="selectedDate"

:eventSettings="eventSettings"

:currentView="currentView"

:actionComplete="handleAction"

></ejs-schedule>

</div>

</div>

</div>

</div>

<div v-else>

<div class="spinner-border text-primary" role="status">

<span class="visually-hidden">Loading...</span>

</div>

</div>

</template>

<script setup>

import { provide, ref, onMounted, watch, computed } from "vue";

import {

ScheduleComponent as EjsSchedule,

Day,

Week,

WorkWeek,

Month,

Agenda,

} from "@syncfusion/ej2-vue-schedule";

import { Resize, DragAndDrop } from "@syncfusion/ej2-vue-schedule";

import CalendarService from "@/services/calendar.service";

import { globals } from "@/store/globals";

const calendarService = new CalendarService();

const dataManager = ref([]);

const isDataLoaded = ref(false);

// Fetch data on component mount

onMounted(async () => {

console.log("Globals user", globals.user);

try {

const data = await calendarService.getAllCalendarEvents();

dataManager.value = data.data;

isDataLoaded.value = true;

} catch (error) {

console.error("Error fetching data:", error);

}

});

// Watch for changes in dataManager and update dataSource accordingly

watch(

() => dataManager.value,

() => {

eventSettings.value.dataSource = dataManager.value;

}

);

const eventSettings = computed(() => ({

dataSource: dataManager.value,

fields: {

id: "id",

subject: { name: "subject", default: "" },

location: { name: "location", default: "" },

description: { name: "description", default: "" },

startTime: { name: "startTime" },

endTime: { name: "endTime" },

isAllDay: { name: "isAllDay" },

recurrenceRule: { name: "recurrenceRule" },

recurrenceID: { name: "recurrenceID" },

recurrenceException: { name: "recurrenceException" },

startTimezone: { name: "startTimezone", default: "" },

endTimezone: { name: "endTimezone", default: "" },

user: JSON.parse(localStorage.getItem("user")).id,

business: JSON.parse(localStorage.getItem("user")).businessId,

},

}));

const selectedDate = ref(new Date());

const currentView = ref("Month");

// Event handler for CRUD operations

const handleAction = async (args) => {

console.log("args", args);

const { addedRecords, changedRecords, deletedRecords, requestType, data } =

args;

if (requestType === "eventCreated") {

const event = addedRecords[0];

console.log("eventCreate", event);

const addEvent = {

subject: event.subject,

location: event.location,

description: event.description ? event.description : "",

startTime: event.startTime,

startTimezone: event.startTimezone,

endTime: event.endTime,

endTimezone: event.endTimezone,

isAllDay: event.isAllDay,

recurrenceRule: event.recurrenceRule ? event.recurrenceRule : "",

recurrenceID: event.recurrenceId ? event.recurrenceID : "",

recurrenceException: event.recurrenceException

? event.recurrenceException

: "",

user: JSON.parse(localStorage.getItem("user")).id,

business: JSON.parse(localStorage.getItem("user")).businessId,

};

await handleSaveEvent(addEvent);

} else if (requestType === "eventChanged") {

const event = changedRecords[0];

console.log("eventChanged", event);

const changeEvent = {

id: event.id,

subject: event.subject,

location: event.location,

description: event.description ? event.description : "",

startTime: event.startTime,

startTimezone: event.startTimezone,

endTime: event.endTime,

endTimezone: event.endTimezone,

isAllDay: event.isAllDay,

recurrenceRule: event.recurrenceRule ? event.recurrenceRule : "",

recurrenceID: event.recurrenceId ? event.recurrenceID : "",

recurrenceException: event.recurrenceException

? event.recurrenceException

: "",

user: JSON.parse(localStorage.getItem("user")).id,

business: JSON.parse(localStorage.getItem("user")).businessId,

};

await handleSaveEvent(changeEvent);

} else if (requestType === "eventRemoved") {

// Handle delete operation

const event = deletedRecords[0] ? deletedRecords[0] : changedRecords[0];

console.log("eventRemoved", event);

await handleDeleteEvent(event.id);

}

};

const handleSaveEvent = async (eventDoc) => {

try {

await calendarService.saveEvent({ eventDoc });

} catch (error) {

console.error("Error saving event:", error);

}

};

const handleDeleteEvent = async (eventId) => {

try {

await calendarService.deleteCalendarEvent({ eventId: eventId });

} catch (error) {

console.error("Error deleting event:", error);

}

};

// Provide the event handler to the Syncfusion Scheduler

provide("schedule", [

Day,

Week,

WorkWeek,

Month,

Agenda,

Resize,

DragAndDrop,

]);

</script>

<style>

@import "../styles/material3.css";

</style>

[Venkateshwaran Saravanakumar]

Bryan,

UG: https://ej2.syncfusion.com/vue/documentation/schedule/appointments#editing-an-occurrence-from-a-series

We would like to inform you that while editing a single occurrence from a recurring series, an additional field, recurrenceException, will be added to the parent event to exclude the event from the series, and a new event will be created for the edited event. Based on your shared code, we suspect that you may not have handled this case in your database. Kindly handle it in your database, as this may resolve the mentioned issue. Refer the shared UG for more details. Let us know if you need any further assistance.