Components
Flux Pro component
This component is only available in the Pro version of Flux.

Calendar

A flexible calendar component for date selection. Supports single dates, multiple dates, and date ranges. Perfect for scheduling and booking systems.

Copy to clipboard

Basic Usage

Set the initial selected date using the value prop with a Y-m-d formatted date string:
Copy to clipboard
You can also bind the selection to a Livewire property using wire:model:
Copy to clipboard
Now you can access the selected date from your Livewire component using either a Carbon instance or a Y-m-d formatted string:
Copy to clipboard

Multiple dates

Select multiple non-consecutive dates.

Copy to clipboard
Set multiple selected dates using a comma-separated list in the value prop:
Copy to clipboard
You can also bind the selection to a Livewire property using wire:model:
Copy to clipboard
You can access the selected dates in your Livewire component using an array of Y-m-d formatted date strings:
Copy to clipboard

Date range

Select a range of dates.

Copy to clipboard
Set the initial range using the value prop with a start and end date separated by a forward slash:
Copy to clipboard
You can also bind the selection to a Livewire property using wire:model:
Copy to clipboard
Now you can access the selected range from your Livewire component using an associative array of Y-m-d formatted date strings:
Copy to clipboard
Alternatively, you can use the specialized DateRange object for enhanced functionality:
Copy to clipboard
We highly recommend using the DateRange object for range selection, it provides a lot of useful functionality.

Range Configuration

Control range behavior with these props:
Copy to clipboard

Size

Adjust the calendar's size to fit your layout. Available sizes include xs, sm, lg, xl, and 2xl.

Copy to clipboard

Static

Create a non-interactive calendar for display purposes.

Copy to clipboard

Min/max dates

Restrict the selectable date range by setting minimum and maximum boundaries.

Copy to clipboard
You can also use the convenient "today" shorthand:
Copy to clipboard

Unavailable dates

Disable specific dates from being selected. Useful for blocking out holidays, showing booked dates, or indicating unavailable time slots.

Copy to clipboard

With today shortcut

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.

Copy to clipboard

Selectable header

Enable quick navigation by making the month and year in the header selectable.

Copy to clipboard

Fixed weeks

Display a consistent number of weeks in every month. Prevents layout shifts when navigating between months with different numbers of weeks.

Copy to clipboard

Start day

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.

Copy to clipboard

Open to

Set the date that the calendar will open to. Otherwise, the calendar defaults to the selected date's month, or the current month.

Copy to clipboard

Week numbers

Display the week number for each week.

Copy to clipboard

Localization

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.):

Copy to clipboard

The DateRange object

Flux provides a specialized Flux\DateRange object that extends the native CarbonPeriod class. This object provides a number of convenience methods to easily create and manage date ranges.
First, it's worth noting that most of the time, you will want to use wire:model.live to bind the range property to a DateRange object. This will automatically update the range property whenever the user selects a date range:
Copy to clipboard
Now, in your component, you can type hint the range property as a DateRange object:
Copy to clipboard

Instantiation

You can initialize a DateRange object by passing a start and end date to the DateRange constructor from something like the mount method:
Copy to clipboard

Persisting to the session

You can persist a DateRange object in the user's session by using the #[Session] attribute:
Copy to clipboard

Using with Eloquent

You can use the DateRange object with Eloquent's whereBetween() method to filter queries by date range:
Copy to clipboard

Available methods

The DateRange object extends the native CarbonPeriod class, so it inherits all of its methods. Here are a few examples:
Copy to clipboard
You can also use it anywhere Eloquent utilities expect a CarbonPeriod instance:
Copy to clipboard

Reference

flux:calendar

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.

DateRange Object

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.
Copyright © 2025 Wireable LLC ·Terms of Service
Built with by
Caleb Porzio and Hugo Sainte-Marie