Giao diện
Cấu hình
Calendar collection template
Plugin hoạt động tốt nhất với collection sử dụng calendar template — bổ sung các field cho sự kiện lặp lại:
| Field | Kiểu | Mô tả |
|---|---|---|
cron | string | Cron expression cho sự kiện lặp lại |
exclude | JSON | Mảng ngày bị loại trừ khỏi lịch lặp |
Cron repeats (sự kiện lặp)
Khi record có field cron, plugin dùng cron-parser để tạo các occurrence trong khoảng thời gian đang hiển thị:
- VD:
cron = "0 9 * * 1"→ sự kiện lặp mỗi thứ Hai lúc 9:00. - Plugin tạo các event ảo từ cron expression, hiển thị trên lịch.
- Cron editor UI (
react-js-cron) giúp admin cấu hình trực quan, không cần nhớ cú pháp.
Exclude dates
Mảng ngày bị loại trừ — dùng khi sự kiện lặp nhưng cần bỏ một số ngày cụ thể:
- VD: Lịch họp hàng tuần, nhưng tuần lễ Tết bỏ qua.
- Exclude lưu dạng JSON array:
["2026-02-16", "2026-02-17"].
Association calendar
Calendar block có thể hiển thị cho association data:
- Tạo Calendar block trong popup association.
- Block hiển thị events từ association collection thay vì collection chính.
- Cấu hình field mapping tương tự calendar thường.
Extensibility
Plugin cho phép mở rộng các field interface được sử dụng cho calendar:
titleFieldInterfaces
Danh sách field interface hợp lệ cho title field — mặc định bao gồm input, textarea, và các field text-based. Plugin khác có thể đăng ký thêm interface.
colorFieldInterfaces
Danh sách field interface hợp lệ cho color field — mặc định: select, radioGroup. Mỗi option cần có thuộc tính color để xác định màu event.
dateTimeFieldInterfaces
Danh sách field interface hợp lệ cho date fields (start/end) — mặc định: datetime, date, createdAt, updatedAt.
Cấu hình nâng cao
| Setting | Mô tả | Mặc định |
|---|---|---|
| Default view | Chế độ xem khi mở trang | Month |
| Show lunar | Hiển thị ngày âm lịch | false |
| First day of week | Ngày đầu tuần | Thứ Hai |
| Popup mode | Modal hoặc Drawer khi click event | Modal |
Thư viện sử dụng
| Thư viện | Vai trò |
|---|---|
react-big-calendar | Render giao diện lịch chính |
dayjs | Xử lý ngày tháng, timezone |
cron-parser | Parse cron expression tạo occurrences |
react-js-cron | UI editor cho cron expression |
solarlunar-es | Chuyển đổi dương lịch ↔ âm lịch |