# SuperScheduler Pro installieren > Pro per npm aus dem privaten HTTPS-Tarball installieren, Lockfile-Integrität wahren, gezielt aktualisieren, in der CI nutzen und den Download-Schlüssel schützen. Source: https://superscheduler.org/de/docs/install-pro/ Reviewed: 2026-10-07 Tragen Sie "super-scheduler": "https://npm.superscheduler.org/pro/YOUR_DOWNLOAD_KEY/0.1.0.tgz" in Ihre dependencies ein und führen Sie einmal npm install aus: npm lädt das Archiv herunter und hält seine SHA-512-Integrität in package-lock.json fest. Danach installiert npm ci genau dieses Archiv, lokal wie in der CI. Die Imports bleiben super-scheduler und super-scheduler/styles.css, React 18.2+ oder 19 ist eine Peer-Abhängigkeit, und der Schlüssel in der URL ist ein Download-Geheimnis. 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](https://docs.npmjs.com/cli/v11/configuring-npm/package-json/#urls-as-dependencies): 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](#download-key). - **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: ```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" } } ``` Installieren Sie dann: ```sh npm install ``` `npm install` mit der URL als Argument bewirkt dasselbe und schreibt den Eintrag für Sie: ```sh npm install https://npm.superscheduler.org/pro/YOUR_DOWNLOAD_KEY/0.1.0.tgz ``` Prüfen Sie das Ergebnis: ```sh npm ls super-scheduler react react-dom ``` Sie sollten `super-scheduler@0.1.0` 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`: ```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`](https://docs.npmjs.com/cli/v11/configuring-npm/package-lock-json/#packages). ## npm install oder npm ci | Befehl | Verwenden Sie ihn, wenn | Was er mit Pro macht | |---|---|---| | `npm install` | Sie eine Abhängigkeit hinzufügen, aktualisieren oder ihre URL ändern | Löst die URL auf, lädt das Archiv herunter und schreibt `resolved` und `integrity` in der Lockfile neu, wenn sie sich ändern | | `npm ci` | Überall sonst: frische Klone, CI, Docker-Builds, Deployments | Löscht `node_modules` und installiert genau das, was in der Lockfile steht, mit Integritätsprüfung; schlägt fehl, wenn `package.json` und Lockfile nicht übereinstimmen | 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](https://superscheduler.org/de/changelog/) 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. ```sh 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. > **Limitation:** > Der Schlüssel steuert Downloads, sonst nichts. Ein Widerruf sperrt neue Downloads vom Server, entfernt aber weder bereits heruntergeladene Archive noch npm-Caches noch Code, der schon in eine Anwendung gebündelt wurde. Er ist weder eine Lizenzprüfung zur Laufzeit noch DRM: Das installierte Paket kontaktiert keinen Server. ## 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`](https://vite.dev/config/shared-options.html#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: ```tsx // src/main.tsx 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( , ) ``` ```tsx // src/Planning.tsx 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([ { 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 ( ) } ``` 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](https://superscheduler.org/de/docs/controlled-state/). Optionale Funktionen liegen in eigenen Subpfaden, Sie laden also nur, was Sie importieren: | Import | Inhalt | |---|---| | `super-scheduler` | `SuperSchedulerComponent`, der Namespace `SuperScheduler`, `useSchedulerControl`, alle öffentlichen Typen, `version` | | `super-scheduler/styles.css` | Das Stylesheet und seine `--super-scheduler-*`-Tokens | | `super-scheduler/react-render` | Eine Variante der Komponente mit React-Render-Slots und Hover-Karten | | `super-scheduler/history` | Rückgängig machen und Wiederholen | | `super-scheduler/minimap` | Übersicht der Zeitleiste mit einem Ausschnittsfenster zum Ziehen | | `super-scheduler/panes` | Mehrere koordinierte Bereiche des Planers mit Trennleisten | | `super-scheduler/zoom-ui` | Zoom-Schieberegler, Zoomanzeige und Badge für die Detailstufe | | `super-scheduler/views` | Zoom, Scrollposition, Dichte, eingeklappte Zeilen und Spalten speichern und wiederherstellen | | `super-scheduler/ranges` | Abbrechbares Laden von Ereignissen nach Datumsbereich | | `super-scheduler/hooks` | React-Subscriptions auf den Zustand des Planers | | `super-scheduler/core` | DOM-freie Hilfsfunktionen für Datum, Dauer und Zeitleiste | | `super-scheduler/datasets` | Deterministische Beispieldaten für Demos und Tests | | `super-scheduler/tailwind` | Tailwind-CSS-v3-Preset | 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 | Symptom | Ursache und Lösung | |---|---| | npm schlägt für die Tarball-URL mit HTTP 403 fehl | Der Schlüssel ist falsch, abgelaufen oder widerrufen. Prüfen Sie auf Kopierfehler; fordern Sie bei Bedarf einen neuen Schlüssel an | | npm schlägt mit HTTP 404 fehl | Der Schlüssel ist gültig, aber diese Version existiert nicht. Gleichen Sie die Version in der URL mit den [Änderungen](https://superscheduler.org/de/changelog/) ab | | `EINTEGRITY` | Die heruntergeladenen Bytes passen nicht zum Hash in der Lockfile. Veröffentlichte Archive ändern sich nie; suchen Sie also nach einem beschädigten Cache (`npm cache verify`) oder einer von Hand bearbeiteten oder zusammengeführten Lockfile (stellen Sie sie aus der Versionsverwaltung wieder her). Ersetzen Sie nie den Hash, nur damit der Fehler verschwindet | | `npm ci` meldet, dass die Lockfile nicht synchron ist | `package.json` wurde ohne `npm install` geändert. Führen Sie `npm install` aus und committen Sie beide Dateien | | `ERESOLVE` mit Bezug auf React | Ihr React ist älter als 18.2. Aktualisieren Sie zuerst React | | „Invalid hook call“ aus SuperScheduler-Hooks | Zwei Kopien von React. Siehe [ein einziges React](#react) | | Das Raster hat keine Rahmen oder Farben | `super-scheduler/styles.css` ist nicht importiert | Für Probleme zur Laufzeit nach der Installation siehe [Fehlerbehebung](https://superscheduler.org/de/docs/troubleshooting/). ## Nächste Schritte - Erfahren Sie, wie sich die Komponente in eine React-App einfügt: [React-Integration](https://superscheduler.org/de/docs/react-integration/). - Binden Sie Ihre Daten und Ihr Backend an: [Kontrollierte Ereignisse und Callbacks](https://superscheduler.org/de/docs/controlled-state/). - Ergänzen Sie Geschäftsregeln beim Ziehen: [Ziehen, Dauer ändern und Geschäftsregeln](https://superscheduler.org/de/docs/drag-resize-rules/).