SuperScheduler Pro installieren

SuperScheduler Pro ist nicht in der öffentlichen npm-Registry. Jedes Release ist ein versioniertes Archiv (.tgz), das per HTTPS ausgeliefert wird, und Ihr persönlicher Download-Schlüssel ist Teil seiner URL. npm unterstützt das nativ als URL-Abhängigkeit (↗): keine Registry-Konfiguration, keine Änderungen an .npmrc und kein interaktives Login. Nach der Installation heißt das Paket super-scheduler und verhält sich wie jede andere Abhängigkeit.

Dieser Leitfaden verwendet npm. Ersetzen Sie YOUR_DOWNLOAD_KEY durch den Schlüssel, den Sie erhalten haben; die Beispiele fixieren die Version 0.1.0.

#Bevor Sie beginnen

• Ein Download-Schlüssel. Er berechtigt ausschließlich zum Herunterladen. Siehe Den Download-Schlüssel geheim halten.
• React 18.2 oder neuer oder React 19, mit dem passenden react-dom. Beide sind Peer-Abhängigkeiten; die Bibliothek selbst hat keine Laufzeitabhängigkeiten.
• HTTPS-Zugriff auf npm.superscheduler.org von jedem Rechner, der Abhängigkeiten installiert (Entwickler-Laptops, CI-Runner, Build-Container).

#Die Abhängigkeit hinzufügen

Tragen Sie die Tarball-URL unter dependencies in package.json ein:

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

Installieren Sie dann:

npm install

npm install mit der URL als Argument bewirkt dasselbe und schreibt den Eintrag für Sie:

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

Prüfen Sie das Ergebnis:

npm ls super-scheduler react react-dom

Sie sollten [email protected] und genau eine Version von react und react-dom sehen.

#Was die Lockfile festhält

Die erste Installation lädt das Archiv herunter, berechnet seinen SHA-512-Hash und speichert URL und Hash in 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"
      }
    }
  }
}

Der Wert integrity macht die Installation reproduzierbar. Das Archiv hinter einer veröffentlichten Version ändert sich nie, daher muss jede spätere Installation von 0.1.0 auf jedem Rechner denselben Hash ergeben; wichen die heruntergeladenen Bytes jemals ab, bräche npm mit einem EINTEGRITY-Fehler ab, statt sie zu installieren. Committen Sie package-lock.json zusammen mit package.json und bearbeiten Sie das Feld integrity nie von Hand. Die npm-Dokumentation beschreibt die Felder resolved und integrity (↗).

#npm install oder npm ci

Bevorzugen Sie in der Automatisierung npm ci. Es schreibt die Lockfile nie neu, sodass ein Build nicht unbemerkt ein anderes Archiv übernehmen kann.

#Auf eine neue Version aktualisieren

Eine Tarball-URL ist eine feste Adresse, kein semver-Bereich: npm update und npm outdated sehen keine neuen Pro-Releases, und nichts aktualisiert sich von selbst. So wechseln Sie auf eine neue Version:

1. Lesen Sie die Änderungen der Zielversion.
2. Ändern Sie die Version am Ende der URL, zum Beispiel …/YOUR_DOWNLOAD_KEY/0.1.0.tgz auf die neue Versionsnummer.
3. Führen Sie npm install aus, um das neue Archiv herunterzuladen und seinen Eintrag in der Lockfile neu zu erzeugen.
4. Führen Sie Typprüfung und Tests aus und committen Sie dann package.json und package-lock.json gemeinsam.

Für ein Rollback richten Sie die URL wieder auf die vorherige Version und führen erneut npm install aus. Veröffentlichte Archive sind unveränderlich, daher installiert sich die vorherige Version mit derselben Integrität wie zuvor.

#Continuous Integration

Die CI braucht nichts über das hinaus, was sie für öffentliche Pakete ohnehin tut: URL und Integrität stehen in der Lockfile, und der Download erfordert kein Login.

npm ci
npm run typecheck
npm test
npm run build

Behalten Sie im Blick, wohin der Download-Schlüssel in der CI gelangt:

• Abhängigkeits-Caches. Wenn Sie das Cache-Verzeichnis von npm oder node_modules zwischen Läufen cachen, sind das gecachte Archiv und die Lockfile so sensibel wie der Schlüssel selbst. Halten Sie Caches privat für das Projekt.
• Logs. Fehlermeldungen von npm können die versuchte URL samt Schlüssel enthalten. Veröffentlichen Sie keine CI-Logs privater Projekte.
• Forks und öffentliche Spiegel. Ein Repository, das den Schlüssel enthält, muss privat bleiben. Pushen Sie es nicht auf einen öffentlichen Spiegel.

#Den Download-Schlüssel geheim halten

Der Schlüssel ist ein Bearer-Geheimnis für Downloads. Wer die URL hat, kann dieses Release herunterladen; er verdient also dieselbe Sorgfalt wie ein API-Token:

• Er steht in package.json, package-lock.json, im lokalen Cache von npm und möglicherweise in Logs. Halten Sie das Repository und diese Dateien privat.
• Fügen Sie die URL nicht in öffentliche Issues, Chats, Gists, Screenshots oder Fehlerberichte ein. Wenn Sie eine Abhängigkeitsliste teilen, ersetzen Sie den Schlüssel durch YOUR_DOWNLOAD_KEY.
• Wurde der Schlüssel offengelegt, fordern Sie einen neuen an, ersetzen ihn in package.json, führen npm install aus und committen beide Dateien. Das Archiv ist dasselbe, daher ändert sich nur die URL in resolved; die Integrität bleibt identisch.

#Peer-Abhängigkeiten und ein einziges React

Pro deklariert react und react-dom ^18.2.0 || ^19.0.0 als Peer-Abhängigkeiten und verwendet die Kopie Ihrer Anwendung. npm meldet einen Konflikt bei den Peer-Abhängigkeiten, wenn Ihr Projekt ein älteres React verwendet.

Im Bundle darf es genau ein React geben. Zwei Kopien machen Hooks und Context kaputt, auf die useSchedulerControl, der Subpfad super-scheduler/hooks und die Render-Slots von super-scheduler/react-render angewiesen sind. npm ls react react-dom muss eine einzige Version zeigen. In einem Monorepo oder wenn Sie Pakete lokal verlinken, weisen Sie den Bundler an, eine einzige Kopie aufzulösen, zum Beispiel mit Vites resolve.dedupe (↗) auf ['react', 'react-dom'].

#Imports und Styles

Das Paket heißt super-scheduler, egal von welcher URL es installiert wurde. Importieren Sie das Stylesheet einmal in Ihrer Einstiegsdatei, vor Ihrem eigenen 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}
    />
  )
}

Sie sollten einen Monat an Tagesspalten, zwei Zimmer und eine Buchung sehen. Ziehen Sie die Buchung in das andere Zimmer: onEventsChange schreibt ihre neue Position in den React-State; dieses Muster beschreibt Kontrollierte Ereignisse und Callbacks.

Optionale Funktionen liegen in eigenen Subpfaden, Sie laden also nur, was Sie importieren:

Jeder Einstiegspunkt liefert ES-Module und CommonJS mit TypeScript-Deklarationen für beide. moduleResolution: "bundler", "node16" und "nodenext" lesen die exports des Pakets; auch die ältere Auflösung "node" findet die Typen der Subpfade. Einige Funktionen und Sprachpakete werden bei Bedarf mit dynamischem import() geladen; lassen Sie das Code-Splitting Ihres Bundlers also aktiviert (in Vite, Next.js und webpack ist es standardmäßig aktiv).

#Probleme bei der Installation beheben

Für Probleme zur Laufzeit nach der Installation siehe Fehlerbehebung.

#Nächste Schritte

• Erfahren Sie, wie sich die Komponente in eine React-App einfügt: React-Integration.
• Binden Sie Ihre Daten und Ihr Backend an: Kontrollierte Ereignisse und Callbacks.
• Ergänzen Sie Geschäftsregeln beim Ziehen: Ziehen, Dauer ändern und Geschäftsregeln.