Logo
Neura UI
Loading…
Logo
All pages 86

Calendar

Calendar component for selecting dates with navigation and customization options

Basic Usage

Basic calendar with default settings:
blade 
<neura::calendar />

With Default Value

Set a default selected date:
blade 
<neura::calendar value="2024-12-25" />

With Min and Max Dates

Restrict date selection with minimum and maximum dates:
blade 
<neura::calendar 
    minDate="2024-12-01" 
    maxDate="2024-12-31"
/>

With Disabled Dates

Disable specific dates:
blade 
<neura::calendar 
    :disabledDates="['2024-12-06', '2024-12-13', '2024-12-20']"
/>

Disabled State

Disable the entire calendar:
blade 
<neura::calendar disabled />

First Day of Week

Change the first day of the week (0 = Sunday, 1 = Monday):
blade 
<neura::calendar :firstDayOfWeek="1" />

Month and Year Dropdowns

Use dropdown selectors in the caption for fast month and year navigation:
blade 
<neura::calendar caption-layout="dropdown" />

Disabled Days of Week

Disable specific days of the week, like weekends (0 = Sunday, 6 = Saturday):
blade 
<neura::calendar :disabled-days-of-week="[0, 6]" />

Today and Reset Buttons

Show optional footer actions to jump to today or clear the selection:
blade 
<neura::calendar show-today show-reset />

Multiple Selection

Enable multiple date selection with the multiple attribute:
blade 
<neura::calendar multiple :value="['2024-12-10', '2024-12-15', '2024-12-20']" />

Range Selection

Select a date range with the range attribute. While picking, hovering previews the range before the end date is confirmed:
blade 
<neura::calendar range :value="['start' => '2024-12-05', 'end' => '2024-12-15']" />

Two Months

Display multiple months side by side, ideal for range selection:
blade 
<neura::calendar range :months="2" />

Preset Ranges

Offer common range shortcuts in a sidebar. Clicking a preset applies the range and navigates to it:
javascript 
<neura::calendar
    range
    :presets="[
        'Today' => [now()->toDateString(), now()->toDateString()],
        'Last 7 days' => [now()->subDays(6)->toDateString(), now()->toDateString()],
        'Last 30 days' => [now()->subDays(29)->toDateString(), now()->toDateString()],
        'This month' => [now()->startOfMonth()->toDateString(), now()->endOfMonth()->toDateString()],
    ]"
/>

Calendar with Presets

Presets also work for single date selection:
blade 
<neura::calendar
    :value="now()->toDateString()"
    :presets="[
        'Today' => now()->toDateString(),
        'Tomorrow' => now()->addDay()->toDateString(),
        'In a week' => now()->addWeek()->toDateString(),
    ]"
/>

Day Labels (Pricing)

Attach a small label to any date, for example nightly prices. Cells grow automatically to fit the label:
blade 
<neura::calendar
    :day-labels="[
        '2026-07-01' => '$120',
        '2026-07-02' => '$95',
        '2026-07-03' => '$150',
        
    ]"
/>

Event List Footer

Mark dates that have events with a dot and use the footer slot to show the selected day's agenda. Inside the slot you can use the calendar's Alpine scope, including selectedEvents and eventsFor(date):
blade
No events for this day 
<neura::calendar :value="now()->toDateString()" :events="$events">
    <x-slot:footer>
        <div class="space-y-1.5">
            <template x-for="event in selectedEvents" :key="event.title">
                <div class="flex items-center gap-2 text-sm">
                    <span class="size-1.5 rounded-full bg-primary-600 dark:bg-primary-400"></span>
                    <span class="text-fg" x-text="event.title"></span>
                    <span class="ms-auto text-xs text-fg-muted" x-text="event.time"></span>
                </div>
            </template>
            <div x-show="!selectedEvents.length" class="text-sm text-fg-muted">
                No events for this day
            </div>
        </div>
    </x-slot:footer>
</neura::calendar>

Keyboard Navigation

The calendar grid is fully keyboard accessible:
Key Action
Arrow keys Move focus by day (left/right) or week (up/down)
Home / End Move focus to the start / end of the week
PageUp / PageDown Move focus to the previous / next month
Enter / Space Select the focused date

With Livewire

Use with Livewire for reactive date selection:
PHP 
class BookingForm extends Component
{
    public $date = '';
    public $dates = [];
    public $dateRange = ['start' => null, 'end' => null];
}


<neura::calendar wire:model.live="date" />
<neura::calendar multiple wire:model.live="dates" />
<neura::calendar range wire:model.live="dateRange" />

With Form Integration

Use the calendar in a form with a name attribute:
blade
Select Date 
<neura::field>
    <neura::label>Select Date</neura::label>
    <neura::calendar name="booking_date" value="2026-07-20" />
</neura::field>

Props

Property Type Default Description
name string null Name attribute for form submission
value string|array null Default selected date (YYYY-MM-DD), array of dates in multiple mode, or ['start' => date, 'end' => date] in range mode
minDate string null Minimum selectable date (YYYY-MM-DD)
maxDate string null Maximum selectable date (YYYY-MM-DD)
disabled boolean false Disable the calendar
disabledDates array [] Array of disabled dates (YYYY-MM-DD)
disabledDaysOfWeek array [] Days of the week to disable (0 = Sunday … 6 = Saturday)
firstDayOfWeek number 0 First day of week (0 = Sunday, 1 = Monday)
multiple boolean false Enable multiple date selection
range boolean false Enable date range selection
months number 1 Number of months displayed side by side (1–4)
captionLayout string label label or dropdown (month and year selects)
showOutsideDays boolean true Show days from adjacent months
showToday boolean false Show a footer button that jumps to today
showReset boolean false Show a footer button that clears the selection
fromYear number null First year in the year dropdown
toYear number null Last year in the year dropdown
locale string en Locale for month, weekday and accessibility labels
presets array [] Sidebar shortcuts: label => date (single) or [start, end] (range)
dayLabels array [] Map of date => label under the day number (e.g. prices)
events array [] Map of date => events; marked dates get a dot; footer can use selectedEvents
footer slot — Content below the grid; has access to the calendar Alpine scope

Events

The calendar emits events that you can listen to:
Event Payload Description
date-selected { date, dates } Fired when a date (or range / multi selection) changes
blade
Selected: 
<div x-on:date-selected="console.log($event.detail)">
    <neura::calendar />
</div>