Migrar de Lite a Pro

Lite y Pro comparten el nombre del componente, el modelo de fechas civiles y la forma básica de los datos, así que una vista de Lite pasa a Pro con un puñado de cambios. Las diferencias que importan son los valores por defecto, algunos callbacks y los tokens de estilo. Esta guía convierte primero una vista de Lite en una vista de Pro equivalente de solo lectura y después añade las funciones Pro una a una, para que cada paso se pueda probar por separado.

#Qué se mantiene

Todo lo que acepta Lite tiene un equivalente en Pro, salvo ariaLabel (ver más abajo). Las opciones de Pro como treeEnabled o zoomLevels, que Lite rechaza con «unsupported option», funcionan en cuanto cambias de paquete.

#Cambiar de paquete

Pro se instala desde un tarball HTTPS versionado con el nombre de paquete super-scheduler. Desinstala Lite salvo que otra parte de tu aplicación lo siga usando:

npm uninstall super-scheduler-lite
npm install https://npm.superscheduler.org/pro/YOUR_DOWNLOAD_KEY/0.1.0.tgz

Después, package.json incluye la URL y tu lockfile registra su integridad. La clave de esa URL es un secreto de descarga: aparece en package.json y en el lockfile, así que trátalos en consecuencia. Instalar SuperScheduler Pro explica las claves, la CI y las actualizaciones. Pro declara React y React DOM (18.2 o posterior, o 19) como dependencias peer.

#Actualizar imports, estilos y valores por defecto

Esta es una vista de Lite:

import { useState } from 'react'
import { SuperSchedulerComponent } from 'super-scheduler-lite'
import type { SuperScheduler } from 'super-scheduler-lite'
import 'super-scheduler-lite/styles.css'

const ROOMS: SuperScheduler.ResourceData[] = [
  { id: 'r101', name: 'Room 101' },
  { id: 'r102', name: 'Room 102' },
]
const EVENTS: SuperScheduler.EventData[] = [
  {
    id: 'b-1042',
    resource: 'r101',
    start: '2026-10-02T14:00:00',
    end: '2026-10-05T11:00:00',
    text: 'Ana Ruiz',
    backColor: '#dbeafe',
  },
  {
    id: 'b-1043',
    resource: 'r102',
    start: '2026-10-03T14:00:00',
    end: '2026-10-08T11:00:00',
    text: 'Tom Berg',
    backColor: '#dcfce7',
  },
]

/** Before: the read-only Lite view. */
export function Availability() {
  const [picked, setPicked] = useState('')
  return (
    <>
      <p aria-live="polite">{picked}</p>
      <SuperSchedulerComponent
        startDate="2026-10-01"
        resources={ROOMS}
        events={EVENTS}
        ariaLabel="Room availability"
        onEventClick={({ e }) => setPicked(`Booking ${String(e.data.id)}`)}
        onTimeRangeClick={({ start, resource }) =>
          setPicked(`Free: ${String(resource)} on ${start.toString('d MMM')}`)
        }
      />
    </>
  )
}

Y esta, la misma vista en Pro:

import { useCallback, useState } from 'react'
import { SuperSchedulerComponent } from 'super-scheduler'
import type {
  SchedulerEventClickArgs,
  SchedulerTimeRangeSelectedArgs,
  SuperScheduler,
} from 'super-scheduler'
import 'super-scheduler/styles.css'

const ROOMS: SuperScheduler.ResourceData[] = [
  { id: 'r101', name: 'Room 101' },
  { id: 'r102', name: 'Room 102' },
]
const EVENTS: SuperScheduler.EventData[] = [
  {
    id: 'b-1042',
    resource: 'r101',
    start: '2026-10-02T14:00:00',
    end: '2026-10-05T11:00:00',
    text: 'Ana Ruiz',
    backColor: '#dbeafe',
  },
  {
    id: 'b-1043',
    resource: 'r102',
    start: '2026-10-03T14:00:00',
    end: '2026-10-08T11:00:00',
    text: 'Tom Berg',
    backColor: '#dcfce7',
  },
]
// Lite draws one header row with "d MMM" per day.
const TIME_HEADERS: SuperScheduler.TimeHeaderData[] = [{ groupBy: 'Day', format: 'd MMM' }]

/** After: the same view on Pro, still read-only. */
export function Availability() {
  const [picked, setPicked] = useState('')
  // Pro splices the events array it receives: give it its own copy.
  const [events] = useState(() => EVENTS.slice())

  const onEventClick = useCallback((args: SchedulerEventClickArgs) => {
    setPicked(`Booking ${String(args.e.id())}`)
  }, [])

  // Lite's onTimeRangeClick fires for any empty cell. In Pro, clicking an empty cell selects it;
  // Pro's own onTimeRangeClick fires only for a click on a range that is already selected.
  const onTimeRangeSelected = useCallback((args: SchedulerTimeRangeSelectedArgs) => {
    args.control.clearSelection()
    if (args.origin !== 'click' && args.origin !== 'keyboard') return
    setPicked(`Free: ${String(args.resource)} on ${args.start.toString('d MMM')}`)
  }, [])

  return (
    // Pro has no ariaLabel option: name the region around it.
    <section aria-label="Room availability">
      <p aria-live="polite">{picked}</p>
      <SuperSchedulerComponent
        // Lite's defaults, written out: Pro's defaults differ.
        startDate="2026-10-01"
        days={31}
        scale="Day"
        cellWidth={64}
        heightSpec="Fixed"
        height={400}
        rowHeaderWidth={160}
        rowHeaderWidthAutoFit={false}
        rowMinHeight={40}
        eventHeight={26}
        timeHeaders={TIME_HEADERS}
        emptyState="No resources"
        // Read-only, as in Lite: Pro enables dragging, resizing and zoom gestures by default.
        eventMoveHandling="Disabled"
        eventResizeHandling="Disabled"
        zoomGesture={false}
        // Keyboard navigation is built into Lite and opt-in in Pro.
        keyboardEnabled
        keyboardTarget="component"
        keyboardMode="Full"
        resources={ROOMS}
        events={events}
        onEventClick={onEventClick}
        onTimeRangeSelected={onTimeRangeSelected}
      />
    </section>
  )
}

Deberías ver las mismas habitaciones, reservas y colores, los mismos mensajes al hacer clic y ningún arrastre. La cuadrícula usa la fuente de tu página en lugar de la fuente del sistema de 13 px de Lite, y los colores del tema de Pro.

Los cambios, por orden:

1. Imports: super-scheduler-lite pasa a ser super-scheduler, y super-scheduler-lite/styles.css pasa a ser super-scheduler/styles.css.
2. Valores por defecto: escribe de forma explícita cada valor por defecto de Lite del que dependías (tabla de abajo).
3. Comportamiento: desactiva lo que Pro activa por defecto y activa el soporte de teclado.
4. Callbacks: pasa los clics en celdas a onTimeRangeSelected.
5. Datos: dale al control su propia copia del array de eventos, porque Pro modifica con splice el array que recibe cuando cambian los eventos. Lite trata sus arrays como de solo lectura.

Pro no tiene la opción ariaLabel: su cuadrícula tiene un nombre accesible integrado. Pon la etiqueta en la región que la contiene, como hace el ejemplo con <section aria-label>.

#Estilos y selectores

Los nombres de clase y los tokens cambian de prefijo. La raíz de Lite es .super-scheduler-lite, con partes como .super-scheduler-lite__event; la raíz de Pro es .super-scheduler, con .super-scheduler__event, más los marcadores [data-super-scheduler-part]. Como punto de partida, traslada así los seis tokens de Lite:

Pro tiene un conjunto de tokens más completo, modo oscuro y presets de densidad; consulta Temas.

#Comportamiento que Pro activa

Lite es de solo lectura por diseño. Pro es un editor, así que de serie:

• mueve y redimensiona eventos arrastrando (eventMoveHandling y eventResizeHandling valen 'Update' por defecto);
• selecciona rangos de tiempo con clic y arrastre (timeRangeSelectedHandling: 'Enabled') y deja la sombra de la selección hasta la siguiente selección, un clic en otro sitio o clearSelection();
• hace zoom con Ctrl o Cmd más la rueda y con el gesto de pellizco (zoomGesture: true);
• deja desactivado el soporte de teclado (keyboardEnabled: false), mientras que Lite siempre tiene navegación con las flechas. Con keyboardEnabled, Pro escucha en todo el documento salvo que keyboardTarget sea 'component'.

El ejemplo de Pro de arriba fija todo esto al comportamiento de Lite. Quita esas líneas de una en una a medida que adoptes funciones.

#Callbacks con argumentos más completos

Otras diferencias que conviene revisar en tus handlers:

• En Pro, los handlers se ejecutan con this apuntando al control, y la mayoría de los argumentos incluyen control.
• En Lite, originalEvent es un KeyboardEvent cuando una celda o un evento se activa con el teclado. En Pro, Intro sobre un evento genera un clic, así que onEventClick siempre recibe un MouseEvent, e Intro sobre una celda es una selección con origin: 'keyboard'.
• En Lite, los callbacks de controlRef se llaman con null al desmontar; Pro solo los llama con el control y vacía los objetos ref al desmontar.
• En Pro, scrollTo(date) acepta los argumentos opcionales animated y position.

#Cuando los dos paquetes están instalados

Algunos productos mantienen Lite en las páginas públicas y usan Pro en el backoffice. Funciona, con dos reglas:

• Intercambia cadenas ISO, no objetos de fecha. Cada edición tiene su propia clase de fecha, y Pro rechaza un objeto de fecha de Lite.
• Mantén separado su CSS. Cada paquete tiene su propia hoja de estilos. Algunos nombres de token existen en los dos (--super-scheduler-text, --super-scheduler-border), así que limita las sobrescrituras de Lite a .super-scheduler-lite en lugar de :root.

import { type SuperScheduler as Lite } from 'super-scheduler-lite'
import { SuperScheduler as Pro } from 'super-scheduler'

// Each edition has its own date class. Passing a Lite date object to Pro throws
// ("expected a Date, a SchedulerDate, a number of ticks or an ISO 8601 string").
export function toProDate(date: Lite.Date): Pro.Date {
  return new Pro.Date(date.value)
}

// Shared state, URLs and storage hold civil ISO strings, which both editions accept.
export const selectedDay: string = Pro.Date.today().value

Cuando un mismo módulo necesite los dos componentes, impórtalos con nombres locales distintos, por ejemplo import { SuperSchedulerComponent as LiteScheduler } from 'super-scheduler-lite'.

#Adoptar las funciones Pro paso a paso

Cuando la vista de solo lectura coincida, añade una capacidad cada vez y pruébala:

1. Teclado y accesibilidad. Mantén keyboardEnabled y keyboardMode="Full"; consulta Teclado, accesibilidad y táctil.
2. Edición. Quita eventMoveHandling="Disabled" y eventResizeHandling="Disabled", añade reglas con onEventMoving y onEventMove, y persiste los cambios desde onEventsChange; consulta Reglas de arrastre y redimensionado y Estado controlado.
3. Creación de reservas. Usa onTimeRangeSelected con origin === 'drag' para abrir un formulario.
4. Horas y zoom. Añade zoomLevels y quita zoomGesture={false}; consulta Escalas de tiempo y zoom.
5. Filas. Árboles, filas fijas, filas divididas y columnas en la cabecera de fila; consulta Árboles, columnas y selección.
6. Módulos. Deshacer y rehacer, Minimapa, Vínculos, Paneles y vistas guardadas y Carga por rangos.
7. Contenido React. Cambia el import a super-scheduler/react-render cuando necesites React dentro de eventos o cabeceras; consulta Slots de renderizado React.

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. Para preguntas comerciales sobre Pro, consulta la página de precios.