Dokumentation
Alles, um eine Ressourcen-Zeitleiste in ein React-Produkt zu bringen: vom ersten Rendern bis zum Produktivbetrieb. Jede Anleitung beantwortet zuerst ihre Frage und zeigt dann Code, der gegen die aktuelle Version kompiliert.
Drücken Sie überall /, um Anleitungen, Beispiele und Anwendungsfälle zu durchsuchen.
Einstieg
- 01Was ist ein Ressourcenplaner?Wie sich ein Ressourcenplaner von einem Terminkalender unterscheidet, wann Ihr Produkt einen braucht und welche Funktionen SuperScheduler Lite und Pro bieten.
- 02Schnellstart mit Litesuper-scheduler-lite von npm installieren und eine schreibgeschützte Tageszeitleiste für Ressourcen in React rendern: Optionen, Klick-Callbacks, Control und Grenzen.
- 03SuperScheduler Pro installierenPro 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.
Grundbegriffe
- Ressourcen, Ereignisse und IntervalleDas Datenmodell: IDs von Ressourcen und Ereignissen, halboffene Intervalle, ISO-Zeiten mit Sekunden, Ortszeiten ohne Zeitzone und typisierte Felder mit EventData<T>.
- React-Integration, Refs und LebenszyklusSuperSchedulerComponent einbinden, das Control über Refs oder useSchedulerControl erreichen, Größe festlegen, Props per Identität stabil halten, sauber aufräumen.
- Kontrollierte Ereignisse und CallbacksproEreignisse mit onEventsChange im React-State halten, dem Control eine Kopie geben, die Reihenfolge der Callbacks kennen und optimistisch oder bestätigt speichern.
Interaktion
- Ziehen, Dauer ändern und GeschäftsregelnproVerschiebungen beim Ziehen prüfen, Überlappungen verhindern, Zeiten sperren, Ereignisse fixieren, asynchron bestätigen und jede Ablehnung in der Drag-Karte erklären.
- Stunden, Minuten, Tage und ZoomproSkalen, Zelldauern und Zeitköpfe konfigurieren, Stunden- oder 15-Minuten-Zellen zeigen, Nicht-Geschäftszeit ausblenden und von Monaten bis Minuten zoomen.
- Ressourcenbäume, Spalten und AuswahlproRessourcen im Baum gruppieren, sortier- und verschiebbare Spalten im Zeilenkopf ergänzen, Zeilen und Ereignisse filtern und Ereignisse, Zeilen oder Zeiträume wählen.
- Tastatur, Barrierefreiheit und TouchVolle Tastaturbedienung aktivieren, Fokusmodell und Ansagen verstehen, Alternativen zum Ziehen bieten und die Zeitleiste an Touch und assistive Technik anpassen.
Anpassung
- React-Render-Slots und Hover-KartenproEreignisse, Zeilen, Köpfe, Zellen und Areas mit super-scheduler/react-render als React-Komponenten rendern, Hover-Karten ergänzen und Scrollen flüssig halten.
- Themes, Tokens, Tailwind und Dark ModeDen Planer mit --super-scheduler-*-Tokens gestalten, den Akzent so umfärben, dass jede Tönung folgt, zum eigenen Dark Mode passen und Tailwind v3 oder v4 einrichten.
Pro-Module
- Minimap und abgeleitete KennzahlenproMit super-scheduler/minimap eine Übersicht der Zeitleiste ergänzen, sie mit Auslastung oder eigenen Kennzahlen speisen, gestalten, beschriften und sauber freigeben.
- Rückgängig, Wiederholen und VerlaufproGesten mit super-scheduler/history aufzeichnen, Rückgängig auf kontrollierten Zustand anwenden, Änderungen bündeln, eigene Befehle anlegen, Abgelehntes zurückrollen.
- Abhängigkeiten und Verknüpfungen zwischen EreignissenproEnde-Anfang- und andere Verknüpfungen zwischen Ereignissen aus Ihren Daten zeichnen, gestalten, auf Klicks reagieren und Abhängigkeiten im eigenen Code durchsetzen.
- Gekoppelte Bereiche und gespeicherte AnsichtenproEine Zeitleiste mit super-scheduler/panes in synchrone Bereiche teilen, Ereignisse dazwischen verschieben und Ansichten mit super-scheduler/views sichern.
- Daten nach Zeitraum ladenproEreignisse beim Scrollen mit super-scheduler/ranges laden: abbrechbare Anfragen in Abschnitten, Cache, Ladeplatzhalter, Wiederholungen und der Serververtrag.
Produktion
- Virtualisierung und PerformanceWie SuperScheduler Zeilen, Zellen und Ereignisse ohne React-Renderings virtualisiert, was in Ihrer Integration Zeit kostet, eine Checkliste und wie Sie messen.
- Sprachen, Kalenderdaten und ZeitzonenKöpfe und Texte mit jeder Intl-Locale lokalisieren, SuperScheduler.Date formatieren und Zeitzonen und Wiederholungen dort lassen, wo sie hingehören: in Ihrer App.
- Server-Rendering und vorgerenderte SeitenSuperScheduler mit SSR oder statischem Vorrendern nutzen: sinnvolle Hülle ausliefern, Platz reservieren, die DOM-Engine im Client mounten, CSP streng halten.
- Von Lite zu Pro migrierenEine Integration von super-scheduler-lite auf super-scheduler umstellen: was bleibt, welche Standards und Callbacks sich ändern, wie Sie Pro schrittweise nutzen.
- FehlerbehebungTypische Integrationsprobleme lösen: fehlende Styles, Host ohne Höhe, null-Refs, leere Ansichten, falsche Imports, doppeltes React, CSP-Fehler und Tailwind.