Documentation
Tout ce qu’il faut pour intégrer une frise de ressources dans un produit React, du premier rendu à la mise en production. Chaque guide répond d’abord à sa question, puis montre du code qui compile avec la version actuelle.
Appuyez sur / n’importe où pour chercher dans les guides, exemples et cas d’usage.
Pour commencer
- 01Qu’est-ce qu’un planificateur de ressources ?Ce qui distingue un planificateur de ressources d’un agenda de rendez-vous, quand votre produit en a besoin et ce qu’apportent SuperScheduler Lite et Pro.
- 02Démarrage rapide avec LiteInstallez super-scheduler-lite depuis npm et affichez une frise quotidienne de ressources en lecture seule dans React : options, callbacks de clic et limites.
- 03Installer SuperScheduler ProInstallez Pro depuis son archive HTTPS privée et versionnée avec npm, préservez l’intégrité du lockfile, mettez à jour, utilisez-le en CI et protégez la clé.
Concepts clés
- Ressources, événements et intervallesLe modèle de données : ids de ressources et d’événements, intervalles semi-ouverts, dates ISO avec secondes, heure civile sans fuseau et champs typés EventData<T>.
- Intégration React, refs et cycle de vieMontez SuperSchedulerComponent, accédez au contrôle par les refs ou useSchedulerControl, dimensionnez-le, stabilisez les props et nettoyez en Strict Mode.
- Événements contrôlés et callbacksproGardez les événements dans le state React avec onEventsChange, donnez une copie au contrôle, suivez l’ordre des callbacks et enregistrez de façon optimiste.
Interaction
- Glisser, redimensionner et règles métierproValidez les déplacements au glisser, empêchez les chevauchements, bloquez du temps, verrouillez des événements, confirmez en asynchrone et expliquez chaque refus.
- Heures, minutes, jours et zoomproConfigurez échelles, durées de cellule et en-têtes de temps, affichez des cellules de 15 minutes, masquez le temps non ouvré et zoomez des mois aux minutes.
- Arborescences de ressources, colonnes et sélectionproGroupez les ressources en arborescence, ajoutez des colonnes d’en-tête triables et redimensionnables, filtrez lignes et événements, et sélectionnez dans Pro.
- Clavier, accessibilité et tactileActivez la navigation clavier complète, comprenez focus et annonces, proposez des alternatives au glisser et adaptez la frise au tactile et aux aides techniques.
Personnalisation
- Slots de rendu React et cartes de survolproRendez événements, lignes, en-têtes, cellules et zones avec React via super-scheduler/react-render, ajoutez des cartes de survol et gardez le défilement fluide.
- Thèmes, tokens, Tailwind et mode sombreStylez le planificateur avec les tokens --super-scheduler-*, changez l’accent et toutes ses teintes, suivez votre mode sombre et configurez Tailwind v3 ou v4.
Modules Pro
- Minimap et métriques dérivéesproAjoutez une vue d’ensemble de la frise avec super-scheduler/minimap, alimentez-la avec l’occupation ou votre métrique, puis stylez-la, libellez-la et libérez-la.
- Annuler, rétablir et historiqueproEnregistrez déplacements et redimensionnements avec super-scheduler/history, regroupez des modifications, ajoutez vos commandes et annulez ce que refuse le serveur.
- Dépendances et liens entre événementsproTracez des liens fin-début et d’autres types entre événements depuis vos données, stylez-les, réagissez aux clics et vérifiez les dépendances dans votre code.
- Volets coordonnés et vues enregistréesproDécoupez une frise en volets synchronisés avec super-scheduler/panes, déplacez des événements entre eux, et sauvegardez la vue avec super-scheduler/views.
- Chargement des données par plage de datesproChargez les événements au fil du défilement avec super-scheduler/ranges : requêtes par tranches annulables, cache, squelettes, reprises et contrat serveur.
Production
- Virtualisation et performancesComment SuperScheduler virtualise lignes, cellules et événements sans rendu React, ce qui coûte du temps dans une intégration, une liste de contrôle et la mesure.
- Langues, dates civiles et fuseaux horairesLocalisez en-têtes et libellés avec toute locale Intl, formatez les SuperScheduler.Date, et gérez fuseaux horaires et récurrence dans votre application.
- Rendu serveur et pages prérenduesUtilisez SuperScheduler en SSR ou en prérendu : livrez une coquille utile, réservez l’espace, montez le moteur DOM côté client et gardez une CSP stricte.
- Passer de Lite à ProPassez de super-scheduler-lite à super-scheduler : ce qui reste identique, les valeurs par défaut et callbacks qui changent, et l’adoption de Pro pas à pas.
- DépannageRésolvez les problèmes d’intégration courants : styles absents, hôte sans hauteur, refs nulles, vues vides, imports erronés, React dupliqué, CSP et Tailwind.