'/%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
Scheduler
Vistas de día y semana con una cuadrícula horaria: eventos ubicados por hora y lado a lado cuando se superponen, una fila de todo el día, la hora actual, un selector de periodo, un cambio de vista y eventos nuevos con un clic o un botón.
import { Scheduler } from '@alea/pro';
Ejemplos
Semana
Una semana laboral con reuniones superpuestas lado a lado, un evento de todo el día y la hora actual. Cambia de vista, muévete entre semanas, haz clic en un hueco vacío o usa Nuevo evento para añadir uno.
Octubre de 2026
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…--alea-accent-strong…--alea-accent-subtle…--alea-border…--alea-border-control…--alea-border-strong…--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-raised…--alea-text…--alea-text-muted…
Space
--alea-space-2…--alea-space-3…--alea-space-4…
Radius
--alea-radius-lg…
Type
--alea-font-family-body…--alea-font-size-base…--alea-font-size-xs…--alea-font-weight-semibold…
Motion
--alea-motion-duration-fast…
Props
Scheduler props
Vistas de día y semana con una cuadrícula horaria: eventos ubicados por hora y lado a lado cuando se superponen, una fila de todo el día, la hora actual, un selector de periodo y un cambio de vista. Cada día es una lista con nombre de sus eventos, en orden horario, así el teclado y los lectores de pantalla los recorren como una lista.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
eventsobligatoria | ScheduleEvent[] | - | Los eventos. |
className | string | - | Clases extra. |
date | Date | - | El día desde el que empieza la vista (controlado). |
dayEnd | number | 21 | |
dayStart | number | 7 | Primera y última hora de la cuadrícula. Por defecto 7 y 21. |
defaultDate | Date | - | El día al principio. Por defecto hoy. |
height | string | number | 560 | Altura de la cuadrícula con scroll. Por defecto 560. |
hourHeight | number | 56 | Altura de una hora en px. Por defecto 56. |
onCreate | ((start: Date) => void) | - | Se llama con el inicio de un hueco de 30 minutos al hacer clic en un hueco vacío, y desde el botón Nuevo evento (con la siguiente hora en punto). |
onDateChange | ((date: Date) => void) | - | Se llama cuando cambia el periodo visible. |
onEventPress | ((event: ScheduleEvent) => void) | - | Se llama con un evento cuando se pulsa. |
onViewChange | ((view: "day" | "week" | "workweek") => void) | - | Se llama cuando cambia la vista; con él, aparece un cambio de vista en la cabecera. |
view | "day" | "week" | "workweek" | 'week' | day, week (por defecto) o workweek (de lunes a viernes). |
weekStartsOn | 0 | 1 | 1 | Primer día de la semana: 0 domingo, 1 lunes (por defecto). |
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.
- Variantes
viewdayweekworkweek- Estados
- Hover (CSS)Pressed (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-sched.alea-sched-head.alea-sched-nav.alea-sched-title.alea-sched-actions.alea-sched-grid-head.alea-sched-dayname.alea-sched-allday.alea-sched-gutter-label.alea-sched-allday-col.alea-sched-event.alea-sched-scroll- Atributos data
data-todaydata-tone=accentdata-tone=successdata-tone=warningdata-tone=dangerdata-tone=infodata-tone=neutraldata-short
Accesibilidad
- Cada día es una lista con nombre de sus eventos en orden horario, así quienes usan teclado o lector de pantalla recorren un día como una lista.
- Cada evento es un botón con su título, su hora de inicio y fin y su detalle como nombre.
- El título del periodo se anuncia cuando cambia; anterior, siguiente y hoy son botones con nombre.
- Hacer clic en un hueco vacío es un atajo para el puntero: el botón Nuevo evento hace lo mismo desde el teclado.
- La línea de la hora actual tiene nombre, y la cuadrícula se desplaza hasta ella al cargar.
Teclado
| Tecla | Acción |
|---|---|
| Tab | Recorre los controles de la cabecera y luego los eventos de cada día en orden horario |
| Enter o Espacio (sobre un evento) | Lo abre |
Qué hacer y qué evitar
Hacer
- Da a los eventos un título corto y pon la sala o las personas en detail.
- Usa los tonos para dar significado (tentativo, cancelado), no para decorar.
- Empieza la cuadrícula en la primera hora laboral para que la mañana quede a la vista.
Evitar
- No lo uses para meses: para eso está CalendarView.
- No dependas solo del color: el título debe decir qué tiene de especial.
En Figma
Scheduler con View (Día, Semana laboral, Semana), eventos por tono, la fila de todo el día y la línea de la hora actual.