Components

Calendar

A date field component that allows users to enter and edit dates.

php artisan blatui:add calendar

<x-ui.calendar mode="single" value="2025-06-12" default-month="2025-06-12" class="rounded-md border shadow-sm" />

Disabled Dates

{{-- Disable everything before June 12, 2025 --}}
<x-ui.calendar
    mode="single"
    value="2025-06-12"
    default-month="2025-06-12"
    :disabled="['before' => '2025-06-12']"
    class="rounded-md border shadow-sm"
/>

Disabled Weekends

{{-- dayOfWeek: 0 = Sunday, 6 = Saturday --}}
<x-ui.calendar
    mode="single"
    default-month="2025-06-01"
    :disabled="['dayOfWeek' => [0, 6]]"
    class="rounded-md border shadow-sm"
/>

Dropdown Caption

<x-ui.calendar
    mode="single"
    value="2025-06-12"
    default-month="2025-06-12"
    caption-layout="dropdown"
    class="rounded-md border shadow-sm"
/>

Min Max Range

{{-- Require a range of at least 2 and at most 7 nights --}}
<x-ui.calendar
    mode="range"
    :value="['from' => '2025-06-12', 'to' => '2025-06-16']"
    default-month="2025-06-12"
    :min="2"
    :max="7"
    class="rounded-md border shadow-sm"
/>

Multiple

<x-ui.calendar
    mode="multiple"
    :value="['2025-06-05', '2025-06-12', '2025-06-18']"
    default-month="2025-06-12"
    :max="5"
    class="rounded-md border shadow-sm"
/>

Multiple Months

<x-ui.calendar
    mode="single"
    value="2025-06-12"
    default-month="2025-06-12"
    :number-of-months="2"
    class="rounded-md border shadow-sm"
/>

Outline Days

{{-- Outlined day cells via the `button-variant` prop. --}}
<x-ui.calendar
    mode="single"
    value="2025-06-12"
    default-month="2025-06-12"
    button-variant="outline"
    class="rounded-md border shadow-sm"
/>

Range

<x-ui.calendar
    mode="range"
    :value="['from' => '2025-06-09', 'to' => '2025-06-26']"
    default-month="2025-06-09"
    :number-of-months="2"
    class="rounded-md border shadow-sm"
/>

Week Numbers

<x-ui.calendar
    mode="single"
    value="2025-06-12"
    default-month="2025-06-12"
    :show-week-number="true"
    class="rounded-md border shadow-sm"
/>

Week Start Monday

{{-- week-start: 0 = Sunday (default), 1 = Monday. Independent of locale. --}}
<x-ui.calendar
    mode="single"
    value="2025-06-12"
    default-month="2025-06-12"
    :week-start="1"
    class="rounded-md border shadow-sm"
/>

API Reference

Props, slots and exposed methods for <x-ui.calendar>.

Props

Prop	Type	Default	Description
`mode`	`string`	`'single'`	Selection behaviour: one date, a set of dates, or a start/end range. `single` `multiple` `range`
`value`	`string\|array`	—	The initial selection. A "Y-m-d" string for single mode, an array of "Y-m-d" strings for multiple, or ["from"=>, "to"=>] for range.
`name`	`string`	—	When set, renders hidden inputs with this name so the selection submits with a form. Range mode emits name[from] and name[to].
`numberOfMonths`	`int`	`1`	How many month grids to render side by side.
`defaultMonth`	`string`	—	The "Y-m-d" date whose month is shown first when there is no value.
`weekStart`	`int\|string`	`0`	First day of the week: 0–6 (0 = Sunday) or a day name like "monday".
`captionLayout`	`string`	`'label'`	Render the month/year caption as plain text or as selectable dropdowns. `label` `dropdown`
`showWeekNumber`	`bool`	`false`	Show an ISO week-number column on the left of each grid.
`showOutsideDays`	`bool`	`true`	Render days from adjacent months that pad the first and last week.
`locale`	`string`	—	BCP-47 locale (e.g. "en-GB") for month names, weekday labels, and date formatting.
`disabled`	`array`	—	Matcher(s) describing which dates cannot be selected. See Disabled / modifier matchers below.
`minDate`	`string`	—	Earliest selectable date ("Y-m-d"). Behaviour with later dates is governed by outOfRange.
`maxDate`	`string`	—	Latest selectable date ("Y-m-d"). Behaviour with earlier dates is governed by outOfRange.
`outOfRange`	`string`	`'disable'`	How to treat dates outside minDate/maxDate: prevent selection, or allow it but flag the day in red. `disable` `flag`
`min`	`int`	—	Range mode only: minimum range length in days. Alias of minDays.
`max`	`int`	—	Range mode only: maximum range length in days. Alias of maxDays. In multiple mode it caps the number of selectable dates.
`minDays`	`int`	—	Range mode only: minimum range length in days (clearer name for min).
`maxDays`	`int`	—	Range mode only: maximum range length in days (clearer name for max).
`startMonth`	`string`	—	Earliest navigable month ("Y-m-d"); the previous-month button stops here.
`endMonth`	`string`	—	Latest navigable month ("Y-m-d"); the next-month button stops here.
`disableNavigation`	`bool`	`false`	Hide/disable the previous and next month controls.
`buttonVariant`	`string`	`'ghost'`	Visual style of the month navigation buttons. `ghost` `outline`
`required`	`bool`	`false`	Prevent clearing the selection by clicking the currently selected day.
`modifiers`	`array`	—	Map of modifier name to a matcher (same shape as disabled). Tags matching days so they can be styled.
`modifiersClass`	`[modifier => class]`	—	Map of modifier name to the Tailwind classes applied to days that match that modifier.

Disabled / modifier matchers

Prop	Type	Default	Description
`before`	`string`	—	Match every date before this "Y-m-d" date.
`after`	`string`	—	Match every date after this "Y-m-d" date.
`dayOfWeek`	`array`	—	Match these weekdays (0 = Sunday … 6 = Saturday), e.g. [0, 6] for weekends.
`from`	`string`	—	Start of an inclusive ["Y-m-d", "Y-m-d"] date range to match (paired with to).
`to`	`string`	—	End of an inclusive date range to match (paired with from).