La timeline et les colonnes de ressources de FullCalendar font partie de sa version Premium : une application commerciale a besoin d’une clé de licence payante. Sa page de licence indique les options gratuites, pour les applications entièrement sous AGPL et pour les organismes à but non lucratif enregistrés. Le planificateur de Needless UI offre les deux sous licence MIT, avec les événements récurrents et les fichiers iCalendar. Ce guide fait passer une application Angular de l’un à l’autre : ce qui se transpose, ce qui ne se transpose pas, et les données à convertir.
Il reprend les noms de FullCalendar 7, avec ceux de la version 6 entre crochets quand ils diffèrent. Le connecteur Angular de FullCalendar prend en charge Angular 16 à 22 ; Needless UI nécessite Angular 22.
Ce que vous obtenez
| Fonctionnalité | FullCalendar | Needless UI |
|---|---|---|
| Timeline de ressources : une ligne par salle ou par personne | Premium | Oui : sur un jour, une semaine ou un mois |
| Ressources en colonnes dans les vues jour et semaine | Premium | Oui |
| Vues mois, semaine et jour | Gratuit | Oui |
| Glisser pour déplacer et redimensionner | Gratuit ; vers une autre ressource avec Premium | Oui, vers d’autres ressources aussi. La fin se redimensionne, pas le début. |
| Sélectionner une plage horaire pour créer un événement | Gratuit | Oui, au pointeur, par un appui long ou au clavier |
| Des règles, comme l’interdiction des chevauchements | Gratuit : options de chevauchement et de contrainte | Oui : une seule fonction allow, consultée avant chaque changement |
| Déplacer et redimensionner les événements au clavier | Absent de sa documentation sur l’accessibilité, qui traite des libellés ARIA et du focus avec Tab | Oui, avec des annonces pour les lecteurs d’écran |
| Événements récurrents | Gratuit, avec le plugin et la bibliothèque rrule | Intégrés : règles de la RFC 5545, sans EXRULE, RDATE ni récurrence horaire |
| iCalendar (.ics) | Gratuit : lit un flux | Lit et écrit des fichiers .ics |
| Vues liste et année | Gratuit | Un agenda des jours à venir ; pas de vue année |
| Fuseaux horaires | Gratuit : local, UTC ou nommé | Non : il affiche les heures qu’il reçoit, telles quelles |
| Ressources groupées, imbriquées ou sur plusieurs colonnes | Premium | Non : une seule colonne, dessinée par votre template |
| Glisser-déposer externe, événements d’arrière-plan | Gratuit | Non |
| Impression, rendu virtuel | Premium | Non |
| Frameworks | Angular 16 à 22, React, Vue, JavaScript pur et plus encore | Angular 22 et React 19 |
Les correspondances
| FullCalendar | Planificateur de Needless UI |
|---|---|
<full-calendar [options]>, plugins, schedulerLicenseKey | <nui-scheduler>, avec un input par option ; ni plugins, ni clé |
initialView: 'resourceTimelineDay' | view="timeline", et timelineSpan pour une semaine ou un mois |
initialView: 'timeGridWeek' | view="week" ; [(view)] est bidirectionnel |
resources, events | [resources], [events] |
resourceId, extendedProps | resource, data |
editable, selectable | editable, selectable |
select | (slotSelect) : { start, end, allDay, resource } |
eventDrop, eventResize | (eventChange) : rien ne bouge tant que vous ne mettez pas à jour events |
eventClick | (eventClick) |
eventOverlap, selectOverlap, eventAllow | [allow] : une seule fonction pour les déplacements, les redimensionnements et les sélections |
slotDuration, snapDuration | slotMinutes, snapMinutes, en minutes |
slotMinTime, slotMaxTime, scrollTime | dayStart, dayEnd, scrollHour, en heures |
businessHours | [businessHours], avec les jours de 1 (lundi) à 7 |
datesSet | (rangeChange) |
eventContent, resourceCellContent [resourceLabelContent] | Les templates nuiSchedulerEvent et nuiSchedulerResource |
locale, firstDay | locale (n’importe quelle étiquette BCP 47), firstDay de 1 à 7, et labels pour ses textes |
Une timeline de réservation de salles, dans les deux versions
Les salles sont des ressources et les réservations des événements. On glisse le long d’une salle pour la réserver et on fait glisser une réservation pour la déplacer, et une salle n’accueille qu’une réservation à la fois. Avec FullCalendar 7 et sa timeline de ressources Premium :
Avec le planificateur de Needless UI :
Deux choses fonctionnent différemment. FullCalendar déplace lui-même une réservation, et l’application recopie le changement ; le planificateur de Needless UI se contente de le signaler, et c’est la mise à jour de events qui le conserve : vos données restent ainsi l’unique source. Et allow est du code ordinaire, consulté avant chaque changement fait au pointeur ou au clavier : vous pouvez donc tester la règle vous-même. Le guide de réservation de salles construit cette application étape par étape.
Convertir les données
| FullCalendar | Needless UI |
|---|---|
Pour un événement sur toute la journée, end est le lendemain de l’événement | Pour un événement sur toute la journée, end est son dernier jour : retirez un jour |
Les heures peuvent se terminer par Z ou par un décalage comme +02:00 | Des heures locales sans décalage, comme 2026-11-02T09:30 |
Jours de la semaine de 0 (dimanche) à 6, dans businessHours et firstDay | Jours de la semaine de 1 (lundi) à 7 (dimanche) |
Des durées sous forme de chaînes, comme '00:30' | Des nombres : minutes ou heures |
| Ressources triées par id, puis par titre | Ressources dans l’ordre du tableau |
rrule sous forme d’objet, et exrule | Une chaîne RFC 5545, comme FREQ=WEEKLY;BYDAY=MO,FR, et exdate |
Un fuseau horaire comme America/New_York | Convertissez d’abord les heures. nuiSchedulerFromIcs(text, { timeZone }) convertit les fichiers .ics à la lecture. |
Si vous avez besoin de ce qui manque
Si votre application dépend des fuseaux horaires, des ressources groupées, du glisser-déposer externe ou de l’impression, le planificateur ne peut pas encore remplacer FullCalendar. Ouvrez une issue pour ce qu’il vous faut. Pour tout le reste, la page du planificateur présente tous les inputs, outputs et exemples.