Calendar
We'll give you 3 guesses what this is for.
<ui-card>
<ui-calendar></ui-calendar>
</ui-card>
Min and Max
You can pass the min
and max
props to limit the range of dates that can be selected.
<ui-card>
<ui-calendar
min="2025-10-05"
max="2025-10-25"
></ui-calendar>
</ui-card>
Multiple Months
You can pass the number-of-months
prop to display multiple months at once.
<ui-card>
<ui-calendar
:number-of-months="2"
></ui-calendar>
</ui-card>
Week Starts On
You can pass the week-starts-on
prop to change the first day of the week.
The default is 0
(Sunday). Monday is 1
, Tuesday is 2
, etc.
<ui-card>
<ui-calendar
week-starts-on="1"
></ui-calendar>
</ui-card>
Weekday Format
You can pass the weekday-format
prop to change the format of the weekday names.
The default is narrow
, short
is Mon
, long
is Monday
.
<ui-card>
<ui-calendar weekday-format="short"></ui-calendar>
</ui-card>
Additional Props
You can pass additional props to the calendar to customize it.
Prop | Type | Default |
---|---|---|
weekday-format | string | narrow |
prevent-deselect | boolean | false |
disabled | boolean | false |
inline | boolean | false |
Docs Feedback
Submit improvements, related content, or suggestions through Github.
Betterify this page