La timeline delle risorse e le colonne delle risorse di FullCalendar sono Premium: un’app commerciale richiede una chiave di licenza a pagamento. La sua pagina sulla licenza elenca le opzioni gratuite, per le app interamente AGPL e per le organizzazioni non profit registrate. Il pianificatore di Needless UI offre entrambe con licenza MIT, insieme agli eventi ricorrenti e ai file iCalendar. Questa guida porta un’app Angular dall’uno all’altro: cosa passa così com’è, cosa no e quali dati convertire.
La guida usa i nomi di FullCalendar 7, con quelli della versione 6 tra parentesi quadre dove sono diversi. Il connettore Angular di FullCalendar supporta da Angular 16 ad Angular 22; Needless UI richiede Angular 22.
Cosa ottieni
| Funzionalità | FullCalendar | Needless UI |
|---|---|---|
| Timeline delle risorse: una riga per sala o persona | Premium | Sì: un giorno, una settimana o un mese |
| Risorse in colonna nelle viste giorno e settimana | Premium | Sì |
| Viste mese, settimana e giorno | Gratis | Sì |
| Trascinare per spostare e ridimensionare | Gratis; su un’altra risorsa con Premium | Sì, anche su altre risorse. Si ridimensiona dalla fine, non dall’inizio. |
| Selezionare un orario per creare un evento | Gratis | Sì, con il puntatore, una pressione prolungata o la tastiera |
| Regole come il divieto di sovrapposizioni | Gratis: le opzioni overlap e constraint | Sì: un’unica funzione allow, consultata prima di ogni modifica |
| Spostare e ridimensionare gli eventi da tastiera | Non nella sua documentazione sull’accessibilità, che tratta etichette ARIA e focus con Tab | Sì, con annunci per gli screen reader |
| Eventi ricorrenti | Gratis, con il plugin e la libreria rrule | Integrati: regole RFC 5545, senza EXRULE, RDATE né regole a cadenza oraria |
| iCalendar (.ics) | Gratis: legge un feed | Legge e scrive file .ics |
| Viste elenco e anno | Gratis | Un’agenda dei prossimi giorni; nessuna vista anno |
| Fusi orari | Gratis: ora locale, UTC o fuso con nome | No: mostra gli orari così come li riceve |
| Risorse raggruppate, annidate o su più colonne | Premium | No: una colonna, disegnata dal tuo template |
| Drag and drop dall’esterno, eventi di sfondo | Gratis | No |
| Stampa, rendering virtuale | Premium | No |
| Framework | Da Angular 16 a 22, React, Vue, JavaScript puro e altri | Angular 22 e React 19 |
Cosa corrisponde a cosa
| FullCalendar | Pianificatore di Needless UI |
|---|---|
<full-calendar [options]>, plugins, schedulerLicenseKey | <nui-scheduler>, con un input per ogni opzione; niente plugin e niente chiave |
initialView: 'resourceTimelineDay' | view="timeline", e timelineSpan per una settimana o un mese |
initialView: 'timeGridWeek' | view="week"; [(view)] è bidirezionale |
resources, events | [resources], [events] |
resourceId, extendedProps | resource, data |
editable, selectable | editable, selectable |
select | (slotSelect): { start, end, allDay, resource } |
eventDrop, eventResize | (eventChange): non si sposta nulla finché non aggiorni events |
eventClick | (eventClick) |
eventOverlap, selectOverlap, eventAllow | [allow]: un’unica funzione per spostamenti, ridimensionamenti e selezioni |
slotDuration, snapDuration | slotMinutes, snapMinutes, in minuti |
slotMinTime, slotMaxTime, scrollTime | dayStart, dayEnd, scrollHour, in ore |
businessHours | [businessHours], con i giorni della settimana da 1 (lunedì) a 7 |
datesSet | (rangeChange) |
eventContent, resourceCellContent [resourceLabelContent] | I template nuiSchedulerEvent e nuiSchedulerResource |
locale, firstDay | locale (qualsiasi tag BCP 47), firstDay da 1 a 7, e labels per i suoi testi |
Una timeline di prenotazione sale, prima e dopo
Le sale sono risorse e le prenotazioni sono eventi. Si trascina lungo una sala per prenotarla e si trascina una prenotazione per spostarla, e ogni sala ospita una sola prenotazione alla volta. Con FullCalendar 7 e la sua timeline delle risorse Premium:
Con il pianificatore di Needless UI:
Due cose funzionano in modo diverso. FullCalendar sposta da sé la prenotazione e l’app copia la modifica; il pianificatore di Needless UI si limita a riportarla, ed è aggiornando events che la modifica diventa effettiva, così i tuoi dati restano l’unica fonte di verità. Inoltre allow è semplice codice, consultato prima di ogni modifica fatta con il puntatore o da tastiera, quindi la regola puoi testarla tu. La guida al calendario di prenotazione costruisce questa app passo dopo passo.
Convertire i dati
| FullCalendar | Needless UI |
|---|---|
L’end di un evento di tutto il giorno è il giorno dopo l’evento | L’end di un evento di tutto il giorno è il suo ultimo giorno: togli un giorno |
Gli orari possono finire con Z o con un offset come +02:00 | Orari senza offset, come 2026-11-02T09:30 |
Giorni della settimana da 0 (domenica) a 6, in businessHours e firstDay | Giorni della settimana da 1 (lunedì) a 7 (domenica) |
Durate come stringhe, ad esempio '00:30' | Numeri: minuti oppure ore |
| Risorse ordinate per id, poi per titolo | Risorse nell’ordine dell’array |
rrule come oggetto, ed exrule | Una stringa RFC 5545, come FREQ=WEEKLY;BYDAY=MO,FR, ed exdate |
Un fuso orario come America/New_York | Converti prima gli orari. nuiSchedulerFromIcs(text, { timeZone }) converte i file .ics mentre li legge. |
Se ti serve ciò che manca
Se la tua app dipende dai fusi orari, dalle risorse raggruppate, dal drag and drop dall’esterno o dalla stampa, il pianificatore non può ancora sostituire FullCalendar. Apri una issue per ciò che ti serve. Per tutto il resto, la pagina del pianificatore riporta ogni input, output ed esempio.