ไทม์ไลน์ทรัพยากรและคอลัมน์ทรัพยากรของ FullCalendar อยู่ในรุ่น Premium แอปเชิงพาณิชย์จึงต้องใช้ license key ที่ต้องซื้อ หน้าสัญญาอนุญาตของ FullCalendar ระบุทางเลือกที่ใช้ได้ฟรีไว้ สำหรับแอปที่เป็น AGPL ทั้งหมด และสำหรับองค์กรไม่แสวงหากำไรที่จดทะเบียนแล้ว ส่วน Scheduler ของ Needless UI มีทั้งสองอย่างภายใต้สัญญาอนุญาต MIT พร้อมกิจกรรมที่เกิดซ้ำและไฟล์ iCalendar คู่มือนี้จะพาย้ายแอป Angular จากตัวหนึ่งไปอีกตัว ทั้งสิ่งที่ย้ายมาได้เลย สิ่งที่ย้ายมาไม่ได้ และข้อมูลที่ต้องแปลง
คู่มือนี้ใช้ชื่อตาม FullCalendar 7 และใส่ชื่อในเวอร์ชัน 6 ไว้ในวงเล็บเหลี่ยมเมื่อชื่อต่างกัน ตัวเชื่อมต่อ Angular ของ FullCalendar รองรับ Angular 16 ถึง 22 ส่วน Needless UI ต้องใช้ Angular 22
สิ่งที่คุณจะได้
| ฟีเจอร์ | FullCalendar | Needless UI |
|---|---|---|
| ไทม์ไลน์ทรัพยากรที่มีแถวสำหรับแต่ละห้องหรือแต่ละคน | Premium | มี แสดงได้ทั้งหนึ่งวัน หนึ่งสัปดาห์ หรือหนึ่งเดือน |
| ทรัพยากรเป็นคอลัมน์ในมุมมองวันและสัปดาห์ | Premium | มี |
| มุมมองเดือน สัปดาห์ และวัน | ฟรี | มี |
| ลากเพื่อย้ายและปรับขนาด | ฟรี แต่การลากไปยังทรัพยากรอื่นต้องใช้ Premium | มี และลากไปยังทรัพยากรอื่นได้ด้วย ปรับขนาดได้จากปลาย แต่ปรับจากจุดเริ่มต้นไม่ได้ |
| เลือกช่วงเวลาเพื่อสร้างกิจกรรม | ฟรี | มี ใช้ได้ทั้งตัวชี้ การกดค้าง และคีย์บอร์ด |
| กฎต่าง ๆ เช่น ห้ามเวลาซ้อนกัน | ฟรี ผ่านตัวเลือกเรื่องการซ้อนทับและข้อจำกัด | มี ผ่านฟังก์ชัน allow ฟังก์ชันเดียว ซึ่งจะถูกถามก่อนทุกการเปลี่ยนแปลง |
| ย้ายและปรับขนาดกิจกรรมด้วยคีย์บอร์ด | ไม่มีในเอกสารด้านการเข้าถึง ซึ่งพูดถึงป้ายกำกับ ARIA และการโฟกัสด้วย Tab | มี และประกาศให้โปรแกรมอ่านหน้าจอทราบ |
| กิจกรรมที่เกิดซ้ำ | ฟรี โดยใช้ปลั๊กอินและไลบรารี rrule | มีในตัว ใช้กฎตาม RFC 5545 ยกเว้น EXRULE RDATE และกฎรายชั่วโมง |
| iCalendar (.ics) | ฟรี อ่านฟีดได้ | อ่านและเขียนไฟล์ .ics ได้ |
| มุมมองรายการและมุมมองปี | ฟรี | มีกำหนดการของวันข้างหน้า แต่ไม่มีมุมมองปี |
| เขตเวลา | ฟรี ทั้งเวลาท้องถิ่น UTC และเขตเวลาตามชื่อ | ไม่มี แสดงเวลาตามที่ได้รับมาโดยไม่แปลงเขตเวลา |
| ทรัพยากรแบบจัดกลุ่ม ซ้อนกัน หรือหลายคอลัมน์ | Premium | ไม่มี มีคอลัมน์เดียวที่วาดด้วยเทมเพลตของคุณ |
| การลากและวางจากภายนอก และกิจกรรมพื้นหลัง | ฟรี | ไม่มี |
| การสั่งพิมพ์ และการเรนเดอร์แบบ virtual | Premium | ไม่มี |
| เฟรมเวิร์ก | Angular 16 ถึง 22, React, Vue, JavaScript ธรรมดา และอื่น ๆ | Angular 22 และ React 19 |
อะไรตรงกับอะไร
| FullCalendar | Scheduler ของ Needless UI |
|---|---|
<full-calendar [options]> plugins และ schedulerLicenseKey | <nui-scheduler> ที่มี input สำหรับทุกตัวเลือก ไม่มีปลั๊กอินและไม่ต้องใช้ key |
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 สำหรับข้อความของ Scheduler |
ไทม์ไลน์จองห้องด้วยทั้งสองไลบรารี
ห้องคือทรัพยากร และการจองคือกิจกรรม ผู้ใช้ลากผ่านแถวของห้องเพื่อจอง และลากการจองเพื่อย้าย โดยแต่ละห้องรับการจองได้ครั้งละหนึ่งรายการ เมื่อใช้ FullCalendar 7 กับไทม์ไลน์ทรัพยากรรุ่น Premium จะเขียนได้ดังนี้
ส่วนเมื่อใช้ Scheduler ของ Needless UI จะเขียนได้ดังนี้
มีสองเรื่องที่ทำงานต่างกัน เรื่องแรก FullCalendar ย้ายการจองเอง แล้วแอปจึงคัดลอกการเปลี่ยนแปลงตามไป ส่วน Scheduler ของ Needless UI เพียงรายงานการเปลี่ยนแปลง และการอัปเดต events คือสิ่งที่ทำให้การเปลี่ยนแปลงนั้นคงอยู่ ข้อมูลของคุณจึงเป็นแหล่งข้อมูลจริงเพียงแหล่งเดียว เรื่องที่สอง allow เป็นโค้ดธรรมดาที่ถูกถามก่อนทุกการเปลี่ยนแปลงจากตัวชี้หรือคีย์บอร์ด คุณจึงทดสอบกฎนั้นได้เอง คู่มือสร้างปฏิทินจองห้องประชุมจะพาสร้างแอปนี้ทีละขั้นตอน
การแปลงข้อมูล
| FullCalendar | Needless UI |
|---|---|
ค่า end ของกิจกรรมทั้งวันคือวันถัดจากกิจกรรม | ค่า end ของกิจกรรมทั้งวันคือวันสุดท้ายของกิจกรรม จึงต้องลบออกหนึ่งวัน |
เวลาอาจลงท้ายด้วย Z หรือ offset เช่น +02:00 | เวลาตามนาฬิกาที่ไม่มี offset เช่น 2026-11-02T09:30 |
วันในสัปดาห์เริ่มจาก 0 (วันอาทิตย์) ถึง 6 ใน businessHours และ firstDay | วันในสัปดาห์เริ่มจาก 1 (วันจันทร์) ถึง 7 (วันอาทิตย์) |
ระยะเวลาเป็นสตริง เช่น '00:30' | ตัวเลขที่เป็นนาทีหรือชั่วโมง |
| ทรัพยากรเรียงตาม id แล้วจึงตามชื่อ | ทรัพยากรเรียงตามลำดับในอาร์เรย์ |
rrule ที่เป็นออบเจ็กต์ และ exrule | สตริงตาม RFC 5545 เช่น FREQ=WEEKLY;BYDAY=MO,FR และ exdate |
เขตเวลา เช่น America/New_York | แปลงเวลาก่อน ส่วน nuiSchedulerFromIcs(text, { timeZone }) จะแปลงไฟล์ .ics ให้ระหว่างอ่าน |
หากต้องการสิ่งที่ยังไม่มี
หากแอปของคุณต้องพึ่งเขตเวลา ทรัพยากรแบบจัดกลุ่ม การลากและวางจากภายนอก หรือการสั่งพิมพ์ Scheduler ยังใช้แทน FullCalendar ไม่ได้ในตอนนี้ เปิด issue เพื่อบอกสิ่งที่คุณต้องการ ส่วนเรื่องอื่นทั้งหมด หน้าของ Scheduler มีทุก input output และตัวอย่าง