Componente de selección de fechas basado en tokens, con soporte para selección única, rangos y personalización de estados dinámicos.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Single · Range · Multiple
Importa los estilos base y el componente Calendar.
1import 'nave-ui-library/styles.css'2import { Calendar } from 'nave-ui-library/react'Estado Active (morado) para la selección y Current (gris) para el día de hoy.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Seleccionado: 6/5/2026
Selección de períodos con botones de tamaño fijo de 32px para preservar simetría.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Todas las props disponibles para el componente Calendar.
| Prop | Type | Default | Description |
|---|---|---|---|
modereq | "single" | "range" | "multiple" | — | Define el tipo de selección permitida. |
selected | Date | DateRange | undefined | — | La fecha o conjunto de fechas actualmente seleccionadas. |
onSelect | function | — | Callback ejecutado al cambiar la selección. |
showOutsideDays | boolean | true | Muestra u oculta los días que no pertenecen al mes actual. |
tokens | Partial<ThemeTokensBase> | — | Override local de tema/tokens. |
1{2 "name": "Calendar",3 "description": "Calendario para selección de fechas con soporte para estados dinámicos y selección de rangos.",4 "component": "Calendar",5 "files": [6 "components/base/data-entry/inputs/Calendar.tsx"7 ],8 "dependencies": [9 "react",10 "react-day-picker"11 ],12 "props": {13 "mode": {14 "type": "'single' | 'multiple' | 'range'",15 "description": "Selection mode."16 }17 }18}