FullCalendar’ın kaynak zaman çizelgesi ve kaynak sütunları Premium sürümün parçasıdır: ticari bir uygulama için ücretli bir lisans anahtarı gerekir. Lisans sayfası, ücretsiz seçenekleri de listeler: tamamen AGPL olan uygulamalar ve kayıtlı kâr amacı gütmeyen kuruluşlar için. Needless UI planlayıcısı ise ikisini de MIT lisansıyla, yinelenen etkinlikler ve iCalendar dosyalarıyla birlikte sunar. Bu kılavuz bir Angular uygulamasını birinden diğerine taşımayı anlatır: neyin olduğu gibi geçtiği, neyin geçmediği ve dönüştürülmesi gereken veriler.
Kılavuz FullCalendar 7’deki adları kullanır; farklı olduklarında 6. sürümdeki adlar köşeli parantez içinde verilir. FullCalendar’ın Angular bağlayıcısı Angular 16 ile 22 arasını destekler; Needless UI ise Angular 22 gerektirir.
Neler elde edersiniz
| Özellik | FullCalendar | Needless UI |
|---|---|---|
| Kaynak zaman çizelgesi: her oda ya da kişi için bir satır | Premium | Var: bir gün, bir hafta ya da bir ay |
| Gün ve hafta görünümlerinde sütun olarak kaynaklar | Premium | Var |
| Ay, hafta ve gün görünümleri | Ücretsiz | Var |
| Sürükleyerek taşıma ve yeniden boyutlandırma | Ücretsiz; başka bir kaynağa taşımak için Premium | Var, başka kaynaklara da. Yeniden boyutlandırma bitişten yapılır, başlangıçtan yapılmaz. |
| Etkinlik oluşturmak için zaman seçme | Ücretsiz | Var: işaretçiyle, uzun basarak ya da klavyeyle |
| Çakışma olmaması gibi kurallar | Ücretsiz: çakışma ve kısıt seçenekleri | Var: her değişiklikten önce sorulan tek bir allow fonksiyonu |
| Etkinlikleri klavyeyle taşıma ve yeniden boyutlandırma | Erişilebilirlik belgelerinde yok; bu belgeler ARIA etiketlerini ve Tab ile odaklanmayı ele alır | Var; ekran okuyuculara da duyurulur |
| Yinelenen etkinlikler | Ücretsiz; rrule eklentisi ve kütüphanesiyle | Yerleşik: RFC 5545 kuralları; EXRULE, RDATE ve saatlik kurallar hariç |
| iCalendar (.ics) | Ücretsiz: bir takvim akışını okur | .ics dosyalarını okur ve yazar |
| Liste ve yıl görünümleri | Ücretsiz | Önümüzdeki günlerin ajandası; yıl görünümü yok |
| Saat dilimleri | Ücretsiz: yerel, UTC ya da adlandırılmış | Yok: aldığı saatleri olduğu gibi gösterir |
| Gruplanmış, iç içe ya da çok sütunlu kaynaklar | Premium | Yok: şablonunuzun çizdiği tek bir sütun |
| Dışarıdan sürükle-bırak, arka plan etkinlikleri | Ücretsiz | Yok |
| Yazdırma, sanal render | Premium | Yok |
| Framework’ler | Angular 16 ile 22 arası, React, Vue, düz JavaScript ve dahası | Angular 22 ve React 19 |
Neyin karşılığı ne
| FullCalendar | Needless UI planlayıcısı |
|---|---|
<full-calendar [options]>, plugins, schedulerLicenseKey | <nui-scheduler>, her seçenek için bir girdiyle; eklenti de anahtar da yok |
initialView: 'resourceTimelineDay' | view="timeline", bir hafta ya da bir ay için de timelineSpan |
initialView: 'timeGridWeek' | view="week"; [(view)] iki yönlüdür |
resources, events | [resources], [events] |
resourceId, extendedProps | resource, data |
editable, selectable | editable, selectable |
select | (slotSelect): { start, end, allDay, resource } |
eventDrop, eventResize | (eventChange): siz events değerini güncelleyene kadar hiçbir şey yerinden oynamaz |
eventClick | (eventClick) |
eventOverlap, selectOverlap, eventAllow | [allow]: taşıma, yeniden boyutlandırma ve seçimler için tek bir fonksiyon |
slotDuration, snapDuration | slotMinutes, snapMinutes, dakika cinsinden |
slotMinTime, slotMaxTime, scrollTime | dayStart, dayEnd, scrollHour, saat cinsinden |
businessHours | [businessHours], hafta günleri 1 (pazartesi) ile 7 arasında |
datesSet | (rangeChange) |
eventContent, resourceCellContent [resourceLabelContent] | nuiSchedulerEvent ve nuiSchedulerResource şablonları |
locale, firstDay | locale (herhangi bir BCP 47 etiketi), 1 ile 7 arasında firstDay ve metinleri için labels |
Oda rezervasyonu zaman çizelgesi, iki kütüphaneyle
Odalar kaynak, rezervasyonlar etkinliktir. Kullanıcılar bir odayı rezerve etmek için satırı boyunca sürükler, taşımak için de rezervasyonu sürükler; bir odada aynı anda tek bir rezervasyon olabilir. FullCalendar 7 ve Premium kaynak zaman çizelgesiyle:
Needless UI planlayıcısıyla:
İki şey farklı çalışır. FullCalendar rezervasyonu kendisi taşır, uygulama da değişikliği kendi kopyasına işler; Needless UI planlayıcısı ise değişikliği yalnızca bildirir ve events güncellendiğinde değişiklik kalıcı olur, böylece tek doğruluk kaynağı verileriniz olarak kalır. Ayrıca allow düz bir koddur ve işaretçiden ya da klavyeden gelen her değişiklikten önce sorulur; bu yüzden kuralı kendiniz test edebilirsiniz. Rezervasyon takvimi kılavuzu bu uygulamayı adım adım oluşturur.
Verileri dönüştürme
| FullCalendar | Needless UI |
|---|---|
Tüm gün süren bir etkinliğin end değeri, etkinlikten sonraki gündür | Tüm gün süren bir etkinliğin end değeri, son günüdür: bir gün çıkarın |
Zamanlar Z ya da +02:00 gibi bir saat farkıyla bitebilir | Saat farkı içermeyen yerel saatler, örneğin 2026-11-02T09:30 |
businessHours ve firstDay içinde hafta günleri 0 (pazar) ile 6 arasındadır | Hafta günleri 1 (pazartesi) ile 7 (pazar) arasındadır |
Süreler metin olarak verilir, örneğin '00:30' | Sayılar: dakika ya da saat |
| Kaynaklar id’ye, sonra başlığa göre sıralanır | Kaynaklar dizideki sırayla gelir |
Nesne olarak rrule ve exrule | FREQ=WEEKLY;BYDAY=MO,FR gibi bir RFC 5545 dizesi ve exdate |
America/New_York gibi bir saat dilimi | Önce zamanları dönüştürün. nuiSchedulerFromIcs(text, { timeZone }), .ics dosyalarını okurken dönüştürür. |
Eksik olan bir şeye ihtiyacınız varsa
Uygulamanız saat dilimlerine, gruplanmış kaynaklara, dışarıdan sürükle-bırakmaya ya da yazdırmaya dayanıyorsa planlayıcı henüz FullCalendar’ın yerini tutamaz. İhtiyacınız olan şey için bir issue açın. Geri kalan her şey için planlayıcının sayfasında tüm girdiler, çıktılar ve örnekler yer alır.