TallStackUI 4.0 is here! Seven new components and thousand of improvements. See what's new .

Powerful suite of Blade components for TALL Stack apps

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

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.

# Flat Look 

<x-calendar shadowless />
<x-calendar bordered />
<x-calendar shadowless bordered />

# Start Day
NEW

An option to set the first day of week. 

<!--
0: Sunday, (default)
1: Monday,
2: Tuesday,
3: Wednesday,
4: Thursday,
5: Friday,
6: Saturday -->
 
<x-calendar start="1" />
You can set the first day of the week for every calendar in the configuration file. The inline attribute always wins, so start="0" keeps Sunday on a single calendar. Values outside 0 to 6 throw, including negatives.

# Other Options

All other methods available in the date component are also available in the Calendar component.

With one exception: format has no effect here. The calendar is inline and has no input to render a formatted value, so the only string it produces is the model, and the model is always written as YYYY-MM-DD , or YYYY-MM under month-year-only .

Code highlighting provided by Torchlight