الخط الزمني للموارد وأعمدة الموارد في FullCalendar من ميزات Premium: فالتطبيق التجاري يحتاج إلى مفتاح ترخيص مدفوع. وتسرد صفحة الترخيص الخاصة به الخيارات المجانية، للتطبيقات التي تكون كلها برخصة AGPL وللمؤسسات غير الربحية المسجّلة. أما مُجدوِل Needless UI فيقدّم الاثنين برخصة MIT، مع الأحداث المتكررة وملفات iCalendar. ويشرح هذا الدليل نقل تطبيق Angular من أحدهما إلى الآخر: ما ينتقل كما هو، وما لا ينتقل، والبيانات التي يجب تحويلها.
يستخدم الدليل أسماء FullCalendar 7، ويضع أسماء الإصدار 6 بين قوسين معقوفين حيث تختلف. ويدعم موصّل FullCalendar لـ Angular الإصدارات من Angular 16 إلى 22؛ أما Needless UI فتتطلب Angular 22.
ما الذي تحصل عليه
| الميزة | FullCalendar | Needless UI |
|---|---|---|
| خط زمني للموارد: صف لكل قاعة أو شخص | Premium | نعم: يوم أو أسبوع أو شهر |
| الموارد على هيئة أعمدة في عرضَي اليوم والأسبوع | Premium | نعم |
| عروض الشهر والأسبوع واليوم | مجاني | نعم |
| السحب لنقل الأحداث وتغيير مدتها | مجاني؛ والنقل إلى مورد آخر مع Premium | نعم، وإلى موارد أخرى أيضًا. وتتغير المدة من النهاية، لا من البداية. |
| اختيار وقت لإنشاء حدث | مجاني | نعم، بالمؤشر أو بالضغط المطوّل أو بلوحة المفاتيح |
| قواعد مثل منع التداخل | مجاني: خيارات للتداخل والقيود | نعم: دالة allow واحدة تُسأل قبل كل تغيير |
| نقل الأحداث وتغيير مدتها من لوحة المفاتيح | غير مذكور في توثيق إمكانية الوصول الخاص به، الذي يتناول تسميات ARIA والتركيز بمفتاح Tab | نعم، مع الإعلان عن ذلك لقارئات الشاشة |
| الأحداث المتكررة | مجاني، مع إضافة rrule ومكتبتها | مدمجة: قواعد RFC 5545، دون EXRULE وRDATE والقواعد التي تتكرر بالساعة |
| iCalendar (.ics) | مجاني: يقرأ موجزًا (feed) | يقرأ ملفات .ics ويكتبها |
| عروض القائمة والسنة | مجاني | جدول أعمال للأيام القادمة؛ ولا عروض للسنة |
| المناطق الزمنية | مجاني: المحلية أو UTC أو منطقة مسمّاة | لا: يعرض الأوقات كما تصله |
| موارد مجمّعة أو متداخلة أو متعددة الأعمدة | Premium | لا: عمود واحد يرسمه قالبك |
| السحب والإفلات من خارج التقويم، وأحداث الخلفية | مجاني | لا |
| الطباعة، والعرض الافتراضي (virtual rendering) | Premium | لا |
| أطر العمل | من Angular 16 إلى 22، وReact، وVue، وJavaScript الخالص، وغيرها | Angular 22 وReact 19 |
ما يقابل كل خيار
| FullCalendar | مُجدوِل Needless UI |
|---|---|
<full-calendar [options]>, plugins, schedulerLicenseKey | <nui-scheduler>، مع مُدخَل لكل خيار؛ دون إضافات ودون مفتاح |
initialView: 'resourceTimelineDay' | view="timeline"، وtimelineSpan لأسبوع أو شهر |
initialView: 'timeGridWeek' | view="week"؛ و[(view)] ثنائي الاتجاه |
resources, events | [resources], [events] |
resourceId, extendedProps | resource, data |
editable, selectable | editable, selectable |
select | (slotSelect): { start, end, allDay, resource } |
eventDrop, eventResize | (eventChange): لا يتحرك شيء حتى تُحدّث events |
eventClick | (eventClick) |
eventOverlap, selectOverlap, eventAllow | [allow]: دالة واحدة لعمليات النقل وتغيير المدة والاختيار |
slotDuration, snapDuration | slotMinutes، snapMinutes، بالدقائق |
slotMinTime, slotMaxTime, scrollTime | dayStart، dayEnd، scrollHour، بالساعات |
businessHours | [businessHours]، وأيام الأسبوع فيه من 1 (الاثنين) إلى 7 |
datesSet | (rangeChange) |
eventContent, resourceCellContent [resourceLabelContent] | القالبان nuiSchedulerEvent وnuiSchedulerResource |
locale, firstDay | locale (أي وسم لغة وفق BCP 47)، وfirstDay من 1 إلى 7، وlabels لنصوصه |
خط زمني لحجز القاعات، بالطريقتين
القاعات موارد، والحجوزات أحداث. يسحب الناس عبر قاعة لحجزها، ويسحبون الحجز لنقله، ولا تتسع القاعة إلا لحجز واحد في الوقت نفسه. مع FullCalendar 7 وخطه الزمني للموارد من Premium:
ومع مُجدوِل Needless UI:
يختلف أمران. ينقل FullCalendar الحجز بنفسه، ثم ينسخ التطبيق التغيير؛ أما مُجدوِل Needless UI فيُبلغ عنه فقط، وتحديث events هو ما يُبقيه، فتظل بياناتك المصدر الوحيد. كما أن allow شيفرة عادية تُسأل قبل كل تغيير بالمؤشر أو بلوحة المفاتيح، لذا فالقاعدة بين يديك لتختبرها. ويبني دليل حجز القاعات هذا التطبيق خطوة بخطوة.
تحويل البيانات
| FullCalendar | Needless UI |
|---|---|
قيمة end في الحدث الذي يستغرق اليوم كله هي اليوم التالي له | قيمة end في الحدث الذي يستغرق اليوم كله هي يومه الأخير: اطرح يومًا |
قد تنتهي الأوقات بـ Z أو بفارق توقيت مثل +02:00 | أوقات محلية دون فارق توقيت، مثل 2026-11-02T09:30 |
أيام الأسبوع من 0 (الأحد) إلى 6، في businessHours وfirstDay | أيام الأسبوع من 1 (الاثنين) إلى 7 (الأحد) |
المدد نصوص، مثل '00:30' | أرقام: دقائق أو ساعات |
| الموارد مرتبة حسب المعرّف ثم العنوان | الموارد بترتيبها في المصفوفة |
rrule على هيئة كائن، وexrule | نص وفق RFC 5545، مثل FREQ=WEEKLY;BYDAY=MO,FR، وexdate |
منطقة زمنية مثل America/New_York | حوّل الأوقات أولًا. وتحوّل nuiSchedulerFromIcs(text, { timeZone }) ملفات .ics أثناء قراءتها. |
إن احتجت إلى ما ينقصه
إذا كان تطبيقك يعتمد على المناطق الزمنية أو الموارد المجمّعة أو السحب والإفلات من الخارج أو الطباعة، فلا يمكن للمُجدوِل أن يحل محل FullCalendar بعد. افتح بلاغًا (issue) بما تحتاج إليه. ولكل ما عدا ذلك، تضم صفحة المُجدوِل كل مُدخَل ومُخرَج ومثال.