# Data Binding

The Kendo UI for Vue Scheduler component accepts an array of [`DataItem`](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/api/scheduleritemprops#dataitem) objects through the [`dataItems`](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/api/schedulerprops#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`](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/api/schedulerprops#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](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/timezones).

[Demo Source](https://demos.telerik.com/kendo-vue-ui/scheduler/data-binding/data/source.txt)

## 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`](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/api/schedulerprops#modelfields) property.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/scheduler/data-binding/model-fields/source.txt)



## Suggested Links



* [API Reference of the Kendo UI for Vue Scheduler](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/api/schedulerprops)