Guides

Installation Upgrade guide Principles Patterns Theming Dark mode Customization Help

Layouts

Header Sidebar

Components

Accordion Autocomplete Badge Button Breadcrumbs Calendar

New

Card Chart

New

Checkbox Command Context Date picker

New

Dropdown Editor Field Heading Icon Input Modal Navbar Radio Select Separator Switch Table Tabs Textarea Toast Tooltip

Flux Pro component

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

Upgrade to Pro -> Upgrade to Pro ->

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.

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.

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.

Check out everything you can do with the

DateRange

object ->

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.

Static

Create a non-interactive calendar for display purposes.

Min/max dates

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

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.

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.

Selectable header

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

Fixed weeks

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

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.

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.

Week numbers

Display the week number for each week.

Localization

By default, the calendar will use the document's locale (e.g. <html lang="en-US">), otherwise, it 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.):

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

Built with by
Caleb Porzio and Hugo Sainte-Marie