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

Data Binding

The Kendo UI Scheduler for Angular accepts an array of SchedulerEvent objects through the events attribute of the <kendo-scheduler> tag.

When you bind the Scheduler to data, note the following specifics:

  • When the data is received from an asynchronous source, pipe it through the async pipe.
  • Dates have to be represented by instances of the JavaScript Date object which ensures their correct handling and formatting.

Using Built-In Directive

The built-in kendoSchedulerBinding directive filters events that are out of range and expands the recurring series in-memory.

Example
View Source
Edit In Stackblitz  
Change Theme:

Recurring Events

The directive expands recurring events in-memory using the supplied recurrence rule. The rule is evaluated only for the visible time period of the current view.

Please, include all events with set recurring rules in the data set. Determining whether an event occurs in the current time period requires evaluating the recurrence rule. In practice, events with set recurring rules must be supplied unless it can be

Using Manual Binding

You can bind events by directly using the events attribute of the Scheduler. This binding mode is useful for skipping the built-in recurrence engine and using an alternativefor example, a server-side solution.

Example
View Source
Edit In Stackblitz  
Change Theme:

Binding to Models

By default, the Scheduler accepts an array of SchedulerEvent objects as data. To bind the component to custom objects, bind a model field map to the modelFields property.

Example
View Source
Edit In Stackblitz  
Change Theme:

Using the dateChange Event

The dateChange event fires each time the current date range changes which allows the supply of the event data in smaller chunks that cover only the currently visible time period.

The dateChange event does not necessarily fire when the views get switchedfor example, an Agenda and a Week view might cover the same date range.

Example
View Source
Edit In Stackblitz  
Change Theme:

Resource Binding

An event can have one or more "resources" assigned to itfor example, a meeting room or a guest list. To configure the Scheduler to display each resource as a sub-view, refer to the section on grouping by resource.

Each resource is described by a Resource object that contains all possible values for it. To define resources, set the resources attribute.

As a minimum, you have to define the following fields:

  • fieldThe field name of the event that contains the resource value.
  • dataThe resource data array.
  • valueFieldThe field name from the data that contains the value of the resource.
  • textFieldThe field name from the data that contains the text of the resource.
Example
View Source
Edit In Stackblitz  
Change Theme: