Chuyển từ FullCalendar sang bộ lập lịch Angular miễn phí

Timeline tài nguyên và chế độ xem chia cột theo tài nguyên của FullCalendar thuộc bản Premium: ứng dụng thương mại cần một khóa giấy phép trả phí. Trang giấy phép của FullCalendar có liệt kê các trường hợp được dùng miễn phí: ứng dụng hoàn toàn theo AGPL và tổ chức phi lợi nhuận đã đăng ký. Bộ lập lịch của Needless UI có cả hai tính năng này theo giấy phép MIT, kèm sự kiện lặp lại và tệp iCalendar. Hướng dẫn này giúp bạn chuyển một ứng dụng Angular từ FullCalendar sang Needless UI: những gì mang theo được, những gì không, và dữ liệu cần chuyển đổi.

Hướng dẫn này dùng tên gọi của FullCalendar 7, và ghi tên của phiên bản 6 trong ngoặc vuông ở những chỗ hai phiên bản khác nhau. Gói tích hợp Angular của FullCalendar hỗ trợ Angular 16 đến 22; Needless UI cần Angular 22.

Bạn nhận được gì

FullCalendar và bộ lập lịch của Needless UI
Tính năng	FullCalendar	Needless UI
Timeline tài nguyên: mỗi phòng hoặc mỗi người một dòng	Premium	Có: một ngày, một tuần hoặc một tháng
Tài nguyên dạng cột trong chế độ xem ngày và tuần	Premium	Có
Chế độ xem tháng, tuần và ngày	Miễn phí	Có
Kéo để di chuyển và đổi độ dài	Miễn phí; kéo sang tài nguyên khác thì cần Premium	Có, kể cả sang tài nguyên khác. Kéo điểm kết thúc để đổi độ dài; điểm bắt đầu thì không.
Chọn thời gian để tạo sự kiện	Miễn phí	Có, bằng con trỏ, nhấn giữ hoặc bàn phím
Quy tắc như không cho trùng giờ	Miễn phí: tùy chọn overlap và constraint	Có: một hàm `allow`, được hỏi trước mọi thay đổi
Di chuyển và đổi độ dài sự kiện bằng bàn phím	Không có trong tài liệu về khả năng tiếp cận của FullCalendar, vốn chỉ nói về nhãn ARIA và focus bằng Tab	Có, kèm thông báo cho trình đọc màn hình
Sự kiện lặp lại	Miễn phí, cần plugin và thư viện rrule	Tích hợp sẵn: quy tắc RFC 5545, trừ EXRULE, RDATE và quy tắc lặp theo giờ
iCalendar (.ics)	Miễn phí: đọc nguồn cấp lịch	Đọc và ghi tệp .ics
Chế độ xem danh sách và xem năm	Miễn phí	Lịch biểu cho những ngày sắp tới; không có chế độ xem năm
Múi giờ	Miễn phí: giờ địa phương, UTC hoặc múi giờ có tên	Không: hiển thị đúng giờ nhận được
Tài nguyên theo nhóm, lồng nhau hoặc nhiều cột	Premium	Không: một cột, do template của bạn vẽ
Kéo thả từ bên ngoài, sự kiện nền	Miễn phí	Không
In, render ảo	Premium	Không
Framework	Angular 16 đến 22, React, Vue, JavaScript thuần và nhiều hơn nữa	Angular 22 và React 19

Đối chiếu tùy chọn

Tùy chọn của FullCalendar và phần tương ứng trong Needless UI
FullCalendar	Bộ lập lịch Needless UI
`<full-calendar [options]>`, `plugins`, `schedulerLicenseKey`	`<nui-scheduler>`, mỗi tùy chọn là một input; không có plugin và không cần khóa
`initialView: 'resourceTimelineDay'`	`view="timeline"`, thêm `timelineSpan` để xem một tuần hoặc một tháng
`initialView: 'timeGridWeek'`	`view="week"`; `[(view)]` là liên kết hai chiều
`resources`, `events`	`[resources]`, `[events]`
`resourceId`, `extendedProps`	`resource`, `data`
`editable`, `selectable`	`editable`, `selectable`
`select`	`(slotSelect)`: `{ start, end, allDay, resource }`
`eventDrop`, `eventResize`	`(eventChange)`: không có gì di chuyển cho đến khi bạn cập nhật `events`
`eventClick`	`(eventClick)`
`eventOverlap`, `selectOverlap`, `eventAllow`	`[allow]`: một hàm cho cả di chuyển, đổi độ dài và chọn thời gian
`slotDuration`, `snapDuration`	`slotMinutes`, `snapMinutes`, tính bằng phút
`slotMinTime`, `slotMaxTime`, `scrollTime`	`dayStart`, `dayEnd`, `scrollHour`, tính bằng giờ
`businessHours`	`[businessHours]`, với các ngày trong tuần từ 1 (thứ Hai) đến 7
`datesSet`	`(rangeChange)`
`eventContent`, `resourceCellContent` [`resourceLabelContent`]	Template `nuiSchedulerEvent` và `nuiSchedulerResource`
`locale`, `firstDay`	`locale` (mọi thẻ BCP 47), `firstDay` từ 1 đến 7, và `labels` cho câu chữ của nó

Timeline đặt phòng họp, viết theo cả hai cách

Phòng là tài nguyên, còn lượt đặt chỗ là sự kiện. Người dùng kéo qua một phòng để đặt phòng đó, kéo một lượt đặt chỗ để di chuyển nó, và mỗi phòng chỉ nhận một lượt đặt chỗ tại một thời điểm. Với FullCalendar 7 và timeline tài nguyên Premium của nó:

fullcalendar-bookings.ts

Với bộ lập lịch của Needless UI:

booking.ts

booking.html

Có hai điểm hoạt động khác nhau. FullCalendar tự di chuyển lượt đặt chỗ, rồi ứng dụng chép lại thay đổi đó; bộ lập lịch của Needless UI chỉ báo lại thay đổi, và thay đổi chỉ được giữ khi bạn cập nhật events, nên dữ liệu của bạn luôn là nguồn duy nhất. Ngoài ra, allow chỉ là code thông thường, được hỏi trước mọi thay đổi dù đến từ con trỏ hay bàn phím, nên bạn tự kiểm thử được quy tắc này. Hướng dẫn lịch đặt phòng họp xây dựng ứng dụng này từng bước một.

Chuyển đổi dữ liệu

Dữ liệu của FullCalendar và định dạng mà bộ lập lịch cần
FullCalendar	Needless UI
`end` của sự kiện cả ngày là ngày sau khi sự kiện kết thúc	`end` của sự kiện cả ngày là ngày cuối cùng của nó: hãy trừ đi một ngày
Thời gian có thể kết thúc bằng `Z` hoặc độ lệch múi giờ như `+02:00`	Thời gian không kèm độ lệch múi giờ, chẳng hạn `2026-11-02T09:30`
Ngày trong tuần từ 0 (Chủ nhật) đến 6, trong `businessHours` và `firstDay`	Ngày trong tuần từ 1 (thứ Hai) đến 7 (Chủ nhật)
Thời lượng ở dạng chuỗi, chẳng hạn `'00:30'`	Dạng số: số phút hoặc số giờ
Tài nguyên được sắp xếp theo id, rồi theo tiêu đề	Tài nguyên giữ đúng thứ tự trong mảng
`rrule` dạng đối tượng, và `exrule`	Chuỗi RFC 5545, chẳng hạn `FREQ=WEEKLY;BYDAY=MO,FR`, và `exdate`
Múi giờ như `America/New_York`	Hãy chuyển đổi thời gian trước. `nuiSchedulerFromIcs(text, { timeZone })` chuyển đổi tệp .ics ngay khi đọc.

Nếu bạn cần những gì còn thiếu

Nếu ứng dụng của bạn phụ thuộc vào múi giờ, tài nguyên theo nhóm, kéo thả từ bên ngoài hoặc tính năng in, bộ lập lịch chưa thể thay thế FullCalendar. Hãy mở một issue cho tính năng bạn cần. Với mọi thứ khác, trang của bộ lập lịch có đủ mọi input, output và ví dụ.