Instalar SuperScheduler Pro

SuperScheduler Pro no está en el registro público de npm. Cada versión es un archivo versionado (.tgz) servido por HTTPS, y tu clave de descarga personal forma parte de su URL. npm lo admite de forma nativa como dependencia por URL (↗): sin configurar un registro, sin cambios en .npmrc y sin inicio de sesión interactivo. Una vez instalado, el paquete se llama super-scheduler y se comporta como cualquier otra dependencia.

Esta guía usa npm. Sustituye YOUR_DOWNLOAD_KEY por la clave que has recibido; los ejemplos fijan la versión 0.1.0.

#Antes de empezar

• Una clave de descarga. Solo autoriza descargas. Consulta Mantener en secreto la clave de descarga.
• React 18.2 o posterior, o React 19, con el react-dom correspondiente. Ambos son peer dependencies; la librería no tiene dependencias propias en tiempo de ejecución.
• Acceso HTTPS a npm.superscheduler.org desde cada máquina que instale dependencias (portátiles de desarrollo, runners de CI, contenedores de build).

#Añadir la dependencia

Añade la URL del tarball a dependencies en package.json:

{
  "dependencies": {
    "super-scheduler": "https://npm.superscheduler.org/pro/YOUR_DOWNLOAD_KEY/0.1.0.tgz",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  }
}

Después, instala:

npm install

Ejecutar npm install con la URL como argumento hace lo mismo y escribe la entrada por ti:

npm install https://npm.superscheduler.org/pro/YOUR_DOWNLOAD_KEY/0.1.0.tgz

Comprueba el resultado:

npm ls super-scheduler react react-dom

Deberías ver [email protected] y una única versión de react y de react-dom.

#Qué registra el lockfile

La primera instalación descarga el archivo, calcula su hash SHA-512 y guarda tanto la URL como el hash en package-lock.json:

{
  "packages": {
    "node_modules/super-scheduler": {
      "version": "0.1.0",
      "resolved": "https://npm.superscheduler.org/pro/YOUR_DOWNLOAD_KEY/0.1.0.tgz",
      "integrity": "sha512-…",
      "peerDependencies": {
        "react": "^18.2.0 || ^19.0.0",
        "react-dom": "^18.2.0 || ^19.0.0"
      }
    }
  }
}

El valor de integrity es lo que hace reproducible la instalación. El archivo de una versión publicada nunca cambia, así que cada instalación posterior de 0.1.0, en cualquier máquina, debe producir el mismo hash; si los bytes descargados fueran distintos alguna vez, npm se detendría con un error EINTEGRITY en lugar de instalarlos. Haz commit de package-lock.json junto con package.json y no edites nunca a mano el campo integrity. La documentación de npm describe los campos resolved e integrity (↗).

#npm install o npm ci

En la automatización, usa preferentemente npm ci. Nunca reescribe el lockfile, así que un build no puede coger otro archivo sin que te enteres.

#Actualizar a una nueva versión

La URL de un tarball es una dirección fija, no un rango semver: npm update y npm outdated no ven las nuevas versiones de Pro y nada se actualiza solo. Para pasar a una nueva versión:

1. Lee el registro de cambios de la versión de destino.
2. Cambia la versión al final de la URL, por ejemplo de …/YOUR_DOWNLOAD_KEY/0.1.0.tgz al número de la nueva versión.
3. Ejecuta npm install para descargar el nuevo archivo y regenerar su entrada en el lockfile.
4. Ejecuta la comprobación de tipos y los tests, y haz commit de package.json y package-lock.json juntos.

Para volver atrás, apunta la URL a la versión anterior y vuelve a ejecutar npm install. Los archivos publicados son inmutables, así que la versión anterior se instala con la misma integridad que tenía.

#Integración continua

CI no necesita nada más de lo que ya hace con los paquetes públicos: la URL y la integridad están en el lockfile y la descarga no requiere iniciar sesión.

npm ci
npm run typecheck
npm test
npm run build

Ten en cuenta por dónde viaja la clave de descarga en CI:

• Cachés de dependencias. Si cacheas el directorio de caché de npm o node_modules entre ejecuciones, el archivo cacheado y el lockfile son tan sensibles como la propia clave. Mantén las cachés privadas al proyecto.
• Logs. Los mensajes de error de npm pueden incluir la URL que intentó descargar, con la clave. No publiques los logs de CI de proyectos privados.
• Forks y mirrors públicos. Un repositorio que contiene la clave debe seguir siendo privado. No lo subas a un mirror público.

#Mantener en secreto la clave de descarga

La clave es un secreto al portador para las descargas. Cualquiera que tenga la URL puede descargar esa versión, así que merece el mismo cuidado que un token de API:

• Aparece en package.json, en package-lock.json, en la caché local de npm y posiblemente en los logs. Mantén privados el repositorio y esos archivos.
• No pegues la URL en issues públicas, chats, gists, capturas de pantalla ni informes de errores. Cuando compartas una lista de dependencias, sustituye la clave por YOUR_DOWNLOAD_KEY.
• Si la clave queda expuesta, pide una nueva, sustitúyela en package.json, ejecuta npm install y haz commit de los dos archivos. El archivo descargado es el mismo, así que solo cambia la URL de resolved; la integridad sigue siendo idéntica.

#Peer dependencies y un único React

Pro declara react y react-dom ^18.2.0 || ^19.0.0 como peer dependencies y usa la copia de tu aplicación. npm informa de un conflicto de peer dependencies si tu proyecto usa un React más antiguo.

En el bundle debe haber exactamente un React. Dos copias rompen los hooks y el contexto, de los que dependen useSchedulerControl, el subpath super-scheduler/hooks y los slots de renderizado de super-scheduler/react-render. npm ls react react-dom debe mostrar una única versión. En un monorepo, o cuando enlazas paquetes en local, indica al bundler que resuelva una sola copia, por ejemplo con resolve.dedupe (↗) de Vite con el valor ['react', 'react-dom'].

#Imports y estilos

El paquete se llama super-scheduler, sea cual sea la URL desde la que se instaló. Importa la hoja de estilos una sola vez, en tu archivo de entrada, antes de tu propio CSS:

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { version } from 'super-scheduler'
// Once per application, before your own stylesheets. The library rules live in
// `@layer super-scheduler`, so any unlayered rule of yours wins without !important.
import 'super-scheduler/styles.css'
import './app.css'
import { Planning } from './Planning'

// '0.1.0': the version your bundler resolved from the tarball.
console.info(`SuperScheduler ${version}`)

const container = document.getElementById('root')
if (container === null) throw new Error('#root is missing')

createRoot(container).render(
  <StrictMode>
    <Planning />
  </StrictMode>,
)

import { useMemo, useState } from 'react'
import { SuperSchedulerComponent } from 'super-scheduler'
import type { SchedulerEventsChangeArgs, SuperScheduler } from 'super-scheduler'

const ROOMS: SuperScheduler.ResourceData[] = [
  { id: 'r101', name: 'Room 101' },
  { id: 'r102', name: 'Room 102' },
]

const TIME_HEADERS: SuperScheduler.TimeHeaderData[] = [
  { groupBy: 'Month' },
  { groupBy: 'Day', format: 'd' },
]

export function Planning() {
  const [events, setEvents] = useState<SuperScheduler.EventData[]>([
    {
      id: 1,
      resource: 'r101',
      start: '2026-10-02T14:00:00',
      end: '2026-10-05T11:00:00',
      text: 'Booking 1042',
    },
  ])
  // The control edits the array it receives in place: hand it a copy of the state.
  const owned = useMemo(() => events.slice(), [events])
  const onEventsChange = (args: SchedulerEventsChangeArgs) => setEvents([...args.events])

  return (
    <SuperSchedulerComponent
      startDate="2026-10-01"
      days={31}
      scale="Day"
      cellWidth={44}
      timeHeaders={TIME_HEADERS}
      resources={ROOMS}
      events={owned}
      onEventsChange={onEventsChange}
    />
  )
}

Deberías ver un mes de columnas de día, dos habitaciones y una reserva. Arrastra la reserva a la otra habitación: onEventsChange escribe su nueva posición en el estado de React, que es el patrón descrito en Eventos controlados y callbacks.

Las funcionalidades opcionales viven en sus propios subpaths, así que solo cargas lo que importas:

Cada entrada incluye módulos ES y CommonJS con declaraciones de TypeScript para ambos. moduleResolution: "bundler", "node16" y "nodenext" leen los exports del paquete; la resolución "node", más antigua, también encuentra los tipos de los subpaths. Algunas funcionalidades y paquetes de idioma se cargan bajo demanda con import() dinámico, así que mantén activado el code splitting de tu bundler (viene activado por defecto en Vite, Next.js y webpack).

#Resolver problemas de instalación

Para problemas en tiempo de ejecución después de la instalación, consulta Solución de problemas.

#Siguientes pasos

• Aprende cómo encaja el componente en una aplicación React: Integración con React.
• Conecta tus datos y tu backend: Eventos controlados y callbacks.
• Añade reglas de negocio al arrastre: Arrastrar, redimensionar y reglas de negocio.