Documentación
Todo lo necesario para llevar una línea de tiempo de recursos a un producto React: del primer render a las cuestiones de producción. Cada guía responde primero a su pregunta y después muestra código que compila contra la versión actual.
Pulsa / en cualquier parte para buscar en guías, ejemplos y casos de uso.
Empieza aquí
- 01¿Qué es un planificador de recursos?En qué se diferencia un planificador de recursos de un calendario de citas, cuándo lo necesita tu producto y qué capacidades ofrecen SuperScheduler Lite y Pro.
- 02Inicio rápido con LiteInstala super-scheduler-lite desde npm y pinta una línea de tiempo diaria de recursos en React: opciones y valores por defecto, clics, control imperativo y límites.
- 03Instalar SuperScheduler ProInstala Pro con npm desde su tarball HTTPS privado y versionado, mantén íntegro el lockfile, actualiza con cuidado, úsalo en CI y protege la clave de descarga.
Conceptos básicos
- Recursos, eventos e intervalosModelo de datos: ids de recursos y eventos, intervalos semiabiertos, fechas ISO con segundos, hora civil sin zona horaria y campos propios tipados con EventData<T>.
- Integración con React, refs y ciclo de vidaMonta SuperSchedulerComponent, accede al control con refs o useSchedulerControl, dale tamaño, memoriza las props por identidad y libéralo bien bajo Strict Mode.
- Eventos controlados y callbacksproMantén los eventos en estado React con onEventsChange, dale al control su copia, conoce el orden de callbacks al soltar y guarda de forma optimista o tras confirmar.
Interacción
- Arrastrar, redimensionar y reglas de negocioproValida movimientos durante el arrastre, impide solapes, bloquea el tiempo cerrado, fija eventos, confirma cambios en asíncrono y explica cada rechazo en la tarjeta.
- Horas, minutos, días y zoomproConfigura escalas, duraciones de celda y cabeceras de tiempo, muestra horas o celdas de 15 minutos, oculta el tiempo no laborable y haz zoom de meses a minutos.
- Árboles de recursos, columnas y selecciónproRecursos en árbol, columnas ordenables, redimensionables y reordenables en la cabecera de filas, filtros de filas y eventos, y selección de eventos, filas o rangos.
- Teclado, accesibilidad y táctilNavegación completa por teclado, modelo de foco y anuncios, alternativas al arrastre y una línea de tiempo adaptada a pantallas táctiles y tecnologías de apoyo.
Personalización
- Slots de renderizado React y tarjetas emergentesproRenderiza eventos, filas, cabeceras, celdas y áreas como componentes React con super-scheduler/react-render, añade tarjetas emergentes y mantén fluido el scroll.
- Temas, tokens, Tailwind y modo oscuroEstiliza el scheduler con tokens --super-scheduler-*, cambia el acento con todos sus tonos, sigue tu modo oscuro y configura Tailwind v3 o v4 con sus capas.
Módulos Pro
- Minimapa y métricas derivadasproAñade una vista general de la línea de tiempo con super-scheduler/minimap, aliméntala con la ocupación o tu propia métrica y dale estilo, etiquetas y limpieza.
- Deshacer, rehacer e historialproRegistra movimientos y cambios de tamaño con super-scheduler/history, aplica deshacer sobre estado controlado, agrupa cambios y revierte lo que rechaza tu servidor.
- Dependencias y vínculos entre eventosproDibuja vínculos fin-inicio y de otros tipos a partir de tus datos, dales estilo, reacciona a los clics y aplica las reglas de dependencia en tu propio código.
- Paneles coordinados y vistas guardadasproDivide la línea de tiempo en paneles con super-scheduler/panes, mueve eventos entre ellos y guarda y restaura zoom, scroll y filas con super-scheduler/views.
- Carga de datos por rangos de fechasproCarga eventos al desplazarte con super-scheduler/ranges: peticiones por bloques cancelables, caché, esqueletos de carga, reintentos y el contrato del servidor.
Producción
- Virtualización y rendimientoCómo virtualiza SuperScheduler filas, celdas y eventos sin renders de React, qué cuesta tiempo en tu integración, una lista para planes grandes y cómo medir.
- Idiomas, fechas civiles y zonas horariasLocaliza cabeceras y etiquetas con cualquier locale de Intl, formatea valores SuperScheduler.Date y deja las zonas horarias y la recurrencia en tu aplicación.
- Renderizado en servidor y páginas prerenderizadasUsa SuperScheduler en apps con SSR o prerenderizado estático: entrega un shell útil, reserva el espacio, monta el motor DOM en el cliente y mantén una CSP estricta.
- Migrar de Lite a ProPasa de super-scheduler-lite a super-scheduler: qué se mantiene, qué valores por defecto y callbacks cambian y cómo adoptar las funciones Pro paso a paso.
- Solución de problemasResuelve problemas de integración habituales: estilos ausentes, contenedor sin altura, refs nulas, vistas vacías, imports erróneos, React duplicado, CSP y Tailwind.