Calendar
Un componente de calendario interactivo con soporte para selección de fechas, diferentes estilos y calendarios internacionales.
import { Calendar } from "stofli-ui";Un calendario que muestra el mes actual y permite seleccionar fechas.
Usando minValue con la fecha actual, solo permite seleccionar fechas desde hoy en adelante.
Usando maxValue con la fecha actual, solo permite seleccionar fechas hasta hoy.
Seis estilos diferentes usando la prop variant: default, primary, secondary, success, warning y danger.
El componente soporta diferentes sistemas de calendario y localizaciones usando las props calendar y locale. La prop calendar permite especificar el sistema de calendario (por ejemplo: "chinese", "islamic-civil", "buddhist", "hebrew", etc.) y locale define el idioma y la región (por ejemplo: "zh-CN" para chino, "ar-SA" para árabe, "th-TH" para tailandés).
Cuatro opciones de redondeo usando la prop radius: none, sm, md y full.
Usando readOnly y value, muestra un calendario no interactivo fijado en marzo de 2025.
Personaliza cualquier parte del calendario usando las propiedades de className con clases de Tailwind CSS.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
value | Date | - | Fecha seleccionada |
onChange | (date: Date) => void | - | Función llamada al seleccionar una fecha |
className | string | - | Clases para el contenedor principal |
headerClassName | string | - | Clases para la cabecera del calendario |
weekdaysClassName | string | - | Clases para el contenedor de días de la semana |
weekdayClassName | string | - | Clases para cada día de la semana |
daysContainerClassName | string | - | Clases para el contenedor de días |
dayClassName | string | - | Clases para cada día del calendario |
selectedDayClassName | string | - | Clases para el día seleccionado |
disabledDayClassName | string | - | Clases para los días deshabilitados |
calendarTitleClassName | string | - | Clases para el título del calendario |
monthTitleClassName | string | - | Clases para el título del mes |
navigationButtonClassName | string | - | Clases para los botones de navegación |
variant | "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "default" | Variante de estilo |
radius | "none" | "sm" | "md" | "full" | "md" | Radio de las esquinas |
readOnly | boolean | false | Modo solo lectura |
minValue | Date | - | Fecha mínima seleccionable |
maxValue | Date | - | Fecha máxima seleccionable |
calendar | "buddhist" | "ethiopic" | "ethioaa" | "coptic" | "hebrew" | "indian" | "islamic-civil" | "islamic-tbla" | "islamic-umalqura" | "japanese" | "persian" | "roc" | "gregory" | "chinese" | "gregory" | Sistema de calendario |
locale | string | "es" | Código de idioma (ej: "es", "en", "zh-CN") |