¿Qué es un planificador de recursos?

Un planificador de recursos responde a una pregunta: ¿qué recurso hace qué y cuándo está libre? Los recursos son filas, el tiempo avanza en horizontal y cada trabajo es una barra colocada en la fila del recurso que lo realiza. La recepción de un hotel ve habitaciones y estancias, un taller ve boxes y reparaciones, un despachador ve técnicos y visitas.

Esta página explica en qué se diferencia esta disposición de un calendario, cuándo la necesita tu producto, de qué se encarga SuperScheduler y qué queda en tu aplicación, y la diferencia entre las dos ediciones. Termina con el vocabulario que usa el resto de la documentación.

#En qué se diferencia de un calendario de citas

Los dos muestran eventos sobre un eje de tiempo, pero responden a preguntas distintas.

Un calendario se organiza en torno a la persona que lo lee. Un planificador de recursos se organiza en torno a lo que tiene capacidad limitada. En cuanto los usuarios necesitan comparar muchos recursos a la vez y mover trabajo de uno a otro, la disposición de calendario deja de funcionar: una vista semanal de 80 habitaciones son 80 calendarios.

#Cuándo lo necesitas

Necesitas un planificador de recursos cuando se cumplen varias de estas condiciones:

• El problema es la capacidad. Habitaciones, camas, boxes, equipos, estudios, máquinas, vehículos, amarres o instrumentos solo pueden hacer una cosa a la vez, o un número limitado de cosas.
• El trabajo se mueve entre recursos. Una reserva pasa de la habitación 101 a la 102, una reparación se traslada a un box con elevador, una visita se reasigna a otro técnico.
• Se comparan muchos recursos a la vez. De decenas a miles de filas, a menudo agrupadas por sede, planta, equipo o tipo.
• Las duraciones varían mucho. Franjas de quince minutos y asignaciones de varias semanas conviven en los mismos datos, así que la vista debe ir de minutos a meses.
• Las reglas deciden qué puede ir dónde. Una estancia no puede moverse al pasado, un trabajo necesita un técnico certificado, dos cirugías no pueden compartir quirófano.

Un calendario normal basta cuando una persona gestiona una sola agenda, cuando lo principal son las invitaciones y las reuniones periódicas, o cuando nadie compara recursos. En ese caso, un planificador de recursos añade una dimensión que nadie usa.

Planning de habitaciones de hotelGotea la ducha de la 104. Recoloca al siguiente cliente, bloquea la habitación para el fontanero y localiza las noches que ya están llenas. Citas de clínica de fisioterapiaUn paciente no puede venir a las 10:00. Encuentra el siguiente hueco que respete pausas y limpiezas.

#Qué hace la librería y qué hace tu aplicación

SuperScheduler es un componente de interfaz de usuario. Pinta, mide e interactúa; no es dueño de tus datos ni de tu negocio.

#Lite y Pro

SuperScheduler tiene dos ediciones con el mismo nombre de componente y las mismas convenciones de fechas y datos.

• Lite es el paquete público de npm super-scheduler-lite: una línea de tiempo diaria de solo lectura. Consulta el inicio rápido con Lite.
• Pro es el paquete super-scheduler, que se instala desde un tarball privado y versionado. Consulta Instalar SuperScheduler Pro.

Ninguna de las dos ediciones limita el número de recursos o eventos. Lite lanza un error cuando recibe una opción que no implementa, de modo que una configuración de Pro nunca funciona a medias en silencio sobre Lite. Pro conserva un pequeño conjunto de APIs reservadas que están tipadas por compatibilidad pero no implementadas (por ejemplo, la edición de texto en línea, la creación interactiva de vínculos y la exportación a imágenes u hojas de cálculo); avisan una vez en desarrollo y la referencia de la API las marca.

Para preguntas comerciales sobre Pro, consulta los precios.

#Los datos en una imagen

Todo lo que dibuja el scheduler sale de dos arrays: recursos y eventos. Un evento apunta a su recurso por id.

import type { SuperScheduler } from 'super-scheduler'

// Rows: anything that can only do one thing at a time, or has a limited capacity.
export const resources: SuperScheduler.ResourceData[] = [
  { id: 'room-101', name: 'Room 101' },
  { id: 'room-102', name: 'Room 102' },
  { id: 'van-3', name: 'Van 3' },
]

// Bars: one interval on one row. `end` is exclusive, so the stay below ends at 11:00 on
// 5 October and a booking that starts at 11:00 that day does not overlap it.
export const events: SuperScheduler.EventData[] = [
  {
    id: 'booking-1042',
    resource: 'room-101',
    start: '2026-10-02T14:00:00',
    end: '2026-10-05T11:00:00',
    text: 'Booking 1042',
  },
  {
    id: 'route-7',
    resource: 'van-3',
    start: '2026-10-03T08:00:00',
    end: '2026-10-03T12:30:00',
    text: 'Delivery route 7',
  },
]

Sobre un eje de días verías tres filas y dos barras: una del 2 al 5 de octubre en Room 101 y otra el 3 de octubre en Van 3. La guía del modelo de datos trata en detalle los ids, los intervalos y los campos propios.

#Glosario

Estos términos tienen el mismo significado en toda la documentación y en la API.

#Recurso

Una fila del scheduler: cualquier cosa que pueda hacer trabajo a lo largo del tiempo. En la API es ResourceData, con un id y un name. En Pro, los recursos pueden tener children (un árbol), quedar fijos arriba o abajo, o dividirse en subfilas. Algunas APIs dicen row (fila): una fila es el recurso ya renderizado.

#Evento

Una barra en la fila de un recurso: una reserva, un turno, un trabajo, una cita. En la API es EventData, con un id, text, start, end y el resource al que pertenece. En los callbacks sueles recibir un envoltorio (SuperScheduler.Event) cuya propiedad data es tu objeto.

#Intervalo

El tramo que ocupa un evento, de start a end. Los intervalos son semiabiertos, [start, end): el inicio pertenece al evento y el final no. Un evento que termina a las 11:00 y otro que empieza a las 11:00 no se solapan.

#Celda

Un paso de la cuadrícula de tiempo en una fila: un día, una hora o una franja de 15 minutos, según la escala. Las celdas son lo que pulsas para seleccionar tiempo, aquello a lo que se ajusta el arrastre y lo que puedes deshabilitar o decorar con onBeforeCellRender (Pro).

#Escala

El tamaño de una celda: Day en Lite; en Pro también Hour, Minute, Week, Month, Year o CellDuration con un número de minutos a medida. La escala es independiente de cómo se etiquetan las cabeceras. Consulta Horas, minutos, días y zoom.

#Nivel de zoom

Un conjunto con nombre de opciones del eje de tiempo (escala, duración de celda, ancho de celda, cabeceras) que Pro aplica a la vez. Los gestos y control.zoom pasan de un nivel de zoom a otro, o hacen zoom continuo entre ellos.

#Control

La instancia del scheduler, SuperScheduler.Scheduler. El componente React crea una al montarse y la libera al desmontarse. Llamas a sus métodos para hacer scroll, seleccionar, actualizar o hacer zoom; los handlers la reciben como args.control. Consulta Integración con React.

#Siguientes pasos

• Prueba la edición de solo lectura en pocos minutos: inicio rápido con Lite.
• Instala Pro y construye una planificación editable: Instalar SuperScheduler Pro.
• Aprende el modelo de datos antes de conectar un backend: Recursos, eventos e intervalos.
• Explora tableros de planificación funcionales para doce sectores en los ejemplos.