Calendar

A flexible calendar component for date selection and display.

Examples

Basic Calendar

Standard single date selection.

Selected:

blade

<div x-data="{ date: '2023-10-15' }">
    ...
    <x-plume::calendar x-model="date" />
    <p class="mt-4 text-xs text-foreground/50 dark:text-background-400">
        Selected: <span class="font-mono text-primary" x-text="date"></span>
    </p>
    ...
</div>

Date Range

Select a range of dates by setting the mode prop to 'range'.

Start:
End:

blade

<div x-data="{ range: [] }">
    ...
    <x-plume::calendar mode="range" x-model="range" />
    <p class="mt-4 text-xs text-foreground/50 dark:text-background-400">
        Start: <span class="font-mono text-primary" x-text="range[0] || 'none'"></span><br>
        End: <span class="font-mono text-primary" x-text="range[1] || 'none'"></span>
    </p>
    ...
</div>

Restrictions

Use min and max props to limit selectable dates.

Selected:

blade

<div x-data="{ date: '' }">
    ...
    <x-plume::calendar x-model="date" min="2023-10-10" max="2023-10-20" />
    <p class="mt-4 text-xs text-foreground/50 dark:text-background-400">
        Selected: <span class="font-mono text-primary" x-text="date"></span>
    </p>
    ...
</div>

Form Integration

Using the calendar component within an x-plume::form with a model prop.

blade

<x-plume::form 
    formData="{ 'appointment_date': '' }">
    <x-plume::calendar model="appointment_date" />
</x-plume::form>

Prop	Type	Default	Description
model	string	null	AlpineJS model name for the selected date(s).
value	mixed	null	Initial value for the calendar.
min	string	null	Minimum selectable date (YYYY-MM-DD).
max	string	null	Maximum selectable date (YYYY-MM-DD).
mode	string	'single'	Selection mode: 'single' or 'range'.
onDateSelect	string	null	AlpineJS expression or function to call when a date is selected.

Usage

blade

<x-plume::calendar />