Skip to content Skip to footer navigation
You are reading the Statamic 6 Alpha docs. πŸ‘€

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