Calendar

component

Pick a date, several dates or a range, inline in the page: keyboard navigation, disabled dates and bounds, several months, locales and right-to-left, and hidden inputs a form or a Live Component reads.

Install

php bin/console ux:install calendar \
    --kit=https://github.com/xormania/uxor:0.3.0

README Source

What it installs

Copies: assets/ → assets/
templates/ → templates/
Composer: twig/extra-bundle
twig/html-extra:^3.24.0
twig/intl-extra:^3.24.0
symfony/ux-icons
symfony/ux-twig-component:^3.5
tales-from-a-dev/twig-tailwind-extra:^1.3.0

Examples (5)

Default

Light

Dark

Code

<twig:Calendar today="2026-03-15" selected="2026-03-12" captionLayout="dropdown" class="mx-auto rounded-base border border-default bg-neutral-primary" />

Range over two months

Light

Dark

Code

<twig:Calendar
    mode="range"
    today="2026-03-15"
    month="2026-03-01"
    :selected="['2026-03-09', '2026-03-13']"
    :disabled="['2026-03-21', '2026-03-22']"
    numberOfMonths="2"
    class="mx-auto rounded-base border border-default bg-neutral-primary"
/>

Several dates

Light

Dark

Code

<twig:Calendar
    mode="multiple"
    today="2026-03-15"
    month="2026-03-01"
    :selected="['2026-03-04', '2026-03-11', '2026-03-18']"
    class="mx-auto rounded-base border border-default bg-neutral-primary"
/>

Presets and booked dates

Light

Dark

Code

{% set booked = ['2026-03-17', '2026-03-18', '2026-03-19'] %}
<twig:Calendar
    today="2026-03-15"
    selected="2026-03-16"
    :disabled="booked"
    :modifiers="{booked: booked}"
    minDate="2026-03-15"
    weekStartsOn="1"
    showWeekNumber
    class="mx-auto rounded-base border border-default bg-neutral-primary [&_[data-booked=true]_button]:text-fg-danger"
>
    <div class="mt-3 flex gap-2 border-t border-default pt-3">
        {% for preset in [{label: 'Today', date: '2026-03-15'}, {label: 'Tomorrow', date: '2026-03-16'}, {label: 'In a week', date: '2026-03-22'}] %}
            <twig:Button variant="outline" size="xs" class="flex-1" data-action="click->calendar#selectDate" data-calendar-date-param="{{ preset.date }}">{{ preset.label }}</twig:Button>
        {% endfor %}
    </div>
</twig:Calendar>

Locale and right to left

Light

Dark

Code

<div dir="rtl" class="flex justify-center">
    <twig:Calendar today="2026-03-15" selected="2026-03-12" locale="ar" class="rounded-base border border-default bg-neutral-primary" />
</div>