Cấu hình

Custom SVG implementation

Plugin không sử dụng thư viện Gantt có sẵn (như dhtmlx-gantt) mà tự render hoàn toàn bằng SVG:

Component	Mô tả
CalendarHeader	SVG header hiển thị scale thời gian (giờ/ngày/tuần/tháng/năm)
GanttBar	Thanh SVG đại diện một task, hỗ trợ drag
GanttBarProgress	Phần progress bên trong bar (phần trăm hoàn thành)
GridRow	Hàng trong grid panel bên trái
TodayLine	Đường dọc đánh dấu ngày hiện tại
Arrow	Mũi tên dependency giữa các task

Ưu điểm: không có dependency nặng, toàn quyền kiểm soát rendering, bundle size nhỏ.

Drag reschedule

Khi user kéo thanh task:

1. onMouseDown → bắt đầu tracking vị trí chuột.
2. onMouseMove → tính toán ngày mới dựa trên pixel offset, hiển thị preview.
3. onMouseUp → gọi onDateChange(task, newStart, newEnd).
4. Plugin gửi PATCH request cập nhật start/end date trên server.
5. Bar di chuyển đến vị trí cuối cùng.

Resize (kéo cạnh) cũng hoạt động tương tự — chỉ thay đổi một đầu của bar.

Grid panel (bảng bên trái)

Grid hiển thị danh sách task dạng bảng:

• Cột có thể resize bằng kéo border.
• Hỗ trợ sort theo cột.
• Click vào task name → mở popup chi tiết.

Calendar header

Header SVG hiển thị thang thời gian, thay đổi theo view mode:

ViewMode	Header trên	Header dưới
Day	Tháng/Năm	Ngày
Week	Tháng/Năm	Tuần (Week 1, 2...)
Month	Năm	Tháng

Cấu hình block

Setting	Mô tả	Mặc định
Start field	Field ngày bắt đầu	startDate
End field	Field ngày kết thúc	endDate
Progress field	Field phần trăm hoàn thành	progress
Title field	Field tên task	title
Default view	Chế độ xem mặc định	Day
Row height	Chiều cao mỗi hàng (px)	40

Task items

Mỗi task trên Gantt bao gồm:

• Bar: Thanh ngang thể hiện duration (start → end).
• Progress overlay: Phần tô màu bên trong bar thể hiện % hoàn thành.
• Label: Tên task hiển thị bên trong hoặc bên cạnh bar.
• Tooltip: Thông tin chi tiết khi hover.