Tích hợp lịch lên website

 Mục đích Hiển thị lịch động cho toàn hệ thống ChoiXanhCMS dựa trên FullCalendar 6 , hỗ trợ RRULE cho sự kiện lặp. Cảnh báo kỹ thuật Các tùy chọn sau chỉ dành cho người có hiểu biết về API / JSON:

• Thay đổi endpoint API (linkmaster, linktoday, linkweek, linkunconfigured)
• Thay đổi bảng màu trong hàm khởi tạo (eventTypes, textcolorTypes)
• Thay đổi cấu trúc JSON từ API nguồn

Nếu khai báo sai URL hoặc sai key màu → Calendar có thể KHÔNG khởi tạo được hoặc không hiển thị sự kiện. 1) Gọi hàm khởi tạo (chuẩn)

Dán đoạn sau xuống cuối trang (sau ):

Copy $(function () { initChoiXanhCalendar({ cssSelector: '#calendar', initialView: 'dayGridMonth' });}); Đây là ví dụ rút gọn nhất để chạy được lịch. 2) Bật danh sách 'Hôm nay / Trong tuần' (tách riêng)

Nếu muốn có thêm 2 cột sự kiện phụ:

Copy Đặt đúng class (.dailycalendar, .weekycalendar) thì lịch sẽ tự đổ dữ liệu từ linktoday và linkweek. 3) Endpoint dữ liệu (tách riêng)

Mặc định hệ thống dùng các endpoint sau:

Endpoint chuẩn /ww2/module.calendar.ashx?check=all (lịch đã cấu hình) /ww2/module.calendar.ashx?check=full (toàn bộ, kể cả cũ) /ww2/module.calendar.ashx?check=unconfigured (chưa cấu hình) /ww2/module.calendar.ashx?check=today /ww2/module.calendar.ashx?check=week /ww2/module.tintuc.chitiet.ashx?check=detail Tham số lọc phạm vi batdau=YYYY-MM-DDTHH:mm ketthuc=YYYY-MM-DDTHH:mm JS sẽ tự gọi theo khoảng thời gian của view. Lưu ý: module.calendar.ashx lấy bài Active và có 'Thời gian sự kiện bắt đầu'. Muốn loại 1 bài khỏi lịch → xóa trường 'Thời gian sự kiện bắt đầu'. Không tự ý đổi endpoint nếu không hiểu cấu trúc JSON trả về. 4) Cấu trúc JSON & Ánh xạ thuộc tính

API có thể trả về dạng:

• { data: [ { ... } ] }
• [ { ... } ] (mảng thuần)

Trường JSON	Mô tả	Sử dụng
id	Định danh sự kiện	event.id
tieude	Tiêu đề	event.title
sukienbatdau	ISO/SQL datetime	start
sukienketthuc	ISO/SQL datetime	end
quytacvonglap	Mã vòng lặp (0-8)	RRULE
url	Đường dẫn bài chi tiết	Nút 'Xem chi tiết'
type	Loại sự kiện (type1..type90)	Màu nền / chữ & Filter
noidungtomtat	Tóm tắt	List phụ
hinhdaidien	Ảnh	Tùy biến render

Bảng quy tắc lặp (quytacvonglap → RRULE):

1. 0 Không lặp
2. 1 Lặp hàng tuần
3. 2 Lặp hàng tháng (cố định ngày)
4. 3 Lặp theo quý
5. 4 Lặp hàng năm
6. 5 Thứ X đầu tháng
7. 6 Thứ X cuối tháng
8. 7 Ngày cố định mỗi tháng
9. 8 Ngày cuối cùng của tháng

5) Màu sắc & Filter theo type (tùy chọn)

Nếu bạn muốn thay bảng màu mặc định của hệ thống, hãy cấu hình ngay trong hàm khởi tạo:

Copy $(function () { initChoiXanhCalendar({ cssSelector: '#calendar', initialView: 'dayGridMonth', eventTypes: { type1: '#0d6efd', type2: '#198754', type3: '#ffc107' }, textcolorTypes: { type1: '#ffffff', type2: '#ffffff', type3: '#000000' } });}); CẢNH BÁO: Key phải dùng dạng type1, type2, ..., type90. Nếu đặt tên khác (vd: meeting, holiday) thì filter và màu sẽ KHÔNG hiển thị đúng. Nếu không khai báo gì → hệ thống tự dùng bảng màu nội bộ. Tóm tắt nhanh

• 1 Thêm
• 2 Gọi initChoiXanhCalendar({...})
• 3 Đảm bảo bài Active + có 'Thời gian sự kiện bắt đầu'
• 4 Muốn ẩn khỏi lịch → xóa trường thời gian

Option hay dùng: editEvent: false - chỉ xem initialView: 'timeGridWeek' - mở dạng tuần slotMinTime / slotMaxTime - giới hạn giờ renderToday: true - hiển thị 'hôm nay / tuần này' Hộp code tích hợp vào HTML (sau footer)

Chọn 1 trong các mẫu dưới đây & dán vào cuối trang.

Mẫu 1: Lịch công ty Copy Mẫu 2: Lịch công giáo / phụng vụ Copy Mẫu 3: Lịch giao việc Copy Mẫu 4: Lịch công tác Copy FAQ — Lỗi thường gặp

1. Không thấy sự kiện? Kiểm tra bài đã Active và đã nhập 'Thời gian sự kiện bắt đầu'.
2. Đổi endpoint xong không thấy gì? Kiểm tra endpoint mới có trả đúng JSON như mô tả ở mục 4 chưa.
3. Màu không đúng? Kiểm tra lại key có dùng typeN không.
4. Muốn chỉ xem? editEvent: false.