Calendar

Calendar component (inline date picker).

# Basic Usage

Calendar is an inline date picker, the same grid-based UX you get from <x-date> , but rendered directly in the page with no input field and no floating wrapper. Useful for dashboards, filter panels, scheduling screens, and inline reports.

<x-calendar />

# Label & Hint

Pick a date

Format: YYYY-MM-DD

<x-calendar label="Pick a date" hint="Format: YYYY-MM-DD" />

# Range Mode

<!--
The Livewire property must be an array with two positions,
the first one is the start date and the second one is the end date.
 
Property:
public array $date = ['2026-04-01', '2026-04-15'];
 
Usage:
<x-calendar range wire:model="date" />
-->
 
<x-calendar range />

Range mode allows the user to select only the start date initially. In that case the end date will be null.

# Double Mode

An option to render two months side-by-side. Useful for selecting ranges that span multiple months.

<!--
Renders two months side-by-side. Both calendars share the same month/year state —
navigating with the primary's prev/next arrows advances both. The secondary always
shows `primary_month + 1` (rolling year on December). Below the `sm` breakpoint the
secondary panel hides automatically. Only valid with `range`.
-->
 
<x-calendar range double />

The double mode is only valid alongside range.
Both calendars share the same month/year state, navigating with the primary's arrows advances both.
Below the sm breakpoint, the secondary calendar goes to the bottom of the first calendar.

# Multiple Mode

<!--
The Livewire property must be an array with multiple dates.
 
Property:
public array $dates = ['2026-04-01', '2026-04-05', '2026-04-10'];
 
Usage:
<x-calendar multiple wire:model="dates" />
-->
 
<x-calendar multiple />

# Lock Month Year

An option to disable the month/year header buttons. Day selection and prev/next month navigation continue to work.

<!--
The month and year header buttons no longer open the floating month/year pickers.
Day selection and prev/next month navigation continue to work. Useful when the
displayed period must stay fixed.
-->
 
<x-calendar lock-month-year /> 
 
<!-- Combined with constraints, locks selection to a fixed period -->
<x-calendar lock-month-year
            min-date="2026-04-01"
            max-date="2026-04-30" />

lock-month-year and month-year-only cannot be used together, month-year-only would freeze the component because the picker is the only interaction surface.

# Other Options

In addition to the methods demonstrated above, all other methods available in the date component are also available in the Calendar component.