Premium ang resource timeline at mga resource column ng FullCalendar: kailangan ng bayad na license key ang isang commercial app. Nakalista sa license page nito ang mga libreng opsyon, para sa mga app na buong AGPL at para sa mga rehistradong non-profit. Nasa Needless UI scheduler ang dalawang ito sa ilalim ng MIT, kasama ang mga recurring event at iCalendar file. Inililipat ng gabay na ito ang isang Angular app mula sa isa papunta sa kabila: kung ano ang nadadala, kung ano ang hindi, at ang data na kailangang i-convert.
Ginagamit nito ang mga pangalan sa FullCalendar 7, at nasa bracket ang sa version 6 kapag magkaiba. Sinusuportahan ng Angular connector ng FullCalendar ang Angular 16 hanggang 22; Angular 22 ang kailangan ng Needless UI.
Ano ang makukuha mo
| Feature | FullCalendar | Needless UI |
|---|---|---|
| Resource timeline: isang row bawat room o tao | Premium | Oo: isang araw, isang linggo o isang buwan |
| Mga resource bilang column sa mga view ng araw at linggo | Premium | Oo |
| Mga view ng buwan, linggo at araw | Libre | Oo |
| I-drag para ilipat at i-resize | Libre; papunta sa ibang resource kapag may Premium | Oo, pati papunta sa ibang resource. Nare-resize ang dulo, hindi ang simula. |
| Pumili ng oras para gumawa ng event | Libre | Oo, gamit ang pointer, long press o keyboard |
| Mga patakaran gaya ng bawal mag-overlap | Libre: mga opsyon para sa overlap at constraint | Oo: iisang allow function, na tinatanong bago ang bawat pagbabago |
| Ilipat at i-resize ang mga event gamit ang keyboard | Wala sa accessibility docs nito, na tungkol sa mga ARIA label at Tab focus | Oo, at inaanunsyo sa mga screen reader |
| Mga recurring event | Libre, gamit ang rrule plugin at library | Built in: mga RFC 5545 rule, maliban sa EXRULE, RDATE at mga rule na kada oras |
| iCalendar (.ics) | Libre: nagbabasa ng feed | Nagbabasa at nagsusulat ng mga .ics file |
| Mga view ng list at taon | Libre | Isang agenda ng mga susunod na araw; walang view ng taon |
| Mga time zone | Libre: local, UTC o may pangalan | Wala: ipinapakita nito ang mga oras gaya ng pagkakatanggap, nang walang conversion |
| Naka-group, nested o multi-column na resource | Premium | Wala: isang column, na iginuguhit ng template mo |
| External drag and drop, mga background event | Libre | Wala |
| Pag-print, virtual rendering | Premium | Wala |
| Mga framework | Angular 16 hanggang 22, React, Vue, plain JavaScript at iba pa | Angular 22 at React 19 |
Ano ang katapat ng ano
| FullCalendar | Needless UI scheduler |
|---|---|
<full-calendar [options]>, plugins, schedulerLicenseKey | <nui-scheduler>, na may input para sa bawat opsyon; walang plugin at walang key |
initialView: 'resourceTimelineDay' | view="timeline", at timelineSpan para sa isang linggo o isang buwan |
initialView: 'timeGridWeek' | view="week"; two-way ang [(view)] |
resources, events | [resources], [events] |
resourceId, extendedProps | resource, data |
editable, selectable | editable, selectable |
select | (slotSelect): { start, end, allDay, resource } |
eventDrop, eventResize | (eventChange): walang gagalaw hangga’t hindi mo ina-update ang events |
eventClick | (eventClick) |
eventOverlap, selectOverlap, eventAllow | [allow]: iisang function para sa mga paglipat, pag-resize at pagpili |
slotDuration, snapDuration | slotMinutes, snapMinutes, sa minuto |
slotMinTime, slotMaxTime, scrollTime | dayStart, dayEnd, scrollHour, sa oras |
businessHours | [businessHours], na may mga araw ng linggo mula 1 (Lunes) hanggang 7 |
datesSet | (rangeChange) |
eventContent, resourceCellContent [resourceLabelContent] | Mga template na nuiSchedulerEvent at nuiSchedulerResource |
locale, firstDay | locale (kahit anong BCP 47 tag), firstDay mula 1 hanggang 7, at labels para sa mga salita nito |
Isang room booking timeline, sa dalawang paraan
Mga resource ang mga room at mga event ang mga booking. Nagda-drag ang mga tao sa isang room para i-book ito at nagda-drag ng booking para ilipat ito, at isang booking lang ang puwede sa isang room sa iisang oras. Gamit ang FullCalendar 7 at ang Premium resource timeline nito:
Gamit ang Needless UI scheduler:
Dalawang bagay ang magkaiba. Ang FullCalendar mismo ang naglilipat ng booking, at kinokopya ng app ang pagbabago; iniuulat lang ito ng Needless UI scheduler, at nananatili ito kapag in-update mo ang events, kaya ang data mo pa rin ang nag-iisang source. At plain code ang allow, na tinatanong bago ang bawat pagbabago mula sa pointer o keyboard, kaya ikaw ang makakapag-test ng patakaran. Binubuo ng gabay sa booking calendar ang app na ito nang hakbang-hakbang.
Pag-convert ng data
| FullCalendar | Needless UI |
|---|---|
Ang end ng all-day event ay ang araw pagkatapos ng event | Ang end ng all-day event ay ang huling araw nito: magbawas ng isang araw |
Puwedeng magtapos ang mga oras sa Z o sa offset gaya ng +02:00 | Mga lokal na oras na walang offset, gaya ng 2026-11-02T09:30 |
Mga araw ng linggo mula 0 (Linggo) hanggang 6, sa businessHours at firstDay | Mga araw ng linggo mula 1 (Lunes) hanggang 7 (Linggo) |
Mga duration bilang string, gaya ng '00:30' | Mga numero: minuto o oras |
| Naka-sort ang mga resource ayon sa id, tapos sa title | Nasa pagkakasunod-sunod ng array ang mga resource |
rrule bilang object, at exrule | Isang RFC 5545 string, gaya ng FREQ=WEEKLY;BYDAY=MO,FR, at exdate |
Isang time zone gaya ng America/New_York | I-convert muna ang mga oras. Kino-convert ng nuiSchedulerFromIcs(text, { timeZone }) ang mga .ics file habang binabasa ang mga ito. |
Kung kailangan mo ang wala pa
Kung umaasa ang app mo sa mga time zone, naka-group na resource, external drag and drop o pag-print, hindi pa kayang palitan ng scheduler ang FullCalendar. Magbukas ng issue para sa kailangan mo. Para sa lahat ng iba pa, nasa page ng scheduler ang bawat input, output at example.