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

Data Binding

The Kendo UI for Vue Native Scheduler component accepts an array of DataItem objects through the dataItems property.

Getting Started

The DataItem type does not limit the user to a specific fields in the data-items array but expects that the modelFields property is set as well, or that the DataItem has the default fields mapping.

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

In order for the Scheduler to correctly render the data items, you have to define the id, start, and end fields.
In order for the Scheduler to correctly handle and format dates, you have to represent them by instances of the JavaScript Date object.

Using the data Property

The data property represents an array of objects which either have id, start, and end fields, or fields which represent the same values.

The following example demonstrates how to take a simple object and render it in the Scheduler. The Breakfast with Tom event is rendered between the 8:30 AM and 9:00 AM slots on 27th of August. The example does no focus on the timezone property—for more information, refer to the article on timezones.

Change Theme

Theme

Loading ...

Using the modelFields Property

Since the data array items can be of any type, you can provide a custom mapping from the data items of the Scheduler by using the modelFields property.