A timeline de recursos e as colunas de recursos do FullCalendar são Premium: uma aplicação comercial precisa de uma chave de licença paga. A página de licenças dele lista as opções gratuitas, para aplicações inteiramente AGPL e para organizações sem fins lucrativos registradas. O agendador do Needless UI oferece as duas coisas com licença MIT, além de eventos recorrentes e arquivos iCalendar. Este guia leva uma aplicação Angular de um para o outro: o que se aproveita, o que não se aproveita e os dados a converter.
Os nomes usados são os do FullCalendar 7, com os da versão 6 entre colchetes quando forem diferentes. O conector Angular do FullCalendar suporta do Angular 16 ao 22; o Needless UI precisa do Angular 22.
O que você ganha
| Funcionalidade | FullCalendar | Needless UI |
|---|---|---|
| Timeline de recursos: uma linha por sala ou pessoa | Premium | Sim: um dia, uma semana ou um mês |
| Recursos como colunas nas visualizações de dia e de semana | Premium | Sim |
| Visualizações de mês, semana e dia | Gratuito | Sim |
| Arrastar para mover e redimensionar | Gratuito; para outro recurso, com o Premium | Sim, também para outros recursos. Redimensiona pelo fim, não pelo início. |
| Selecionar um horário para criar um evento | Gratuito | Sim, com o ponteiro, um toque longo ou o teclado |
| Regras como impedir sobreposições | Gratuito: opções de sobreposição e de restrição | Sim: uma única função allow, consultada antes de cada mudança |
| Mover e redimensionar eventos pelo teclado | Não consta na documentação de acessibilidade dele, que trata de rótulos ARIA e do foco com Tab | Sim, com anúncios para leitores de tela |
| Eventos recorrentes | Gratuito, com o plugin e a biblioteca rrule | Integrado: regras da RFC 5545, sem EXRULE, RDATE nem repetição de hora em hora |
| iCalendar (.ics) | Gratuito: lê um feed | Lê e escreve arquivos .ics |
| Visualizações de lista e de ano | Gratuito | Uma agenda dos próximos dias; sem visualizações de ano |
| Fusos horários | Gratuito: local, UTC ou fusos nomeados | Não: mostra os horários exatamente como os recebe |
| Recursos agrupados, aninhados ou com várias colunas | Premium | Não: uma coluna, desenhada pelo seu template |
| Arrastar e soltar elementos externos, eventos de fundo | Gratuito | Não |
| Impressão, renderização virtual | Premium | Não |
| Frameworks | Angular 16 a 22, React, Vue, JavaScript puro e outros | Angular 22 e React 19 |
O que corresponde a quê
| FullCalendar | Agendador do Needless UI |
|---|---|
<full-calendar [options]>, plugins, schedulerLicenseKey | <nui-scheduler>, com um input para cada opção; sem plugins e sem chave |
initialView: 'resourceTimelineDay' | view="timeline" e timelineSpan para uma semana ou um mês |
initialView: 'timeGridWeek' | view="week"; [(view)] é bidirecional |
resources, events | [resources], [events] |
resourceId, extendedProps | resource, data |
editable, selectable | editable, selectable |
select | (slotSelect): { start, end, allDay, resource } |
eventDrop, eventResize | (eventChange): nada se move até você atualizar events |
eventClick | (eventClick) |
eventOverlap, selectOverlap, eventAllow | [allow]: uma única função para mover, redimensionar e selecionar |
slotDuration, snapDuration | slotMinutes, snapMinutes, em minutos |
slotMinTime, slotMaxTime, scrollTime | dayStart, dayEnd, scrollHour, em horas |
businessHours | [businessHours], com os dias da semana de 1 (segunda-feira) a 7 |
datesSet | (rangeChange) |
eventContent, resourceCellContent [resourceLabelContent] | Templates nuiSchedulerEvent e nuiSchedulerResource |
locale, firstDay | locale (qualquer tag BCP 47), firstDay de 1 a 7 e labels para os textos do agendador |
Uma timeline de reserva de salas, das duas formas
Salas são recursos e reservas são eventos. As pessoas arrastam ao longo de uma sala para reservá-la e arrastam uma reserva para movê-la, e cada sala só pode ter uma reserva por vez. Com o FullCalendar 7 e a timeline de recursos Premium dele:
Com o agendador do Needless UI:
Duas coisas funcionam de outro jeito. O FullCalendar move a reserva por conta própria, e a aplicação copia a mudança; o agendador do Needless UI só informa a mudança, e é a atualização de events que a mantém, então seus dados continuam sendo a única fonte da verdade. Além disso, allow é código comum, consultado antes de cada mudança feita com o ponteiro ou o teclado, então a regra é sua, e você pode testá-la. O guia do calendário de reservas constrói esta aplicação passo a passo.
Converta os dados
| FullCalendar | Needless UI |
|---|---|
O end de um evento de dia inteiro é o dia seguinte ao evento | O end de um evento de dia inteiro é o último dia dele: subtraia um dia |
Os horários podem terminar em Z ou em um deslocamento como +02:00 | Horários sem fuso nem deslocamento, como 2026-11-02T09:30 |
Dias da semana de 0 (domingo) a 6, em businessHours e firstDay | Dias da semana de 1 (segunda-feira) a 7 (domingo) |
Durações como strings, como '00:30' | Números: minutos ou horas |
| Recursos ordenados por id e depois por título | Recursos na ordem do array |
rrule como objeto, e exrule | Uma string RFC 5545, como FREQ=WEEKLY;BYDAY=MO,FR, e exdate |
Um fuso horário como America/New_York | Converta os horários antes. nuiSchedulerFromIcs(text, { timeZone }) converte arquivos .ics enquanto os lê. |
Se você precisa do que falta
Se a sua aplicação depende de fusos horários, recursos agrupados, arrastar e soltar elementos externos ou impressão, o agendador ainda não substitui o FullCalendar. Abra uma issue com o que você precisa. Para todo o resto, a página do agendador tem todos os inputs, outputs e exemplos.