Calendar
Date selection with day/month/year views.
Vista previa
| 0 | 0 | 0 | 0 | 0 | 0 | 1 |
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 | 31 | 0 | 0 | 0 | 0 | 0 |
Este ejemplo usa estilos solo para documentación. En producción, utiliza una de las recetas incluidas (CSS, Tailwind o UnoCSS).
Date selection with day/month/year views.
Uso
Compón Root, Header, PrevButton, Title, NextButton, Grid, Cell.
import * as Calendar from "@solidiom/calendar"
;<Calendar.Root>Contenido de Calendar</Calendar.Root>Instalación
Instala el paquete con pnpm add @solidiom/calendar. El paquete requiere dependencias pares compatibles de solid-js y @solidjs/web.
Partes
Calendar expone 7 partes:
- Root —
data-part="root". - Header —
data-part="header". - PrevButton —
data-part="prevbutton". - Title —
data-part="title". - NextButton —
data-part="nextbutton". - Grid —
data-part="grid". - Cell —
data-part="cell".
Estilos
Calendar lleva los atributos data-scope="calendar" y data-part en cada parte para la selección CSS/receta. Los atributos de estado como data-state, data-disabled y data-highlighted se exponen donde corresponda.
Interacción con teclado
Este primitivo no tiene interacción con teclado. Renderiza contenido que no recibe foco ni responde a eventos de teclado de forma independiente.
Composición
Calendar está diseñado para componerse con otras primitivas. Sus partes pueden combinarse con Field, Button u otras primitivas según sea necesario.
Renderizado SSR e hidratación
Calendar se renderiza como HTML semántico durante el renderizado en servidor. El comportamiento interactivo (manejadores de teclado, gestión de estado) se activa en la hidratación sin desplazamiento de diseño.