Le planificateur et la grille de données sont aussi des composants React, dans @needless-ui/react : mêmes fonctionnalités, même comportement au clavier et même accessibilité qu’en Angular, même feuille de style et même licence MIT. Les autres composants suivront. Les deux nécessitent React 19 et fonctionnent avec le Next.js App Router et avec Vite.
Installation
pnpm add @needless-ui/react @needless-ui/cssImporter les styles
Les composants ne livrent aucun style. Importez la feuille de style une seule fois, depuis un fichier CSS de votre application.
/* app/globals.css in Next.js, src/index.css with Vite */
@layer reset, nui, app;
@import '@needless-ui/css';Les couches fonctionnent comme en Angular : les resets vont dans une couche avant nui et, avec Tailwind CSS, nui se place entre la base de Tailwind et ses utilitaires, comme le montre le guide Premiers pas.
Un planificateur
Chaque composant a son propre point d’entrée. Le planificateur affiche les events que vous lui passez et vous prévient quand quelqu’un en déplace un ou choisit une plage horaire pour en créer un : c’est vous qui gardez les événements.
Une grille de données
Décrivez les columns en dehors du composant, pour que la grille ne refasse pas son travail à chaque rendu. Une modification appelle onRowsChange avec les nouvelles lignes, et les méthodes comme l’export Excel se trouvent sur la ref de la grille.
L’API à la manière de React
Les composants React suivent les mêmes spécifications que les composants Angular : leurs API se correspondent, à la manière de React. Les pages d’API listent toutes les props : celles du planificateur et celles de la grille de données.
| Angular | React |
|---|---|
Un modèle, [(view)] | Un état : view avec onViewChange, ou defaultView pour que le composant le garde |
Un output, (eventClick) | Un callback, onEventClick |
Un template, <ng-template nuiSchedulerEvent> | Une fonction qui dessine, renderEvent |
Une méthode, scheduler.next() | Une méthode sur la ref, ref.current.next() |
children, pour les données arborescentes | getChildren : React réserve children aux éléments |
locale, par défaut le LOCALE_ID de l’application | locale, par défaut en-US |
Rendu côté serveur
Les deux composants sont rendus sur le serveur, puis hydratés dans le navigateur. Le paquet les marque comme composants client : un Server Component peut donc les afficher avec des props sérialisables, et des fonctions utilitaires comme nuiSchedulerFromIcs s’exécutent sur le serveur. Les callbacks ne peuvent pas passer au navigateur : un composant qui en reçoit va dans votre propre composant client, comme les deux ci-dessus.
Ce qui dépend du lecteur attend le navigateur : la ligne de l’heure actuelle du planificateur, et la date du jour. Donnez au planificateur une defaultDate quand son rendu se fait sur un serveur, car la date du jour sur le serveur n’est pas forcément celle du lecteur.