BlatUI
Blocks

Calendar 12

<x-layouts.app title="Calendar 12">
    <div class="flex min-h-svh items-center justify-center p-6">
        <x-ui.card>
            <x-ui.card-header class="relative border-b">
                <x-ui.card-title>Reserva una cita</x-ui.card-title>
                <x-ui.card-description>Selecciona las fechas para tu cita</x-ui.card-description>
                <x-ui.select value="es">
                    <x-ui.select-trigger class="absolute right-4 top-4 w-[100px]">
                        <x-ui.select-value placeholder="Language" />
                    </x-ui.select-trigger>
                    <x-ui.select-content align="end">
                        <x-ui.select-item value="es">Español</x-ui.select-item>
                        <x-ui.select-item value="en">English</x-ui.select-item>
                    </x-ui.select-content>
                </x-ui.select>
            </x-ui.card-header>
            <x-ui.card-content class="pt-4">
                <x-ui.calendar mode="range" :value="['from' => '2025-09-09', 'to' => '2025-09-17']" default-month="2025-09-09" :number-of-months="2" locale="es-ES" button-variant="outline" class="bg-transparent p-0" />
            </x-ui.card-content>
        </x-ui.card>
    </div>
</x-layouts.app>