Calendar

<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.