Dates
The Calendar enables you to set the behavior of its dates.
You can apply either of the following approaches:
- Setting the focused dates, or
- Setting the 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
property by setting it to a specific Date
value. The Date
value has to be a valid JavaScript Date
object.
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
prop.
The Calendar accepts the following values that you can set as selected:
Single Dates
To set a single date as selected, pass the JavaScript Date
object as a value.
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
prop to 'multiple'.
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
prop to 'range'.