Calendar

A date field component that allows users to enter and edit date.

Component Code 
<x-aui::calendar class="rounded-md border" mode="single" :selected="now()" />

The calendar supports multiple modes, it also allows disabling certain dates

Prop Type Description
mode "single" | "multiple" | "range" Set a selection mode, defaults to single
disabled array
More info below		 Disabled days that cannot be selected.

Selection Modes

The calendar supports 3 modes

  • Single mode
  • Multiple mode
  • Range mode

Single mode

When in single mode ie when mode="single", only one day can be selected at a time. You can listen for the select event using alpine Js triggered when a date has been selected. The $event object contains a details.value containing a JavaScript date object of the selected day

Component Code 
<div x-data="{value: null}" class="max-w-72">
    <x-aui::calendar
        class="rounded-md border"
        mode="single"
        :selected="now()"
        @select="value = $event.detail.value.toISOString().split('T')[0]"
    />
    <p x-text="value ? 'Selected date is '+value : 'No Date Is Selected' " class="my-2 w-full"></p>
</div>
Prop Type Description
selected "string" | "Date" The date to be selected initially.
@select Alpine event listener Event Listener for when a date is selected
required "boolean" Ensures at least 1 date is chosen.

Multiple mode

When in multiple mode ie when mode="multiple", multiple days can be selected at once. You can listen for the select event using alpine triggered when one or more dates have been selected. The $event object contains a details.value containing an array of JavaScript date objects of the selected days.

Component Code 
<div x-data="{value: []}" class="max-w-72">
    <x-aui::calendar
        class="rounded-md border"
        mode="multiple"
        :selected="[now(), now()->addDays(2),  now()->addDays(14)]"
        @select="
            value = []
            $event.detail.value.forEach(
                element => value.push(element.toISOString().split('T')[0])
            )
        "
    />
    <p
        x-text="'Selected dates are '+value.toString()"
        class="my-2 break-words"
    ></p>
</div>

You can also pass a max which specifies the maximum number of items selectable

Component Code 
<div x-data="{value: []}" class="max-w-72">
    <x-aui::calendar
        class="rounded-md border"
        mode="multiple"
        max="5"
        :selected="[now(), now()->addDays(2),  now()->addDays(14)]"
        @select="
            value = []
            $event.detail.value.forEach(
                element => value.push(element.toISOString().split('T')[0])
            )
        "
    />
    <p
        x-text="'Selected dates are '+value.toString()"
        class="my-2 break-words"
    ></p>
</div>
Prop Type Description
selected "string[]" | "Date[]" The date to be selected initially.
max "int" The maximum selectable items.
@select Alpine event listener Event Listener for when a date is selected.

Range mode

When in range mode ie when mode="range", a from and to date is to be selected such that the from is an earlier date than the to date. You can listen for the select event using alpine triggered when a from and to date have been selected. The $event object contains a details.value containing an array of JavaScript date objects of the selected days.

Component Code 
<div x-data="{value: []}" class="max-w-72">
    <x-aui::calendar
        class="rounded-md border"
        mode="range"
        :selected="['from' => now(), 'to' => now()->addDays(14)]"
        @select="
            value = []
            value['from'] = $event.detail.value.from.toISOString().split('T')[0]
            value['to'] = $event.detail.value.to.toISOString().split('T')[0]
        "
    />
    <p
        x-text="'Selected range is from '+value['from']+' to '+value['to']"
        class="my-2 break-words"
    ></p>
</div>

Just like in multiple mode, you can pass a max and min. The max and min attributes represent the maximum and minimum days from the from date that can be selected respectively

Component Code 
<div x-data="{value: []}" class="max-w-72">
    <x-aui::calendar
        class="rounded-md border"
        mode="range"
        :selected="['from' => now(), 'to' => now()->addDays(14)]"
        max="15"
        min="6"
        @select="
            value = []
            value['from'] = $event.detail.value.from.toISOString().split('T')[0]
            value['to'] = $event.detail.value.to.toISOString().split('T')[0]
        "
    />
    <p
        x-text="'Selected range is from '+value['from']+' to '+value['to']"
        class="my-2 break-words"
    ></p>
</div>
Prop Type Description
selected `"array with from and to " The date to be selected initially.
min "int" The minimum amount of dates between from and to.
max "int" The maximum amount of dates between from and to.
@select Alpine event listener Event Listener for when a date is selected.
required "boolean" Ensures from date is chosen at least.

Disabling dates

You can disable certain dates by passing an array of rules to the disabled attribute

Disabling certain dates

To disable certain days, an array with the key dates and values of the dates you'll like to disable should be passed to the disabled attribute.

Component Code 
<x-aui::calendar
    class="rounded-md border"
    mode="single"
    :disabled="['dates' => [now()]]"
/>

Disabling a range of days

To disable a range of days, an array with a before and after is passed to the disabled attribute.

Component Code 
<x-aui::calendar
    class="rounded-md border"
    mode="single"
    :disabled="['before' => now(), 'after' => now()->addDays(10)]"
/>

Disabling day of the week

To disable a range of days, an array with a dayOfWeek key and an int value from 0 - 6 is passed, where 0 represents sunday, and 6 represents saturday

Disable the worst day of the week

Component Code 
<div>
    <p>Disable the worst day of the week</p>
    <x-aui::calendar
        class="rounded-md border"
        mode="single"
        :disabled="['dayOfWeek' => 1]"
    />
</div>

Multiple disable rules

You can pass an array of these rules to disable dates based on multiple rules

Component Code 
<x-aui::calendar
    class="rounded-md border"
    mode="single"
    :disabled="[
        ['before' => now()->subDays(10), 'after' => now()->addDays(10)],
        ['dates' => [now(), now()->subDays(1)]],
        ['dayOfWeek' => 3],
        ['dayOfWeek' => 5]
    ]"
/>