Phara UI v2.x
Login

Calendar

An interactive date picker with single, range, and multiple selection modes. Supports min/max constraints, unavailable dates, a "Today" shortcut, and Livewire binding via wire:model.

Basic

Single-date selection by default. Click a day to select it; click again to deselect. Returns a Y-m-d string.

 
Blade 
<x-ui::calendar name="date" />
Range

Set mode="range" to select a start and end date. Hover between clicks to preview the range band. Returns start/end.

 
Blade 
<x-ui::calendar mode="range" name="period" />
Multiple

Set mode="multiple" to pick any number of individual dates. Returns a comma-separated Y-m-d string.

 
Blade 
<x-ui::calendar mode="multiple" name="dates" />
Sizes

Three cell sizes to match the density of your layout.

Small

 

Medium

 

Large

 
Blade 
<x-ui::calendar size="sm" />
<x-ui::calendar size="md" />
<x-ui::calendar size="lg" />
Constraints

Use min, max, and unavailable to restrict which dates can be selected. min="today" is a convenience shorthand.

min="today"

 

Unavailable dates

 
Blade 
{{-- Only today and future --}}
<x-ui::calendar min="today" />

{{-- Within the next 30 days --}}
<x-ui::calendar
    min="today"
    :max="now()->addDays(30)->format('Y-m-d')"
/>

{{-- Block specific dates --}}
<x-ui::calendar
    min="today"
    unavailable="2026-05-12,2026-05-19,2026-05-26"
/>
Livewire

Bind with wire:model. The hidden input dispatches input and change events on every selection so the Livewire property stays in sync.

Single

 

wire:model value

—

Range

 

wire:model value

—

Multiple

 

wire:model value

—

PHP 
// Livewire component
public string $single   = '';
public string $range    = '';
public string $multiple = '';

// Template — single
<x-ui::calendar wire:model="single" />

// Template — range
<x-ui::calendar mode="range" wire:model="range" />

// Template — multiple
<x-ui::calendar mode="multiple" wire:model="multiple" />
With Today

Add with-today to show a "Today" shortcut below the grid — clicking it jumps to the current month and selects today's date.

 
Blade 
<x-ui::calendar with-today />
Disabled

Add the disabled attribute to render the calendar as read-only — all interaction is blocked and the calendar renders at reduced opacity.

 
Blade 
<x-ui::calendar
    value="{{ now()->format('Y-m-d') }}"
    disabled
/>