Recurring Events

The KendoReact Scheduler provides support for recurring events on daily, weekly, monthly and yearly basis. Exceptions to the recurrence rules are also permitted.

Overview

The three main properties which are responsible for the recurring behavior of an event are:

  • Recurrence Rule - The rule which defines when an event occurs.
  • Recurrence Exceptions - The field which specifies exceptions from the recurrence rule.
  • Recurrence ID - The fields which indicates if the DataItem is related to an already expanded recurring event.

The following example demonstrates the recurringRule and recurrenceException fields in action.

import React from 'react';
import ReactDOM from 'react-dom';
import { Scheduler, AgendaView, DayView, WeekView, MonthView } from '@progress/kendo-react-scheduler';

import { data, displayDate } from './data.js';

const App = () => {
    return (
        <Scheduler data={data} defaultView={"day"} defaultDate={displayDate} timezone={"Etc/UTC"}>
            <AgendaView />
            <DayView />
            <WeekView />
            <MonthView />
        </Scheduler>
    );
};

ReactDOM.render(<App />, document.querySelector('my-app'));

Recurrence Rule

The recurrenceRule field is a string representation of the iCalendar Recurrence Rule type. Each rule is separated by a semicolon character.

The following table represents all available recurrence rules:

Recurrence RuleDescriptionValueExample
FREQSpecifies the frequency of the occurrence. This rule is required.HOURLY, DAILY, WEEKLY, MONTHLY, YEARLYFREQ=DAILY
INTERVALRepresent at which intervals the recurrence rule repeats.A positive integer. Default is 1FREQ=DAILY;INTERVAL=4
UNTILBound the recurrence rule in an inclusive manner. If neither UNTIL, nor COUNT rules are present, the recurrence rule is considered to repeat forever.A valid Date stringFREQ=DAILY;UNTIL=2019-09-04T00:00:00.000Z
COUNTDefines the number of occurrences at which to range-bound the recurrence.A positive integer number greater than 0FREQ=DAILY;COUNT=2
BYHOURDefines a comma-separated list of hours of a dayAn integer between 0 and 23FREQ=HOURLY;BYHOUR=2,4,6,8
BYDAYDefines a comma-separated list of days of the weekSU, MO, TU, WE, TH, FR, SAFREQ=DAILY;BYDAY=SA,SU
BYMONTHDAYDefines a comma-separated list of days of the month. Negative values represent backward counting. Must not be used when FREQ rule is set to WEEKLY.An integer between 1 and 31 or -31 to -1FREQ=DAILY;BYMONTHDAY=10,20,30
BYYEARDAYDefines a comma-separated list of days of the year. Negative values represent backward counting. Must not be used when FREQ rule is set to DAILY, WEEKLY, or MONTHLY.An integer between 1 and 366 or -366 to -1FREQ=YEARLY;BYYEARDAY=252
BYWEEKNODefines a comma-separated list of ordinals specifying weeks of the year. Negative values represent backward counting. Must not be used when FREQ rule is is set to anything other than YEARLY.An integer between 1 and 53 or -53 to -1FREQ=YEARLY;BYWEEKNO=36
BYMONTHDefines a comma-separated list of months of the year.An integer between 1 and 12FREQ=YEARLY;BYMONTH=9
WKSTSpecifies the day on which the workweek starts.SU, MO, TU, WE, TH, FR, SAFREQ=WEEKLY;BYDAY=TU,TH;INTERVAL=2;WKST=TH
BYSETPOSDefines a comma-separated list of values that corresponds to the nth occurrence within the set of recurrence instances.A positive (+n) or negative (-n) integerFREQ=MONTHLY;BYDAY=MO,TU,WE,TH,FR;BYSETPOS=-2

Recurrence Exception

The recurrenceExceptions field represents an array of JavaScript Date objects, which are used to define when an recurring event should not occur. For example, if we have the following recurrenceRule - FREQ=DAILY but we do not want the ever to occur on the 24th of September, we will set the recurrenceExceptions filed to an array with a single Date object.

const data = [
    {
        id: 0,
        title: 'Repeat every day, except for 24th of September',
        start: new Date("2019-09-04T08:00:00.000Z"),
        end: new Date("2019-09-04T08:30:00.000Z"),
        recurrenceRule: "FREQ=DAILY",
        recurrenceExceptions: [new Date('2019-09-24T08:00:00.000Z')]
    }
]

Recurrence ID

In case of server-side expansion of the events, the Scheduler component will receive the event occurrences as a multiple DataItems, rather than a single DataItem with a recurrenceRule. In order for the Scheduler to detect that an recurring event has been expanded, the recurrenceId field must be set to the expanded occurrences.

In order for the editing to work correctly, the original (non-expanded) recurring event must be provided. The Scheduler will detect that this item has already been expanded and will not render it.

The following example simulates a server-side expansion of events, by providing all of the occurrences together with the original recurring event.

import React from 'react';
import ReactDOM from 'react-dom';
import {
    Scheduler,
    WeekView
} from '@progress/kendo-react-scheduler';
import { serverData } from './server-data';
const displayDate = new Date('2019-09-02T08:00:00.000Z')

const App = () => {
    return (
        <Scheduler data={serverData} defaultDate={displayDate} timezone={"Etc/UTC"}>
            <WeekView/>
        </Scheduler>
    );
};

ReactDOM.render(<App />, document.querySelector('my-app'));
 /