New to Kendo UI for Angular? Start a free 30-day trial

Data Binding of Recurring Events

This article explains the specifics of storing and data binding of recurring events.

The Scheduler uses the following model fields to support recurring events:

  • recurrenceRuleA string representation of the recurrence. For more information, refer to the article on recurrence rules.
  • recurrenceIdThe ID of the recurring event to which this occurrence belongs.

Recurring events require processing before they are ready to be displayed by the Scheduler. This is typically done by the data binding directive, but can also be handled by a remote service.

To perform the process, follow the steps:

  1. Determine the currently visible time period.

    The Scheduler fires a DateChange event that contains the visible range of the current view.

  2. Evaluate the recurrence rules of all recurring events, and determine if they have occurrences in the current date range.

    The evaluation of the recurrence rules is restricted to the current date range.

  3. For each occurrence, create a copy of the event. On the copied event, set the following fields:

    • start and end are set to the occurrence time.
    • recurrenceId is set to the id of the main recurring event.

Recurrence Exceptions

Recurrence exceptions are dates on which the original event does not occur. The occurrence may be entirely missing or can be replaced by an updated version following an edit.

The recurrenceExceptions field stores the exceptions from the recurrence rule.

The field contains an array of dates which define when an recurring event must not occur. The dates are stored as strings in ISO 8601 format and are separated by comma. 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.

    public events: SchedulerEvent[] = [{
        id: 1,
        title: 'Repeat daily, except on 21th of October',
        start: new Date('2020-10-19T09:00:00'),
        end: new Date('2020-10-19T10:30:00'),
        recurrenceRule: 'FREQ=DAILY;',
        recurrenceExceptions: [new Date('2020-10-21T09:00:00')]
    }];

The following example demonstrates how to set a recurrence rule and a recurrence exception.

Example
View Source
Edit In Stackblitz  
Change Theme:

Storage Considerations

The recurrence exceptions array contains one entry for each deleted or modified occurrence. As a result, the list can grow to a significant size.

To ensure the operations run as expected, allocate sufficient storage for the list. Relational databases have to use a column of type VARCHAR(MAX), TEXT, or equivalent.

Server-Side Processing

To disable the built-in processing of recurring events, remove the data binding directive. This allows the recurring events to be expanded on the server or by a third-party library.

This feature is designed as an escape hatch for specific scenarios. We do not provide specific implementations for server-side processing of recurring events at the moment.

To enable the Scheduler to detect expanded recurring events:

  • Set the recurrenceId field of occurrences to the id of the main recurring event.
  • Set the recurrenceRule field on the occurrences to the same value as the main recurring event. Omit the field for recurrence exceptions.
  • Include the original event in the data set. This event will not be rendered, but is needed for editing to work correctly.

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

Example
View Source
Edit In Stackblitz  
Change Theme: