Die Ressourcen-Timeline und die Ressourcenspalten von FullCalendar gehören zu Premium: Eine kommerzielle App braucht einen kostenpflichtigen Lizenzschlüssel. Die Lizenzseite von FullCalendar nennt die kostenlosen Möglichkeiten, für Apps, die vollständig unter der AGPL stehen, und für eingetragene gemeinnützige Organisationen. Der Terminplaner von Needless UI bietet beides unter MIT-Lizenz, dazu wiederkehrende Termine und iCalendar-Dateien. In dieser Anleitung stellst du eine Angular-App vom einen auf den anderen um: was sich übernehmen lässt, was nicht und welche Daten du umwandeln musst.
Die Anleitung verwendet die Namen aus FullCalendar 7; wo die aus Version 6 abweichen, stehen sie in eckigen Klammern. Die Angular-Anbindung von FullCalendar unterstützt Angular 16 bis 22; Needless UI braucht Angular 22.
Was du bekommst
| Funktion | FullCalendar | Needless UI |
|---|---|---|
| Ressourcen-Timeline: eine Zeile pro Raum oder Person | Premium | Ja: ein Tag, eine Woche oder ein Monat |
| Ressourcen als Spalten in der Tages- und Wochenansicht | Premium | Ja |
| Monats-, Wochen- und Tagesansicht | Kostenlos | Ja |
| Verschieben und Dauer ändern per Ziehen | Kostenlos; auf eine andere Ressource mit Premium | Ja, auch auf andere Ressourcen. Die Dauer ändert sich am Ende, nicht am Anfang. |
| Zeit markieren, um einen Termin anzulegen | Kostenlos | Ja, per Zeiger, langem Drücken oder Tastatur |
| Regeln wie „keine Überschneidungen“ | Kostenlos: Optionen für Überschneidungen und Einschränkungen | Ja: eine einzige allow-Funktion, die vor jeder Änderung gefragt wird |
| Termine per Tastatur verschieben und in der Dauer ändern | Nicht in seiner Dokumentation zur Barrierefreiheit, die ARIA-Labels und den Tab-Fokus behandelt | Ja, mit Ansagen für Screenreader |
| Wiederkehrende Termine | Kostenlos, mit dem rrule-Plugin und der rrule-Bibliothek | Integriert: Regeln nach RFC 5545, ohne EXRULE, RDATE und stündliche Regeln |
| iCalendar (.ics) | Kostenlos: liest einen Feed | Liest und schreibt .ics-Dateien |
| Listen- und Jahresansichten | Kostenlos | Eine Agenda der kommenden Tage; keine Jahresansichten |
| Zeitzonen | Kostenlos: lokal, UTC oder benannte Zeitzonen | Nein: Angezeigt werden die Uhrzeiten, wie sie ankommen |
| Gruppierte, verschachtelte oder mehrspaltige Ressourcen | Premium | Nein: eine Spalte, die dein Template zeichnet |
| Externes Drag-and-drop, Hintergrundtermine | Kostenlos | Nein |
| Drucken, virtuelles Rendern | Premium | Nein |
| Frameworks | Angular 16 bis 22, React, Vue, reines JavaScript und mehr | Angular 22 und React 19 |
Was wem entspricht
| FullCalendar | Terminplaner von Needless UI |
|---|---|
<full-calendar [options]>, plugins, schedulerLicenseKey | <nui-scheduler> mit einem Input pro Option; keine Plugins und kein Schlüssel |
initialView: 'resourceTimelineDay' | view="timeline", dazu timelineSpan für eine Woche oder einen Monat |
initialView: 'timeGridWeek' | view="week"; [(view)] bindet in beide Richtungen |
resources, events | [resources], [events] |
resourceId, extendedProps | resource, data |
editable, selectable | editable, selectable |
select | (slotSelect): { start, end, allDay, resource } |
eventDrop, eventResize | (eventChange): Nichts bewegt sich, bis du events aktualisierst |
eventClick | (eventClick) |
eventOverlap, selectOverlap, eventAllow | [allow]: eine Funktion fürs Verschieben, fürs Ändern der Dauer und für die Zeitauswahl |
slotDuration, snapDuration | slotMinutes, snapMinutes, in Minuten |
slotMinTime, slotMaxTime, scrollTime | dayStart, dayEnd, scrollHour, in Stunden |
businessHours | [businessHours], mit Wochentagen von 1 (Montag) bis 7 |
datesSet | (rangeChange) |
eventContent, resourceCellContent [resourceLabelContent] | Templates nuiSchedulerEvent und nuiSchedulerResource |
locale, firstDay | locale (jedes Sprach-Tag nach BCP 47), firstDay von 1 bis 7 und labels für seine Texte |
Eine Timeline für Raumbuchungen, mit beiden gebaut
Räume sind Ressourcen, und Buchungen sind Termine. Wer über einen Raum zieht, bucht ihn, wer eine Buchung zieht, verschiebt sie, und ein Raum hat immer nur eine Buchung zur selben Zeit. Mit FullCalendar 7 und seiner Ressourcen-Timeline aus Premium:
Mit dem Terminplaner von Needless UI:
Zwei Dinge funktionieren anders. FullCalendar verschiebt eine Buchung selbst, und die App zieht die Änderung nach; der Terminplaner von Needless UI meldet sie nur, und erst wenn du events aktualisierst, bleibt sie bestehen. So bleiben deine Daten die einzige Quelle. Und allow ist gewöhnlicher Code, der vor jeder Änderung per Zeiger oder Tastatur gefragt wird, also kannst du die Regel selbst testen. Die Anleitung zur Raumbuchung baut diese App Schritt für Schritt auf.
Daten umwandeln
| FullCalendar | Needless UI |
|---|---|
Bei ganztägigen Terminen ist end der Tag danach | Bei ganztägigen Terminen ist end der letzte Tag: Zieh einen Tag ab |
Zeiten können auf Z oder einen Offset wie +02:00 enden | Lokale Uhrzeiten ohne Offset, etwa 2026-11-02T09:30 |
Wochentage von 0 (Sonntag) bis 6, in businessHours und firstDay | Wochentage von 1 (Montag) bis 7 (Sonntag) |
Dauern als Strings, etwa '00:30' | Zahlen: Minuten oder Stunden |
| Ressourcen sortiert nach ID, dann nach Titel | Ressourcen in der Reihenfolge des Arrays |
rrule als Objekt, dazu exrule | Ein String nach RFC 5545, etwa FREQ=WEEKLY;BYDAY=MO,FR, dazu exdate |
Eine Zeitzone wie America/New_York | Rechne die Zeiten vorher um. nuiSchedulerFromIcs(text, { timeZone }) rechnet .ics-Dateien beim Einlesen um. |
Wenn dir etwas fehlt
Wenn deine App auf Zeitzonen, gruppierte Ressourcen, externes Drag-and-drop oder Drucken angewiesen ist, kann der Terminplaner FullCalendar noch nicht ersetzen. Eröffne ein Issue für das, was du brauchst. Für alles andere findest du auf der Seite des Terminplaners jeden Input, jeden Output und jedes Beispiel.