1"use strict";(globalThis.webpackChunkmobiscroll_docs=globalThis.webpackChunkmobiscroll_docs||[]).push([[20995],{58912(e,n,r){r.r(n),r.d(n,{assets:()=>o,contentTitle:()=>a,default:()=>g,frontMatter:()=>s,metadata:()=>t,toc:()=>l});const t=JSON.parse('{"id":"react/eventcalendar/calendar-integrations/recurring-events","title":"Working with recurring events","description":"Work with recurring events in the Mobiscroll Eventcalendar for React \u2014 display, edit single occurrences, and delete recurrence series.","source":"@site/versioned_docs/version-6.1.0/react/eventcalendar/calendar-integrations/recurring-events.md","sourceDirName":"react/eventcalendar/calendar-integrations","slug":"/react/eventcalendar/calendar-integrations/recurring-events","permalink":"/docs/react/eventcalendar/calendar-integrations/recurring-events","draft":false,"unlisted":false,"tags":[],"version":"6.1.0","frontMatter":{"displayed_sidebar":"reactSidebar","sidebar_label":"Recurring events","description":"Work with recurring events in the Mobiscroll Eventcalendar for React \u2014 display, edit single occurrences, and delete recurrence series."},"sidebar":"reactSidebar","previous":{"title":"Calendar integrations","permalink":"/docs/react/eventcalendar/calendar-integrations/"},"next":{"title":"Print","permalink":"/docs/react/eventcalendar/print"}}');var i=r(74848),c=r(28453);const s={displayed_sidebar:"reactSidebar",sidebar_label:"Recurring events",description:"Work with recurring events in the Mobiscroll Eventcalendar for React \u2014 display, edit single occurrences, and delete recurrence series."},a="Working with recurring events",o={},l=[{value:"Querying recurring events",id:"querying-recurring-events",level:2},{value:"Creating recurring events",id:"creating-recurring-events",level:2},{value:"Updating a single recurring instance",id:"updating-a-single-recurring-instance",level:2},{value:"Deleting a recurring instance",id:"deleting-a-recurring-instance",level:2},{value:"Updating a recurring event",id:"updating-a-recurring-event",level:2}];function d(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",ol:"ol",p:"p",pre:"pre",...(0,c.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.header,{children:(0,i.jsx)(n.h1,{id:"working-with-recurring-events",children:"Working with recurring events"})}),"\n",(0,i.jsx)(n.h2,{id:"querying-recurring-events",children:"Querying recurring events"}),"\n",(0,i.jsx)(n.p,{children:"The Calendar Integration when queries recurring events from the Google or the Outlook calendar, it will receive individual event occurences for the given period of time. So every event arrives as an individual event. The Mobiscroll Eventcalendar won't know about the recurrence in these cases."}),"\n",(0,i.jsx)(n.p,{children:"To tell whether these events are part of a recurring set or not, you need to check the properties of the event."}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsxs)(n.li,{children:["The google event has the ",(0,i.jsx)(n.code,{children:"event.googleEvent.recurringEventId"})," field set in case of recurring events - which is the ID of the original recurring event."]}),"\n",(0,i.jsxs)(n.li,{children:["The outlook event has the ",(0,i.jsx)(n.code,{children:"event.outlookEvent.type"})," field set to ",(0,i.jsx)(n.code,{children:"occurrence"})," in case of a recurring events, otherwise the type is ",(0,i.jsx)(n.code,{children:"singleInstance"})]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"creating-recurring-events",children:"Creating recurring events"}),"\n",(0,i.jsxs)(n.p,{children:["When you want to create a recurring event through the Mobiscroll Eventcalendar, you can do so by setting the ",(0,i.jsx)(n.code,{children:"recurrence"})," field to the RRULE before sending it to the Google or Outlook calendar. For example:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",metastring:'title="Create a recurring event in a Google calendar"',children:"const onEventCreate = (args, inst) => {\n const event = args.event;\n event.googleEvent = {\n recurrence: ['RRULE:FREQ=WEEKLY;BYDAY=TH;COUNT=4'],\n // ...other google specific properties\n }\n // then send it to Google\n googleCalendarSync.addEvent('MY_CALENDAR_ID', event);\n}\n"})}),"\n",(0,i.jsxs)(n.p,{children:["When this is done, the ",(0,i.jsx)(n.a,{href:"/docs/react/eventcalendar/calendar-integrations/#method-google-getEvents",children:"getEvents"})," function will return the individual occurences of the recurring set, the same way it is described ",(0,i.jsx)(n.a,{href:"#querying-recurring-events",children:"above"}),"."]}),"\n",(0,i.jsx)(n.h2,{id:"updating-a-single-recurring-instance",children:"Updating a single recurring instance"}),"\n",(0,i.jsxs)(n.p,{children:["To update a single occurence of a recurring event, you can drag it on the Eventcalendar UI (when the ",(0,i.jsx)(n.a,{href:"../api#opt-dragToMove",children:"dragToMove"})," option is enabled). Since the events you get from the calendar integrations are individual occurences, updating one will not update the whole set of recurring events. So updating a single instance of the recurring set is the default behavior."]}),"\n",(0,i.jsx)(n.h2,{id:"deleting-a-recurring-instance",children:"Deleting a recurring instance"}),"\n",(0,i.jsxs)(n.p,{children:["As mentioned above in the ",(0,i.jsx)(n.a,{href:"#querying-recurring-events",children:"query section"}),", by default you get the recurring event occurences as single individual events, when querying events from Google or Outlook calendars. Deleting a single event instance will only remove that single instance from the set."]}),"\n",(0,i.jsx)(n.h2,{id:"updating-a-recurring-event",children:"Updating a recurring event"}),"\n",(0,i.jsx)(n.p,{children:"To update the whole recurring set or parts of it (for example: this and following events), you will need to use direct API calls to the Google or Outlook calendars themselves, since this is not supported by the Calendar Integrations currently."}),"\n",(0,i.jsxs)(n.p,{children:["Here's a link for a more detailed description on ",(0,i.jsx)(n.a,{href:"https://developers.google.com/calendar/api/guides/recurringevents",children:"how to update recurring events with the Google Calendars"}),"."]}),"\n",(0,i.jsxs)(n.p,{children:["For Outlook recurring events check out the ",(0,i.jsx)(n.a,{href:"https://learn.microsoft.com/en-us
1/graph/outlook-schedule-recurring-events",children:"Outlook schedule recurring events guide"}),"."]})]})}function g(e={}){const{wrapper:n}={...(0,c.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},28453(e,n,r){r.d(n,{R:()=>s,x:()=>a});var t=r(96540);const i={},c=t.createContext(i);function s(e){const n=t.useContext(c);return t.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:s(e.components),t.createElement(c.Provider,{value:n},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.