Von Lite zu Pro migrieren

Lite und Pro teilen den Komponentennamen, das Datenmodell mit bürgerlicher Zeit und die grundlegenden Datenstrukturen; eine Lite-Ansicht wechselt daher mit einer Handvoll Änderungen zu Pro. Die Unterschiede, auf die es ankommt, sind die Standardwerte, einige Callbacks und die Styling-Tokens. Diese Anleitung wandelt eine Lite-Ansicht zuerst in eine gleichwertige, schreibgeschützte Pro-Ansicht um und ergänzt dann die Pro-Funktionen nacheinander, sodass sich jeder Schritt für sich testen lässt.

#Was gleich bleibt

Alles, was Lite akzeptiert, hat ein Gegenstück in Pro, mit Ausnahme von ariaLabel (siehe unten). Pro-Optionen wie treeEnabled oder zoomLevels, die Lite mit „unsupported option“ ablehnt, funktionieren nach dem Wechsel.

#Das Paket wechseln

Pro wird aus einem versionierten HTTPS-Tarball unter dem Paketnamen super-scheduler installiert. Entfernen Sie Lite, sofern kein anderer Teil Ihrer App es noch verwendet:

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

package.json führt dann die URL auf, und Ihr Lockfile hält deren Integrität fest. Der Schlüssel in dieser URL ist ein Download-Geheimnis: Er steht in package.json und im Lockfile, behandeln Sie also beide entsprechend. SuperScheduler Pro installieren behandelt Download-Schlüssel, CI und Upgrades. Pro führt React und React DOM (18.2 oder neuer, oder 19) als Peer-Abhängigkeiten.

#Imports, Styles und Standardwerte anpassen

Hier eine Lite-Ansicht:

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

Und dieselbe Ansicht mit 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>
  )
}

Sie sollten dieselben Zimmer, Buchungen und Farben sehen, dieselben Meldungen beim Klicken und kein Ziehen. Das Raster verwendet die Schrift Ihrer Seite statt der 13-px-Systemschrift von Lite sowie die Theme-Farben von Pro.

Die Änderungen, der Reihe nach:

1. Imports: Aus super-scheduler-lite wird super-scheduler, und aus super-scheduler-lite/styles.css wird super-scheduler/styles.css.
2. Standardwerte: Schreiben Sie jeden Standardwert von Lite aus, auf den Sie sich verlassen haben (Tabelle unten).
3. Verhalten: Deaktivieren Sie, was Pro standardmäßig einschaltet, und aktivieren Sie die Tastaturunterstützung.
4. Callbacks: Verlagern Sie Zellklicks nach onTimeRangeSelected.
5. Daten: Geben Sie dem Control eine eigene Kopie des Ereignis-Arrays, denn Pro verändert das übergebene Array per splice, wenn sich Ereignisse ändern. Lite behandelt seine Arrays als schreibgeschützt.

Pro hat keine Option ariaLabel: Sein Raster hat einen eingebauten barrierefreien Namen. Setzen Sie die Beschriftung auf den Bereich, der es enthält, wie es das Beispiel mit <section aria-label> tut.

#Styles und Selektoren

Klassennamen und Tokens wechseln das Präfix. Die Wurzel von Lite ist .super-scheduler-lite mit Teilen wie .super-scheduler-lite__event; die Wurzel von Pro ist .super-scheduler mit .super-scheduler__event, dazu Markierungen [data-super-scheduler-part]. Ordnen Sie die sechs Tokens von Lite als Ausgangspunkt zu:

Pro hat einen umfangreicheren Satz an Tokens, einen Dark Mode und Dichte-Voreinstellungen; siehe Theming.

#Verhalten, das Pro einschaltet

Lite ist von Grund auf schreibgeschützt. Pro ist ein Editor und macht daher ab Werk Folgendes:

• Es verschiebt Ereignisse und ändert ihre Dauer per Ziehen (eventMoveHandling und eventResizeHandling stehen standardmäßig auf 'Update');
• es wählt Zeiträume per Klick und Ziehen aus (timeRangeSelectedHandling: 'Enabled') und lässt den Auswahlschatten bis zur nächsten Auswahl, einem Klick an anderer Stelle oder clearSelection() stehen;
• es zoomt mit Ctrl oder Cmd plus Mausrad und mit Pinch-Gesten (zoomGesture: true);
• es lässt die Tastaturunterstützung ausgeschaltet (keyboardEnabled: false), während Lite immer Navigation mit den Pfeiltasten bietet. Mit keyboardEnabled lauscht Pro auf dem ganzen Dokument, sofern keyboardTarget nicht 'component' ist.

Das Pro-Beispiel oben setzt all das auf das Verhalten von Lite fest. Entfernen Sie diese Zeilen eine nach der anderen, während Sie Funktionen übernehmen.

#Callbacks mit umfangreicheren Argumenten

Weitere Unterschiede, die Sie in Ihren Handlern prüfen sollten:

• In Pro laufen Handler mit this auf das Control gesetzt, und die meisten Argumente enthalten control.
• In Lite ist originalEvent ein KeyboardEvent, wenn eine Zelle oder ein Ereignis per Tastatur aktiviert wird. In Pro löst Eingabe auf einem Ereignis einen Klick aus, sodass onEventClick immer ein MouseEvent erhält, und Eingabe auf einer Zelle ist eine Auswahl mit origin: 'keyboard'.
• controlRef-Callbacks werden in Lite beim Unmount mit null aufgerufen; Pro ruft sie nur mit dem Control auf und leert Ref-Objekte beim Unmount.
• scrollTo(date) akzeptiert in Pro die optionalen Argumente animated und position.

#Wenn beide Pakete installiert sind

Manche Produkte behalten Lite auf öffentlichen Seiten und nutzen Pro im Backoffice. Das funktioniert, mit zwei Regeln:

• ISO-Strings austauschen, keine Datumsobjekte. Jede Edition hat ihre eigene Datumsklasse, und Pro lehnt ein Datumsobjekt von Lite ab.
• CSS getrennt halten. Jedes Paket hat sein eigenes Stylesheet. Einige Token-Namen gibt es in beiden (--super-scheduler-text, --super-scheduler-border); begrenzen Sie Überschreibungen für Lite daher auf .super-scheduler-lite statt auf :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

Importieren Sie die beiden Komponenten unter verschiedenen lokalen Namen, wenn ein Modul beide braucht, zum Beispiel import { SuperSchedulerComponent as LiteScheduler } from 'super-scheduler-lite'.

#Pro-Funktionen Schritt für Schritt übernehmen

Sobald die schreibgeschützte Ansicht übereinstimmt, fügen Sie eine Fähigkeit nach der anderen hinzu und testen sie:

1. Tastatur und Barrierefreiheit. Behalten Sie keyboardEnabled und keyboardMode="Full"; siehe Tastatur, Barrierefreiheit und Touch.
2. Bearbeitung. Entfernen Sie eventMoveHandling="Disabled" und eventResizeHandling="Disabled", ergänzen Sie Regeln mit onEventMoving und onEventMove und speichern Sie Änderungen aus onEventsChange; siehe Regeln für Ziehen und Dauer ändern und Kontrollierter Zustand.
3. Buchungen anlegen. Verwenden Sie onTimeRangeSelected mit origin === 'drag', um ein Formular zu öffnen.
4. Stunden und Zoom. Fügen Sie zoomLevels hinzu und entfernen Sie zoomGesture={false}; siehe Zeitskalen und Zoom.
5. Zeilen. Bäume, fixierte Zeilen, geteilte Zeilen und Spalten im Zeilenkopf; siehe Bäume, Spalten und Auswahl.
6. Module. Rückgängig und Wiederholen, Minimap, Verknüpfungen, Bereiche und gespeicherte Ansichten und bereichsweises Laden.
7. React-Inhalte. Stellen Sie den Import auf super-scheduler/react-render um, wenn Sie React in Ereignissen oder Köpfen brauchen; siehe React-Render-Slots.

Zimmerplanung im HotelIn Zimmer 104 tropft die Dusche. Buchen Sie den nächsten Gast um, sperren Sie das Zimmer für den Installateur und finden Sie die ausgebuchten Nächte. Für kaufmännische Fragen zu Pro siehe die Preisseite.