'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
DatosAlea Pro
CalendarView
Un mes de eventos, como un calendario de pared.
import { parseDate } from '@alea/ui';import { CalendarView } from '@alea/pro';
Ejemplos
CalendarView
Eventos por día; presiona uno, o un día para agregar.
octubre de 2026
| lun | mar | mié | jue | vie | sáb | dom |
|---|---|---|---|---|---|---|
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-accent-strong…--alea-accent-subtle…--alea-border…--alea-chip-bg…--alea-chip-text…--alea-status-danger…--alea-status-danger-bg…--alea-status-info…--alea-status-info-bg…--alea-status-success…--alea-status-success-bg…--alea-status-warning…--alea-status-warning-bg…--alea-surface…--alea-surface-deep…--alea-surface-hover…--alea-text…--alea-text-faint…--alea-text-muted…
Space
--alea-space-3…
Radius
--alea-radius-full…--alea-radius-md…
Type
--alea-font-family-body…--alea-font-family-display…--alea-font-size-2xl…--alea-font-size-2xs…--alea-font-size-sm…--alea-font-size-xs…--alea-font-weight-light…--alea-font-weight-medium…--alea-font-weight-semibold…
Props
CalendarView props
Un mes de eventos, como un calendario de pared.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
eventsobligatoria | CalendarEvent[] | - | Los eventos: id, date (CalendarDate), title, tone opcional. |
className | string | - | Clases extra para el elemento raíz. |
defaultMonth | CalendarDate | - | El mes que se muestra primero. Por defecto este mes. |
maxPerDay | number | 3 | Eventos mostrados por día antes de "+n más". Por defecto 3. |
onDayPress | ((date: CalendarDate) => void) | - | Se llama al presionar un día (para agregar un evento). |
onEventPress | ((event: CalendarEvent) => void) | - | Se llama al presionar un evento. |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
- Estados
- Hover (CSS)
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-calview.alea-calview-head.alea-calview-title.alea-calview-nav.alea-calview-grid.alea-calview-day.alea-calview-events.alea-calview-event.alea-calview-more- Atributos data
data-outsidedata-todaydata-tone=successdata-tone=warningdata-tone=dangerdata-tone=info
Accesibilidad
- Una tabla con nombres de días; los días y eventos son botones con la fecha completa en su nombre.
Teclado
| Tecla | Acción |
|---|---|
| Tab | Va a los controles del mes y a los eventos |
| Enter | Abre un evento |
Qué hacer y qué evitar
Hacer
- Usa tonos solo con significado (warning para fechas límite).
- Enlaza cada evento a sus detalles.
Evitar
- No pongas más de tres eventos en un día: muestra +N más.
- No lo uses para elegir una fecha: usa DatePicker.