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.

Built with by
Caleb Porzio and Hugo Sainte-Marie