Recurring EventsPremium
The KendoReact Scheduler provides support for recurring events on a daily, weekly, monthly, and annual basis, and allows for exceptions from these recurrence rules.
Getting Started
To configure recurring behavior for a Scheduler event, use any of the following approaches:
The following example demonstrates how to set a recurrence rule and a recurrence exception.
Using Recurrence Rules
The recurrenceRule field defines when an event occurs.
recurrenceRule is a string representation of the iCalendar recurrence rule type. Each rule is separated by a semicolon (;) character.
The following table lists all recurrence rules that are supported by the Scheduler:
| Recurrence Rule | Description | Value | Example |
|---|---|---|---|
FREQ | (Mandatory) Specifies the frequency of the occurrence. | HOURLY, DAILY, WEEKLY, MONTHLY, YEARLY | FREQ=DAILY |
INTERVAL | Specifies the intervals at which the recurrence rule repeats. | A positive integer. Defaults to 1. | FREQ=DAILY;INTERVAL=4 |
UNTIL | Bounds the recurrence rule in an inclusive manner. If neither the UNTIL, nor the COUNT rule is present, the recurrence rule will be considered that it repeats forever. | A valid Date string. | FREQ=DAILY;UNTIL=2019-09-04T00:00:00.000Z |
COUNT | Defines the number of occurrences at which to range-bound the recurrence. | A positive integer number greater than 0. | FREQ=DAILY;COUNT=2 |
BYHOUR | Defines a comma-separated list of hours of the day. | An integer between 0 and 23. | FREQ=HOURLY;BYHOUR=2,4,6,8 |
BYDAY | Defines a comma-separated list of days of the week. | SU, MO, TU, WE, TH, FR, SA | FREQ=DAILY;BYDAY=SA,SU |
BYMONTHDAY | (Do not use it when the FREQ rule is set to WEEKLY.) Defines a comma-separated list of days of the month. Negative values represent backward counting. | An integer between 1 and 31, or -31 to -1. | FREQ=DAILY;BYMONTHDAY=10,20,30 |
BYYEARDAY | (Do not use it when the FREQ rule is set to DAILY, WEEKLY, or MONTHLY.) Defines a comma-separated list of days of the year. Negative values represent backward counting. | An integer between 1 and 366, or -366 to -1. | FREQ=YEARLY;BYYEARDAY=252 |
BYWEEKNO | (Use it only when the FREQ rule is set to YEARLY.) Defines a comma-separated list of ordinals which specify weeks of the year. Negative values represent backward counting. | An integer between 1 and 53, or -53 to -1. | FREQ=YEARLY;BYWEEKNO=36 |
BYMONTH | Defines a comma-separated list of months of the year. | An integer between 1 and 12. | FREQ=YEARLY;BYMONTH=9 |
WKST | Specifies the day on which the workweek starts. | SU, MO, TU, WE, TH, FR, SA | FREQ=WEEKLY;BYDAY=TU,TH;INTERVAL=2;WKST=TH |
BYSETPOS | Defines a comma-separated list of values that corresponds to the nth occurrence within the set of recurrence instances. | A positive (+n) or negative (-n) integer. | FREQ=MONTHLY;BYDAY=MO,TU,WE,TH,FR;BYSETPOS=-2 |
Setting Recurrence Exceptions
The recurrenceExceptions field specifies exceptions from the recurrence rule.
recurrenceExceptions represents an array of JavaScript Date objects which define when an recurring event must not occur. For example, if the FREQ=DAILY recurrence rule is set, the event must not occur on 24 September, set the recurrenceExceptions field 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')]
}
]
Configuring the Recurrence ID
The recurrenceId field indicates that a DataItem is an occurrence of an already expanded recurring event. Use it when the recurring events are expanded outside the Scheduler—for example, on the server or by a third-party library—so that the Scheduler skips its built-in expansion and renders the occurrences as-is.
This is an escape hatch for specific scenarios. When possible, prefer binding a single event with a
recurrenceRuleand letting the Scheduler expand it.
To enable the Scheduler to detect expanded recurring events:
- Set the
recurrenceIdfield on each occurrence to theidof the original recurring event. - Set the
recurrenceRulefield on each occurrence to the same value as the original recurring event. Omit the field for recurrence exceptions. - Include the original, non-expanded event in the data set.
The following example simulates a server-side expansion of events by providing all of the occurrences together with the original recurring event.