Calendar
Calendar component for selecting dates with navigation and customization options
Basic Usage
Basic calendar with default settings:
<neura::calendar />With Default Value
Set a default selected date:
<neura::calendar value="2024-12-25" />With Min and Max Dates
Restrict date selection with minimum and maximum dates:
<neura::calendar
minDate="2024-12-01"
maxDate="2024-12-31"
/>With Disabled Dates
Disable specific dates:
<neura::calendar
:disabledDates="['2024-12-06', '2024-12-13', '2024-12-20']"
/>Disabled State
Disable the entire calendar:
<neura::calendar disabled />First Day of Week
Change the first day of the week (0 = Sunday, 1 = Monday):
<neura::calendar :firstDayOfWeek="1" />Multiple Selection
Enable multiple date selection with the multiple attribute:
<neura::calendar multiple :value="['2024-12-10', '2024-12-15', '2024-12-20']" />Range Selection
Select a date range with the range attribute:
<neura::calendar range :value="['start' => '2024-12-05', 'end' => '2024-12-15']" />With Livewire
Use with Livewire for reactive date selection:
class BookingForm extends Component
{
public $date = '';
public $dates = [];
public $dateRange = ['start' => null, 'end' => null];
public function render()
{
return view('livewire.booking-form');
}
}
<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:
Select Date
<neura::field>
<neura::label>Select Date</neura::label>
<neura::calendar name="booking_date" value="2024-12-15" />
</neura::field>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | null | Name attribute for form submission |
| value | string|array | null | Default selected date (YYYY-MM-DD format), array of dates in multiple mode, or ['start' => date, 'end' => date] in range mode |
| minDate | string | null | Minimum selectable date (YYYY-MM-DD format) |
| maxDate | string | null | Maximum selectable date (YYYY-MM-DD format) |
| disabled | boolean | false | Disable the calendar |
| disabledDates | array | [] | Array of disabled dates (YYYY-MM-DD format) |
| firstDayOfWeek | number | 0 | First day of week (0 = Sunday, 1 = Monday) |
| multiple | boolean | false | Enable multiple date selection (value should be an array) |
| range | boolean | false | Enable date range selection (value should be ['start' => date, 'end' => date]) |
| locale | string | en | Locale for date formatting |
Events
The calendar emits events that you can listen to:
| Event | Payload | Description |
|---|---|---|
| date-selected | { date: string } | Fired when a date is selected |
<div x-on:date-selected="console.log($event.detail.date)">
<neura::calendar />
</div>