A flexible calendar component for date selection. Supports single dates, multiple dates, and date ranges. Perfect for scheduling and booking systems.
|
<flux:calendar />
<flux:calendar value="2025-03-26" />
<flux:calendar wire:model="date" />
<?phpuse Illuminate\Support\Carbon;use Livewire\Component;class BookAppointment extends Component { public Carbon $date; public function mount() { $this->date = now(); }}
Select multiple non-consecutive dates.
|
<flux:calendar multiple />
<flux:calendar multiple value="2025-03-02,2025-03-05,2025-03-15"/>
<flux:calendar multiple wire:model="dates" />
<?phpuse Illuminate\Support\Carbon;use Livewire\Component;class RequestTimeOff extends Component { public array $dates = []; public function mount() { $this->dates = [ now()->format('Y-m-d'), now()->addDays(1)->format('Y-m-d'), ]; }}
Select a range of dates.
|
<flux:calendar mode="range" />
<flux:calendar mode="range" value="2025-03-02/2025-03-06" />
<flux:calendar mode="range" wire:model="range" />
<?phpuse Livewire\Component;class BookFlight extends Component { public ?array $range; public function book() { // ... $flight->depart_on = $this->range['start']; $flight->return_on = $this->range['end']; // ... }}
<?phpuse Livewire\Component;use Flux\DateRange;class BookFlight extends Component { public ?DateRange $range; public function book() { // ... $flight->depart_on = $this->range->start(); $flight->return_on = $this->range->end(); // ... }}
<!-- Set minimum and maximum range limits --><flux:calendar mode="range" min-range="3" max-range="10" /><!-- Control number of months shown --><flux:calendar mode="range" months="2" />
Adjust the calendar's size to fit your layout. Available sizes include xs, sm, lg, xl, and 2xl.
|
<flux:calendar size="xl" />
Create a non-interactive calendar for display purposes.
|
<flux:calendar static value="2025-03-26" size="xs" :navigation="false"/>
Restrict the selectable date range by setting minimum and maximum boundaries.
|
<flux:calendar max="2025-03-26" />
<!-- Prevent selection before today... --><flux:calendar min="today" /><!-- Prevent selection after today... --><flux:calendar max="today" />
Disable specific dates from being selected. Useful for blocking out holidays, showing booked dates, or indicating unavailable time slots.
|
<flux:calendar unavailable="2025-03-25,2025-03-27" />
Add a shortcut button to quickly navigate to today's date. When viewing a different month, it jumps to the current month. When already viewing the current month, it selects today's date.
|
<flux:calendar with-today />
Enable quick navigation by making the month and year in the header selectable.
|
<flux:calendar selectable-header />
Display a consistent number of weeks in every month. Prevents layout shifts when navigating between months with different numbers of weeks.
|
<flux:calendar fixed-weeks />
By default, the first day of the week will be automatically set based on the user's locale. You can override this by setting the start-day attribute to any day of the week.
|
<flux:calendar start-day="1" />
Set the date that the calendar will open to. Otherwise, the calendar defaults to the selected date's month, or the current month.
|
<flux:calendar open-to="2026-04-01" />
Display the week number for each week.
# |
|
---|---|
|
|
<flux:calendar week-numbers />
By default, the calendar will use the browser's locale (e.g. navigator.language).
You can override this behavior by setting the locale attribute to any valid locale string (e.g. fr for French, en-US for English, etc.):
|
<flux:calendar locale="ja-JP" />
<flux:calendar wire:model.live="range" />
<?phpuse Livewire\Component;use Flux\DateRange;class Dashboard extends Component { public DateRange $range;}
<?phpuse Livewire\Component;use Flux\DateRange;class Dashboard extends Component { public DateRange $range; public function mount() { $this->range = new DateRange(now(), now()->addDays(7)); }}
<?phpuse Livewire\Attributes\Session;use Livewire\Component;use Flux\DateRange;class Dashboard extends Component { #[Session] public DateRange $range;}
<?phpuse Livewire\Attributes\Computed;use Livewire\Component;use App\Models\Order;use Flux\DateRange;class Dashboard extends Component { public ?DateRange $range; #[Computed] public function orders() { return $this->range ? Order::whereBetween('created_at', $this->range)->get() : Order::all(); }}
$range = new Flux\DateRange( now()->subDays(1), now()->addDays(1),);// Get the start and end dates as Carbon instances...$start = $range->start();$end = $range->end();// Check if the range contains a date...$range->contains(now());// Get the number of days in the range...$range->length();// Loop over the range by day...foreach ($range as $date) { // $date is a Carbon instance...}// Get the range as an array of Carbon instances representing each day in the range...$range->toArray();
$orders = Order::whereBetween('created_at', $range)->get();
Prop
|
Description
|
---|---|
wire:model |
Binds the calendar to a Livewire property. See the wire:model documentation for more information.
|
name |
Name attribute for the calendar. Automatically set when using wire:model.
|
value |
Selected date(s). Format depends on mode: single date (Y-m-d), multiple dates (comma-separated Y-m-d), or range (Y-m-d/Y-m-d).
|
mode |
Selection mode. Options: single (default), multiple, range.
|
min |
Earliest selectable date. Can be a date string or "today".
|
max |
Latest selectable date. Can be a date string or "today".
|
size |
Calendar size. Options: base (default), xs, sm, lg, xl, 2xl.
|
months |
Number of months to display. Default: 1 for single/multiple modes, 2 for range mode.
|
min-range |
Minimum number of days that can be selected in range mode.
|
max-range |
Maximum number of days that can be selected in range mode.
|
navigation |
If false, hides month navigation controls. Default: true.
|
static |
If true, makes the calendar non-interactive (display-only). Default: false.
|
multiple |
If true, enables multiple date selection mode. Default: false.
|
week-numbers |
If true, displays week numbers in the calendar. Default: false.
|
selectable-header |
If true, displays month and year dropdowns for quick navigation. Default: false.
|
with-today |
If true, displays a button to quickly navigate to today's date. Default: false.
|
with-inputs |
If true, displays date inputs at the top of the calendar for manual date entry. Default: false.
|
locale |
Set the locale for the calendar. Examples: fr, en-US, ja-JP.
|
Attribute
|
Description
|
---|---|
data-flux-calendar |
Applied to the root element for styling and identification.
|
A specialized object for handling date ranges when using `mode="range"`.
Method
|
Description
|
---|---|
$range->start() |
Get the start date as a Carbon instance.
|
$range->end() |
Get the end date as a Carbon instance.
|
$range->days() |
Get the number of days in the range.
|
$range->contains(date) |
Check if the range contains a specific date.
|
$range->length() |
Get the length of the range in days.
|
$range->toArray() |
Get the range as an array with start and end keys.
|
$range->preset() |
Get the current preset as a DateRangePreset enum value, if any.
|
Static Method
|
Description
|
---|---|
DateRange::today() |
Create a DateRange for today.
|
DateRange::yesterday() |
Create a DateRange for yesterday.
|
DateRange::thisWeek() |
Create a DateRange for the current week.
|
DateRange::lastWeek() |
Create a DateRange for the previous week.
|
DateRange::last7Days() |
Create a DateRange for the last 7 days.
|
DateRange::thisMonth() |
Create a DateRange for the current month.
|
DateRange::lastMonth() |
Create a DateRange for the previous month.
|
DateRange::thisYear() |
Create a DateRange for the current year.
|
DateRange::lastYear() |
Create a DateRange for the previous year.
|
DateRange::yearToDate() |
Create a DateRange from January 1st to today.
|