# Dates

The Calendar enables you to set the behavior of its dates.

You can apply either of the following approaches:

* Setting the [focused dates](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/calendar/dates#setting-the-focused-date), or
* Setting the [selected dates](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/calendar/dates#selected-dates).

## Setting the Focused Date

The Calendar always displays a focused date and, by default, the focused date is today's date. To change the focused date, use the [`focusedDate`](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/api/calendarprops#focuseddate) property by setting it to a specific `Date` value. The `Date` value has to be a valid JavaScript `Date` object.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/dateinputs/calendar/dates/focused/source.txt)

## Selected Dates

By default, the selected date is not set and the Calendar displays only the focused date. To define the selected date, use the [`value`](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/api/calendarprops#value) prop.

The Calendar accepts the following values that you can set as selected:

* [A single date](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/calendar/dates#single-dates)
* [Multiple dates](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/calendar/dates#multiple-dates)
* [Range date selections](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/calendar/dates#range-date-selections)

### Single Dates

To set a single date as selected, pass the JavaScript `Date` object as a value.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/dateinputs/calendar/dates/selected/source.txt)

### Multiple Dates

To set multiple dates as selected, pass an array of JavaScript `Date` objects as a value.  In such scenario we need to se the [`mode`](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/api/calendarprops#mode) prop to 'multiple'.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/dateinputs/calendar/dates/multiple/source.txt)

### Range Date Selections

To set a range of dates as selected, pass an object with `start` and `end` keys which represent the selected range. In such scenario we need to se the [`mode`](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/api/calendarprops#mode) prop to 'range'.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/dateinputs/calendar/dates/range/source.txt)

## Suggested Links

* [API Reference of the Calendar](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/api/calendarprops)