Passer de Lite à Pro

Lite et Pro partagent le nom de leur composant, leur modèle de dates civiles et leurs formes de données de base : une vue Lite passe donc à Pro avec une poignée de modifications. Les différences qui comptent sont les valeurs par défaut, quelques callbacks et les tokens de style. Ce guide convertit d’abord une vue Lite en une vue Pro équivalente en lecture seule, puis ajoute les fonctions Pro une par une, pour que chaque étape puisse être testée isolément.

#Ce qui reste identique

Tout ce que Lite accepte a un équivalent dans Pro, sauf ariaLabel (voir plus bas). Les options Pro comme treeEnabled ou zoomLevels, que Lite rejette avec « unsupported option », fonctionnent dès que vous changez de paquet.

#Changer de paquet

Pro s’installe depuis une archive tarball HTTPS versionnée, sous le nom de paquet super-scheduler. Désinstallez Lite, sauf si une autre partie de votre application l’utilise encore :

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

package.json référence alors l’URL et votre lockfile enregistre son intégrité. La clé contenue dans cette URL est un secret de téléchargement : elle apparaît dans package.json et dans le lockfile, traitez donc ces deux fichiers en conséquence. Installer SuperScheduler Pro couvre les clés, la CI et les mises à jour. Pro déclare React et React DOM (18.2 ou ultérieur, ou 19) comme dépendances peer.

#Mettre à jour imports, styles et valeurs par défaut

Voici une vue 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')}`)
        }
      />
    </>
  )
}

Et la même vue avec 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>
  )
}

Vous devriez voir les mêmes chambres, réservations et couleurs, les mêmes messages au clic, et aucun glissement possible. La grille utilise la police de votre page au lieu de la police système de 13 px de Lite, ainsi que les couleurs du thème Pro.

Les modifications, dans l’ordre :

1. Imports : super-scheduler-lite devient super-scheduler, et super-scheduler-lite/styles.css devient super-scheduler/styles.css.
2. Valeurs par défaut : écrivez explicitement chaque valeur par défaut de Lite sur laquelle vous comptiez (tableau ci-dessous).
3. Comportement : désactivez ce que Pro active par défaut, activez la prise en charge du clavier.
4. Callbacks : faites passer les clics sur les cellules à onTimeRangeSelected.
5. Données : donnez au contrôle sa propre copie du tableau d’événements, car Pro modifie avec splice le tableau qu’il reçoit quand les événements changent. Lite traite ses tableaux en lecture seule.

Pro n’a pas d’option ariaLabel : sa grille a un nom accessible intégré. Placez le libellé sur la région qui la contient, comme le fait l’exemple avec <section aria-label>.

#Styles et sélecteurs

Les noms de classes et les tokens changent de préfixe. La racine de Lite est .super-scheduler-lite, avec des parties comme .super-scheduler-lite__event ; celle de Pro est .super-scheduler, avec .super-scheduler__event, plus des marqueurs [data-super-scheduler-part]. Comme point de départ, faites correspondre les six tokens de Lite :

Pro dispose d’un jeu de tokens plus riche, d’un mode sombre et de préréglages de densité ; voir Thèmes.

#Le comportement que Pro active

Lite est en lecture seule par construction. Pro est un éditeur ; d’emblée, il :

• déplace et redimensionne les événements par glisser (eventMoveHandling et eventResizeHandling valent 'Update' par défaut) ;
• sélectionne des plages de temps au clic et au glisser (timeRangeSelectedHandling: 'Enabled'), en laissant l’ombre de la sélection jusqu’à la sélection suivante, un clic ailleurs ou clearSelection() ;
• zoome avec Ctrl ou Cmd plus la molette et avec le pincement (zoomGesture: true) ;
• laisse la prise en charge du clavier désactivée (keyboardEnabled: false), alors que Lite a toujours la navigation aux flèches. Avec keyboardEnabled, Pro écoute tout le document, sauf si keyboardTarget vaut 'component'.

L’exemple Pro ci-dessus aligne tous ces points sur le comportement de Lite. Retirez ces lignes une à une à mesure que vous adoptez les fonctions.

#Des callbacks aux arguments plus riches

Autres différences à vérifier dans vos handlers :

• Dans Pro, les handlers s’exécutent avec this lié au contrôle, et la plupart des arguments incluent control.
• Dans Lite, originalEvent est un KeyboardEvent quand une cellule ou un événement est activé au clavier. Dans Pro, Entrée sur un événement déclenche un clic, si bien que onEventClick reçoit toujours un MouseEvent, et Entrée sur une cellule est une sélection avec origin: 'keyboard'.
• Dans Lite, les callbacks controlRef sont appelés avec null au démontage ; Pro ne les appelle qu’avec le contrôle et vide les objets ref au démontage.
• Dans Pro, scrollTo(date) accepte des arguments optionnels animated et position.

#Quand les deux paquets sont installés

Certains produits gardent Lite sur les pages publiques et utilisent Pro dans le back-office. Cela fonctionne, avec deux règles :

• Échangez des chaînes ISO, pas des objets date. Chaque édition a sa propre classe de date, et Pro rejette un objet date de Lite.
• Séparez leurs CSS. Chaque paquet a sa propre feuille de style. Certains noms de tokens existent dans les deux (--super-scheduler-text, --super-scheduler-border) : limitez donc les surcharges Lite à .super-scheduler-lite au lieu 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

Importez les deux composants sous des noms locaux différents quand un même module a besoin des deux, par exemple import { SuperSchedulerComponent as LiteScheduler } from 'super-scheduler-lite'.

#Adopter les fonctions Pro pas à pas

Une fois la vue en lecture seule identique, ajoutez une capacité à la fois et testez-la :

1. Clavier et accessibilité. Gardez keyboardEnabled et keyboardMode="Full" ; voir Clavier, accessibilité et tactile.
2. Édition. Retirez eventMoveHandling="Disabled" et eventResizeHandling="Disabled", ajoutez des règles avec onEventMoving et onEventMove, et enregistrez les modifications depuis onEventsChange ; voir Règles de glissement et de redimensionnement et État contrôlé.
3. Création de réservations. Utilisez onTimeRangeSelected avec origin === 'drag' pour ouvrir un formulaire.
4. Heures et zoom. Ajoutez zoomLevels, retirez zoomGesture={false} ; voir Échelles de temps et zoom.
5. Lignes. Arborescences, lignes figées, lignes scindées et colonnes d’en-tête de ligne ; voir Arborescences, colonnes et sélection.
6. Modules. Annuler et rétablir, Minimap, Liens, Volets et vues enregistrées et Chargement par plages.
7. Contenu React. Passez l’import à super-scheduler/react-render quand vous avez besoin de React dans les événements ou les en-têtes ; voir Slots de rendu React.

Planning des chambres d’hôtelLa douche de la 104 fuit. Relogez le prochain client, bloquez la chambre pour le plombier et repérez les nuits déjà complètes. Pour les questions commerciales sur Pro, consultez la page des tarifs.