gantt-canvas-chart 1.5.3 → 1.6.0

package/dist/index.cjs.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.5.3
+ * gantt-canvas-chart v1.6.0
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -146,6 +146,7 @@ class GanttChart {
   resizeObserver;
   taskPositions;
   taskMap;
+  holidaysMap;
   isLoadingData = false;
   hasMoreDataLeft = true;
   hasMoreDataRight = true;
@@ -194,9 +195,13 @@ class GanttChart {
       tooltipFormat: null,
       tooltipColor: "black",
       todayColor: "#ff4d4f",
+      weekendBgColor: "#f7f7f7",
+      holidays: [],
+      dateSeparator: "/",
       offsetTop: 0,
       offsetLeft: 0,
       scrollEdgeThresholds: 10,
+      xGap: 0,
       enabledLoadMore: [],
       viewFactors: { Day: 80, Week: 20, Month: 15, Year: 6 },
       planBorderColor: "#C1EFCF",
@@ -231,6 +236,7 @@ class GanttChart {
     this.totalHeight = 0;
     this.taskPositions = /* @__PURE__ */ new Map();
     this.taskMap = /* @__PURE__ */ new Map();
+    this.holidaysMap = /* @__PURE__ */ new Map();
     this.handleMouseMove = this.handleMouseMove.bind(this);
     this.handleMouseLeave = this.handleMouseLeave.bind(this);
     this.handleScroll = this.handleScroll.bind(this);
@@ -240,6 +246,9 @@ class GanttChart {
     this.init();
   }
   init() {
+    if (this.config.holidays.length > 0) {
+      this.buildHolidaysMap();
+    }
     this.buildTaskMap();
     this.updatePixelsPerDay();
     this.calculateFullTimeline();
@@ -288,10 +297,26 @@ class GanttChart {
       this.updatePixelsPerDay();
       this.calculateFullTimeline();
     }
+    if (this.config.holidays.length !== this.holidaysMap.size) {
+      this.buildHolidaysMap();
+    }
     this.updateLoadMoreConf();
     this.updateDimensions();
     this.render();
   }
+  buildHolidaysMap() {
+    this.holidaysMap.clear();
+    const separator = this.config.dateSeparator;
+    if (this.config.holidays && this.config.holidays.length > 0 && this.config.holidays[0].includes(separator)) {
+      this.config.holidays.forEach((holiday) => {
+        this.holidaysMap.set(holiday, true);
+      });
+    } else {
+      this.config.holidays.forEach((holiday) => {
+        this.holidaysMap.set(DateUtils.format(new Date(holiday), `yyyy${separator}MM${separator}dd`), true);
+      });
+    }
+  }
   setData(newData, newConfig) {
     this.data = newData;
     this.buildTaskMap();
@@ -553,8 +578,17 @@ class GanttChart {
     canvas.style.height = `${height}px`;
     const ctx = canvas.getContext("2d");
     ctx.scale(this.devicePixelRatio, this.devicePixelRatio);
+    ctx.textBaseline = "middle";
+    ctx.imageSmoothingEnabled = false;
     return ctx;
   }
+  /**
+   * 辅助函数：像素对齐(确保MAC/Windows等不同设备上1px线条清晰)
+   * 用于 1px 线条，使其落在 x.5 位置，填满一个物理像素，避免模糊
+   */
+  snap(val) {
+    return Math.floor(val) + 0.5;
+  }
   calculateAllTaskPositions() {
     this.taskPositions.clear();
     let visibleRowIndex = 0;
@@ -640,9 +674,9 @@ class GanttChart {
     const h = this.config.headerHeight;
     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
     ctx.save();
-    ctx.translate(-this.scrollLeft, 0);
+    ctx.translate(-Math.round(this.scrollLeft), 0);
     ctx.fillStyle = this.config.headerBgColor;
-    ctx.fillRect(this.scrollLeft, 0, this.viewportWidth, h);
+    ctx.fillRect(Math.round(this.scrollLeft), 0, this.viewportWidth, h);
     ctx.textBaseline = "middle";
     ctx.textRendering = "optimizeLegibility";
     let currentDate = new Date(this.visibleDateRange.start);
@@ -720,20 +754,20 @@ class GanttChart {
     }
     const groupedBlocks = this.groupConsecutiveBlocks(visibleBlocks);
     ctx.fillStyle = "#333";
-    ctx.font = 'bold 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+    ctx.font = "bold 14px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
     ctx.textAlign = "left";
     groupedBlocks.forEach((group) => {
       const visibleStart = Math.max(group.startX, this.scrollLeft);
       const visibleEnd = Math.min(group.endX, this.scrollLeft + this.viewportWidth);
       if (visibleEnd > visibleStart) {
         ctx.fillStyle = this.config.headerBgColor;
-        ctx.fillRect(visibleStart, 0, visibleEnd - visibleStart, h * 0.5);
+        ctx.fillRect(Math.round(visibleStart), 0, Math.round(visibleEnd - visibleStart), Math.round(h * 0.5));
         ctx.fillStyle = "#333";
-        ctx.fillText(group.text, visibleStart + 5, group.yPos);
+        ctx.fillText(group.text, Math.round(visibleStart + 5), Math.round(group.yPos));
       }
     });
     while (currentDateForLower <= this.visibleDateRange.end) {
-      const x = this.dateToX(currentDateForLower);
+      const x = this.snap(this.dateToX(currentDateForLower));
       let lowerText = "";
       let nextDate;
       switch (this.config.viewMode) {
@@ -768,7 +802,7 @@ class GanttChart {
       }
       const unitWidth = this.dateToX(nextDate) - x;
       ctx.fillStyle = "#000412";
-      ctx.font = '14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+      ctx.font = "14px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
       ctx.textAlign = "center";
       ctx.fillText(lowerText, Math.round(x + unitWidth / 2), Math.round(h * 0.7));
       ctx.beginPath();
@@ -782,11 +816,6 @@ class GanttChart {
         currentDateForLower = nextDate;
       }
     }
-    ctx.beginPath();
-    ctx.moveTo(this.scrollLeft, h - 0.5);
-    ctx.lineTo(this.scrollLeft + this.viewportWidth, h - 0.5);
-    ctx.strokeStyle = "#e0e0e0";
-    ctx.stroke();
     ctx.restore();
   }
   // Helper method to group consecutive blocks with same text
@@ -809,7 +838,7 @@ class GanttChart {
     const ctx = this.mainCtx;
     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
     ctx.save();
-    ctx.translate(-this.scrollLeft, -this.scrollTop);
+    ctx.translate(-Math.round(this.scrollLeft), -Math.round(this.scrollTop));
     const { start: startDate, end: endDate } = this.visibleDateRange;
     this.drawGrid(ctx, startDate, endDate);
     this.drawToday(ctx);
@@ -898,7 +927,7 @@ class GanttChart {
   }
   drawAllTasks(ctx) {
     ctx.textBaseline = "middle";
-    ctx.font = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+    ctx.font = "12px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
     ctx.textRendering = "optimizeSpeed";
     ctx.imageSmoothingEnabled = false;
     let visibleRowIndex = 0;
@@ -925,6 +954,7 @@ class GanttChart {
   }
   // In the drawGrid method
   drawGrid(ctx, startDate, endDate) {
+    const separator = this.config.dateSeparator;
     ctx.strokeStyle = "#e6e6e6";
     ctx.lineWidth = 1;
     ctx.beginPath();
@@ -938,8 +968,9 @@ class GanttChart {
       for (let i = 0; i <= visibleRowCount; i++) {
         const y = i * this.config.rowHeight;
         if (y < this.scrollTop || y > this.scrollTop + this.viewportHeight) continue;
-        ctx.moveTo(this.scrollLeft, y);
-        ctx.lineTo(this.scrollLeft + this.viewportWidth, y);
+        const sharpY = this.snap(y);
+        ctx.moveTo(this.scrollLeft, sharpY);
+        ctx.lineTo(this.scrollLeft + this.viewportWidth, sharpY);
       }
     }
     if (this.config.showColLines) {
@@ -980,9 +1011,15 @@ class GanttChart {
         currentDate = nextDate;
       }
       while (currentDate <= endDate) {
-        const x = this.dateToX(currentDate);
+        const x = this.snap(this.dateToX(currentDate));
         ctx.moveTo(x, this.scrollTop);
         ctx.lineTo(x, this.scrollTop + this.viewportHeight);
+        if (this.config.viewMode === "Day") {
+          if ([0, 6].includes(currentDate.getDay()) || this.holidaysMap.has(DateUtils.format(currentDate, `yyyy${separator}MM${separator}dd`))) {
+            ctx.fillStyle = this.config.weekendBgColor;
+            ctx.fillRect(x + 1, this.scrollTop, Math.round(this.pixelsPerDay - 1), Math.round(this.scrollTop + this.viewportHeight));
+          }
+        }
         switch (this.config.viewMode) {
           case "Day":
             nextDate = DateUtils.addDays(currentDate, 1);
@@ -1029,14 +1066,14 @@ class GanttChart {
     const [offsetX_actual, percent_actual] = this.config.viewMode === "Day" && task.actualOffsetPercent ? task.actualOffsetPercent : [0, 1];
     if (this.config.showActual && pos.x_actual_start) {
       ctx.fillStyle = task.actualBgColor ? task.actualBgColor : this.config.actualBgColor;
-      ctx.fillRect(pos.offset_x_actual_start, Math.round(taskY + 2), Math.round(pos.x_actual_width * percent_actual), Math.round(taskHeight - 2));
+      ctx.fillRect(pos.offset_x_actual_start + this.config.xGap, Math.round(taskY + 2), Math.round(pos.x_actual_width * percent_actual - this.config.xGap), Math.round(taskHeight - 2));
     }
     if (this.config.showPlan && pos.x_plan_start && pos.x_plan_end) {
       ctx.strokeStyle = task.planBorderColor ? task.planBorderColor : this.config.planBorderColor;
       ctx.lineWidth = 4;
       ctx.beginPath();
-      ctx.moveTo(pos.offset_x_plan_start + offset / 2, taskY);
-      ctx.lineTo(pos.offset_x_plan_end - offset / 2, taskY);
+      ctx.moveTo(pos.offset_x_plan_start + offset / 2 + this.config.xGap, taskY);
+      ctx.lineTo(pos.offset_x_plan_end - offset / 2 - this.config.xGap, taskY);
       ctx.stroke();
     }
     ctx.fillStyle = "#000";

package/dist/index.css

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.5.3
+ * gantt-canvas-chart v1.6.0
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -10,7 +10,8 @@
   overflow: hidden;
   position: relative;
   background: white;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  font-family: Roboto, PingFang SC, Noto Sans SC, Microsoft YaHei UI, Microsoft YaHei, Segoe UI, Helvetica Neue,
+    Helvetica, Arial, sans-serif;
 }
 
 .__gantt-chart-container {
@@ -19,7 +20,8 @@
   position: relative;
   background: #ffffff;
   height: 100%;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  font-family: Roboto, PingFang SC, Noto Sans SC, Microsoft YaHei UI, Microsoft YaHei, Segoe UI, Helvetica Neue,
+    Helvetica, Arial, sans-serif;
 }
 
 .__gantt-scroll-dummy {

package/dist/index.d.ts

@@ -85,6 +85,7 @@ export declare class GanttChart {
         row: number;
         task: Task;
     }>;
+    holidaysMap: Map<string, boolean>;
     private isLoadingData;
     private hasMoreDataLeft;
     private hasMoreDataRight;
@@ -99,6 +100,7 @@ export declare class GanttChart {
     private buildTaskMap;
     private setupEvents;
     updateConfig(newConfig: GanttConfig): void;
+    private buildHolidaysMap;
     setData(newData: GanttData, newConfig?: GanttConfig): void;
     destroy(): void;
     private calculateFullTimeline;
@@ -118,6 +120,11 @@ export declare class GanttChart {
     private updateVirtualRanges;
     private updateDimensions;
     private setupCanvas;
+    /**
+     * 辅助函数：像素对齐(确保MAC/Windows等不同设备上1px线条清晰)
+     * 用于 1px 线条，使其落在 x.5 位置，填满一个物理像素，避免模糊
+     */
+    snap(val: number): number;
     private calculateAllTaskPositions;
     private getIterationStartDate;
     render(scrolling?: boolean): void;
@@ -175,9 +182,13 @@ export declare interface GanttConfig {
     showTooltip?: boolean;
     tooltipColor?: 'black' | 'white';
     todayColor?: string;
+    weekendBgColor?: string;
+    holidays?: string[];
+    dateSeparator?: string;
     offsetTop?: number;
     offsetLeft?: number;
     scrollEdgeThresholds?: number;
+    xGap?: number;
     enabledLoadMore?: [LoadMoreDirection?, LoadMoreDirection?, LoadMoreDirection?];
     viewFactors?: {
         Day: number;

package/dist/index.es.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.5.3
+ * gantt-canvas-chart v1.6.0
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -144,6 +144,7 @@ class GanttChart {
   resizeObserver;
   taskPositions;
   taskMap;
+  holidaysMap;
   isLoadingData = false;
   hasMoreDataLeft = true;
   hasMoreDataRight = true;
@@ -192,9 +193,13 @@ class GanttChart {
       tooltipFormat: null,
       tooltipColor: "black",
       todayColor: "#ff4d4f",
+      weekendBgColor: "#f7f7f7",
+      holidays: [],
+      dateSeparator: "/",
       offsetTop: 0,
       offsetLeft: 0,
       scrollEdgeThresholds: 10,
+      xGap: 0,
       enabledLoadMore: [],
       viewFactors: { Day: 80, Week: 20, Month: 15, Year: 6 },
       planBorderColor: "#C1EFCF",
@@ -229,6 +234,7 @@ class GanttChart {
     this.totalHeight = 0;
     this.taskPositions = /* @__PURE__ */ new Map();
     this.taskMap = /* @__PURE__ */ new Map();
+    this.holidaysMap = /* @__PURE__ */ new Map();
     this.handleMouseMove = this.handleMouseMove.bind(this);
     this.handleMouseLeave = this.handleMouseLeave.bind(this);
     this.handleScroll = this.handleScroll.bind(this);
@@ -238,6 +244,9 @@ class GanttChart {
     this.init();
   }
   init() {
+    if (this.config.holidays.length > 0) {
+      this.buildHolidaysMap();
+    }
     this.buildTaskMap();
     this.updatePixelsPerDay();
     this.calculateFullTimeline();
@@ -286,10 +295,26 @@ class GanttChart {
       this.updatePixelsPerDay();
       this.calculateFullTimeline();
     }
+    if (this.config.holidays.length !== this.holidaysMap.size) {
+      this.buildHolidaysMap();
+    }
     this.updateLoadMoreConf();
     this.updateDimensions();
     this.render();
   }
+  buildHolidaysMap() {
+    this.holidaysMap.clear();
+    const separator = this.config.dateSeparator;
+    if (this.config.holidays && this.config.holidays.length > 0 && this.config.holidays[0].includes(separator)) {
+      this.config.holidays.forEach((holiday) => {
+        this.holidaysMap.set(holiday, true);
+      });
+    } else {
+      this.config.holidays.forEach((holiday) => {
+        this.holidaysMap.set(DateUtils.format(new Date(holiday), `yyyy${separator}MM${separator}dd`), true);
+      });
+    }
+  }
   setData(newData, newConfig) {
     this.data = newData;
     this.buildTaskMap();
@@ -551,8 +576,17 @@ class GanttChart {
     canvas.style.height = `${height}px`;
     const ctx = canvas.getContext("2d");
     ctx.scale(this.devicePixelRatio, this.devicePixelRatio);
+    ctx.textBaseline = "middle";
+    ctx.imageSmoothingEnabled = false;
     return ctx;
   }
+  /**
+   * 辅助函数：像素对齐(确保MAC/Windows等不同设备上1px线条清晰)
+   * 用于 1px 线条，使其落在 x.5 位置，填满一个物理像素，避免模糊
+   */
+  snap(val) {
+    return Math.floor(val) + 0.5;
+  }
   calculateAllTaskPositions() {
     this.taskPositions.clear();
     let visibleRowIndex = 0;
@@ -638,9 +672,9 @@ class GanttChart {
     const h = this.config.headerHeight;
     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
     ctx.save();
-    ctx.translate(-this.scrollLeft, 0);
+    ctx.translate(-Math.round(this.scrollLeft), 0);
     ctx.fillStyle = this.config.headerBgColor;
-    ctx.fillRect(this.scrollLeft, 0, this.viewportWidth, h);
+    ctx.fillRect(Math.round(this.scrollLeft), 0, this.viewportWidth, h);
     ctx.textBaseline = "middle";
     ctx.textRendering = "optimizeLegibility";
     let currentDate = new Date(this.visibleDateRange.start);
@@ -718,20 +752,20 @@ class GanttChart {
     }
     const groupedBlocks = this.groupConsecutiveBlocks(visibleBlocks);
     ctx.fillStyle = "#333";
-    ctx.font = 'bold 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+    ctx.font = "bold 14px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
     ctx.textAlign = "left";
     groupedBlocks.forEach((group) => {
       const visibleStart = Math.max(group.startX, this.scrollLeft);
       const visibleEnd = Math.min(group.endX, this.scrollLeft + this.viewportWidth);
       if (visibleEnd > visibleStart) {
         ctx.fillStyle = this.config.headerBgColor;
-        ctx.fillRect(visibleStart, 0, visibleEnd - visibleStart, h * 0.5);
+        ctx.fillRect(Math.round(visibleStart), 0, Math.round(visibleEnd - visibleStart), Math.round(h * 0.5));
         ctx.fillStyle = "#333";
-        ctx.fillText(group.text, visibleStart + 5, group.yPos);
+        ctx.fillText(group.text, Math.round(visibleStart + 5), Math.round(group.yPos));
       }
     });
     while (currentDateForLower <= this.visibleDateRange.end) {
-      const x = this.dateToX(currentDateForLower);
+      const x = this.snap(this.dateToX(currentDateForLower));
       let lowerText = "";
       let nextDate;
       switch (this.config.viewMode) {
@@ -766,7 +800,7 @@ class GanttChart {
       }
       const unitWidth = this.dateToX(nextDate) - x;
       ctx.fillStyle = "#000412";
-      ctx.font = '14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+      ctx.font = "14px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
       ctx.textAlign = "center";
       ctx.fillText(lowerText, Math.round(x + unitWidth / 2), Math.round(h * 0.7));
       ctx.beginPath();
@@ -780,11 +814,6 @@ class GanttChart {
         currentDateForLower = nextDate;
       }
     }
-    ctx.beginPath();
-    ctx.moveTo(this.scrollLeft, h - 0.5);
-    ctx.lineTo(this.scrollLeft + this.viewportWidth, h - 0.5);
-    ctx.strokeStyle = "#e0e0e0";
-    ctx.stroke();
     ctx.restore();
   }
   // Helper method to group consecutive blocks with same text
@@ -807,7 +836,7 @@ class GanttChart {
     const ctx = this.mainCtx;
     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
     ctx.save();
-    ctx.translate(-this.scrollLeft, -this.scrollTop);
+    ctx.translate(-Math.round(this.scrollLeft), -Math.round(this.scrollTop));
     const { start: startDate, end: endDate } = this.visibleDateRange;
     this.drawGrid(ctx, startDate, endDate);
     this.drawToday(ctx);
@@ -896,7 +925,7 @@ class GanttChart {
   }
   drawAllTasks(ctx) {
     ctx.textBaseline = "middle";
-    ctx.font = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+    ctx.font = "12px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
     ctx.textRendering = "optimizeSpeed";
     ctx.imageSmoothingEnabled = false;
     let visibleRowIndex = 0;
@@ -923,6 +952,7 @@ class GanttChart {
   }
   // In the drawGrid method
   drawGrid(ctx, startDate, endDate) {
+    const separator = this.config.dateSeparator;
     ctx.strokeStyle = "#e6e6e6";
     ctx.lineWidth = 1;
     ctx.beginPath();
@@ -936,8 +966,9 @@ class GanttChart {
       for (let i = 0; i <= visibleRowCount; i++) {
         const y = i * this.config.rowHeight;
         if (y < this.scrollTop || y > this.scrollTop + this.viewportHeight) continue;
-        ctx.moveTo(this.scrollLeft, y);
-        ctx.lineTo(this.scrollLeft + this.viewportWidth, y);
+        const sharpY = this.snap(y);
+        ctx.moveTo(this.scrollLeft, sharpY);
+        ctx.lineTo(this.scrollLeft + this.viewportWidth, sharpY);
       }
     }
     if (this.config.showColLines) {
@@ -978,9 +1009,15 @@ class GanttChart {
         currentDate = nextDate;
       }
       while (currentDate <= endDate) {
-        const x = this.dateToX(currentDate);
+        const x = this.snap(this.dateToX(currentDate));
         ctx.moveTo(x, this.scrollTop);
         ctx.lineTo(x, this.scrollTop + this.viewportHeight);
+        if (this.config.viewMode === "Day") {
+          if ([0, 6].includes(currentDate.getDay()) || this.holidaysMap.has(DateUtils.format(currentDate, `yyyy${separator}MM${separator}dd`))) {
+            ctx.fillStyle = this.config.weekendBgColor;
+            ctx.fillRect(x + 1, this.scrollTop, Math.round(this.pixelsPerDay - 1), Math.round(this.scrollTop + this.viewportHeight));
+          }
+        }
         switch (this.config.viewMode) {
           case "Day":
             nextDate = DateUtils.addDays(currentDate, 1);
@@ -1027,14 +1064,14 @@ class GanttChart {
     const [offsetX_actual, percent_actual] = this.config.viewMode === "Day" && task.actualOffsetPercent ? task.actualOffsetPercent : [0, 1];
     if (this.config.showActual && pos.x_actual_start) {
       ctx.fillStyle = task.actualBgColor ? task.actualBgColor : this.config.actualBgColor;
-      ctx.fillRect(pos.offset_x_actual_start, Math.round(taskY + 2), Math.round(pos.x_actual_width * percent_actual), Math.round(taskHeight - 2));
+      ctx.fillRect(pos.offset_x_actual_start + this.config.xGap, Math.round(taskY + 2), Math.round(pos.x_actual_width * percent_actual - this.config.xGap), Math.round(taskHeight - 2));
     }
     if (this.config.showPlan && pos.x_plan_start && pos.x_plan_end) {
       ctx.strokeStyle = task.planBorderColor ? task.planBorderColor : this.config.planBorderColor;
       ctx.lineWidth = 4;
       ctx.beginPath();
-      ctx.moveTo(pos.offset_x_plan_start + offset / 2, taskY);
-      ctx.lineTo(pos.offset_x_plan_end - offset / 2, taskY);
+      ctx.moveTo(pos.offset_x_plan_start + offset / 2 + this.config.xGap, taskY);
+      ctx.lineTo(pos.offset_x_plan_end - offset / 2 - this.config.xGap, taskY);
       ctx.stroke();
     }
     ctx.fillStyle = "#000";

package/dist/index.umd.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.5.3
+ * gantt-canvas-chart v1.6.0
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -148,6 +148,7 @@
     resizeObserver;
     taskPositions;
     taskMap;
+    holidaysMap;
     isLoadingData = false;
     hasMoreDataLeft = true;
     hasMoreDataRight = true;
@@ -196,9 +197,13 @@
         tooltipFormat: null,
         tooltipColor: "black",
         todayColor: "#ff4d4f",
+        weekendBgColor: "#f7f7f7",
+        holidays: [],
+        dateSeparator: "/",
         offsetTop: 0,
         offsetLeft: 0,
         scrollEdgeThresholds: 10,
+        xGap: 0,
         enabledLoadMore: [],
         viewFactors: { Day: 80, Week: 20, Month: 15, Year: 6 },
         planBorderColor: "#C1EFCF",
@@ -233,6 +238,7 @@
       this.totalHeight = 0;
       this.taskPositions = /* @__PURE__ */ new Map();
       this.taskMap = /* @__PURE__ */ new Map();
+      this.holidaysMap = /* @__PURE__ */ new Map();
       this.handleMouseMove = this.handleMouseMove.bind(this);
       this.handleMouseLeave = this.handleMouseLeave.bind(this);
       this.handleScroll = this.handleScroll.bind(this);
@@ -242,6 +248,9 @@
       this.init();
     }
     init() {
+      if (this.config.holidays.length > 0) {
+        this.buildHolidaysMap();
+      }
       this.buildTaskMap();
       this.updatePixelsPerDay();
       this.calculateFullTimeline();
@@ -290,10 +299,26 @@
         this.updatePixelsPerDay();
         this.calculateFullTimeline();
       }
+      if (this.config.holidays.length !== this.holidaysMap.size) {
+        this.buildHolidaysMap();
+      }
       this.updateLoadMoreConf();
       this.updateDimensions();
       this.render();
     }
+    buildHolidaysMap() {
+      this.holidaysMap.clear();
+      const separator = this.config.dateSeparator;
+      if (this.config.holidays && this.config.holidays.length > 0 && this.config.holidays[0].includes(separator)) {
+        this.config.holidays.forEach((holiday) => {
+          this.holidaysMap.set(holiday, true);
+        });
+      } else {
+        this.config.holidays.forEach((holiday) => {
+          this.holidaysMap.set(DateUtils.format(new Date(holiday), `yyyy${separator}MM${separator}dd`), true);
+        });
+      }
+    }
     setData(newData, newConfig) {
       this.data = newData;
       this.buildTaskMap();
@@ -555,8 +580,17 @@
       canvas.style.height = `${height}px`;
       const ctx = canvas.getContext("2d");
       ctx.scale(this.devicePixelRatio, this.devicePixelRatio);
+      ctx.textBaseline = "middle";
+      ctx.imageSmoothingEnabled = false;
       return ctx;
     }
+    /**
+     * 辅助函数：像素对齐(确保MAC/Windows等不同设备上1px线条清晰)
+     * 用于 1px 线条，使其落在 x.5 位置，填满一个物理像素，避免模糊
+     */
+    snap(val) {
+      return Math.floor(val) + 0.5;
+    }
     calculateAllTaskPositions() {
       this.taskPositions.clear();
       let visibleRowIndex = 0;
@@ -642,9 +676,9 @@
       const h = this.config.headerHeight;
       ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
       ctx.save();
-      ctx.translate(-this.scrollLeft, 0);
+      ctx.translate(-Math.round(this.scrollLeft), 0);
       ctx.fillStyle = this.config.headerBgColor;
-      ctx.fillRect(this.scrollLeft, 0, this.viewportWidth, h);
+      ctx.fillRect(Math.round(this.scrollLeft), 0, this.viewportWidth, h);
       ctx.textBaseline = "middle";
       ctx.textRendering = "optimizeLegibility";
       let currentDate = new Date(this.visibleDateRange.start);
@@ -722,20 +756,20 @@
       }
       const groupedBlocks = this.groupConsecutiveBlocks(visibleBlocks);
       ctx.fillStyle = "#333";
-      ctx.font = 'bold 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+      ctx.font = "bold 14px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
       ctx.textAlign = "left";
       groupedBlocks.forEach((group) => {
         const visibleStart = Math.max(group.startX, this.scrollLeft);
         const visibleEnd = Math.min(group.endX, this.scrollLeft + this.viewportWidth);
         if (visibleEnd > visibleStart) {
           ctx.fillStyle = this.config.headerBgColor;
-          ctx.fillRect(visibleStart, 0, visibleEnd - visibleStart, h * 0.5);
+          ctx.fillRect(Math.round(visibleStart), 0, Math.round(visibleEnd - visibleStart), Math.round(h * 0.5));
           ctx.fillStyle = "#333";
-          ctx.fillText(group.text, visibleStart + 5, group.yPos);
+          ctx.fillText(group.text, Math.round(visibleStart + 5), Math.round(group.yPos));
         }
       });
       while (currentDateForLower <= this.visibleDateRange.end) {
-        const x = this.dateToX(currentDateForLower);
+        const x = this.snap(this.dateToX(currentDateForLower));
         let lowerText = "";
         let nextDate;
         switch (this.config.viewMode) {
@@ -770,7 +804,7 @@
         }
         const unitWidth = this.dateToX(nextDate) - x;
         ctx.fillStyle = "#000412";
-        ctx.font = '14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+        ctx.font = "14px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
         ctx.textAlign = "center";
         ctx.fillText(lowerText, Math.round(x + unitWidth / 2), Math.round(h * 0.7));
         ctx.beginPath();
@@ -784,11 +818,6 @@
           currentDateForLower = nextDate;
         }
       }
-      ctx.beginPath();
-      ctx.moveTo(this.scrollLeft, h - 0.5);
-      ctx.lineTo(this.scrollLeft + this.viewportWidth, h - 0.5);
-      ctx.strokeStyle = "#e0e0e0";
-      ctx.stroke();
       ctx.restore();
     }
     // Helper method to group consecutive blocks with same text
@@ -811,7 +840,7 @@
       const ctx = this.mainCtx;
       ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
       ctx.save();
-      ctx.translate(-this.scrollLeft, -this.scrollTop);
+      ctx.translate(-Math.round(this.scrollLeft), -Math.round(this.scrollTop));
       const { start: startDate, end: endDate } = this.visibleDateRange;
       this.drawGrid(ctx, startDate, endDate);
       this.drawToday(ctx);
@@ -900,7 +929,7 @@
     }
     drawAllTasks(ctx) {
       ctx.textBaseline = "middle";
-      ctx.font = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+      ctx.font = "12px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
       ctx.textRendering = "optimizeSpeed";
       ctx.imageSmoothingEnabled = false;
       let visibleRowIndex = 0;
@@ -927,6 +956,7 @@
     }
     // In the drawGrid method
     drawGrid(ctx, startDate, endDate) {
+      const separator = this.config.dateSeparator;
       ctx.strokeStyle = "#e6e6e6";
       ctx.lineWidth = 1;
       ctx.beginPath();
@@ -940,8 +970,9 @@
         for (let i = 0; i <= visibleRowCount; i++) {
           const y = i * this.config.rowHeight;
           if (y < this.scrollTop || y > this.scrollTop + this.viewportHeight) continue;
-          ctx.moveTo(this.scrollLeft, y);
-          ctx.lineTo(this.scrollLeft + this.viewportWidth, y);
+          const sharpY = this.snap(y);
+          ctx.moveTo(this.scrollLeft, sharpY);
+          ctx.lineTo(this.scrollLeft + this.viewportWidth, sharpY);
         }
       }
       if (this.config.showColLines) {
@@ -982,9 +1013,15 @@
           currentDate = nextDate;
         }
         while (currentDate <= endDate) {
-          const x = this.dateToX(currentDate);
+          const x = this.snap(this.dateToX(currentDate));
           ctx.moveTo(x, this.scrollTop);
           ctx.lineTo(x, this.scrollTop + this.viewportHeight);
+          if (this.config.viewMode === "Day") {
+            if ([0, 6].includes(currentDate.getDay()) || this.holidaysMap.has(DateUtils.format(currentDate, `yyyy${separator}MM${separator}dd`))) {
+              ctx.fillStyle = this.config.weekendBgColor;
+              ctx.fillRect(x + 1, this.scrollTop, Math.round(this.pixelsPerDay - 1), Math.round(this.scrollTop + this.viewportHeight));
+            }
+          }
           switch (this.config.viewMode) {
             case "Day":
               nextDate = DateUtils.addDays(currentDate, 1);
@@ -1031,14 +1068,14 @@
       const [offsetX_actual, percent_actual] = this.config.viewMode === "Day" && task.actualOffsetPercent ? task.actualOffsetPercent : [0, 1];
       if (this.config.showActual && pos.x_actual_start) {
         ctx.fillStyle = task.actualBgColor ? task.actualBgColor : this.config.actualBgColor;
-        ctx.fillRect(pos.offset_x_actual_start, Math.round(taskY + 2), Math.round(pos.x_actual_width * percent_actual), Math.round(taskHeight - 2));
+        ctx.fillRect(pos.offset_x_actual_start + this.config.xGap, Math.round(taskY + 2), Math.round(pos.x_actual_width * percent_actual - this.config.xGap), Math.round(taskHeight - 2));
       }
       if (this.config.showPlan && pos.x_plan_start && pos.x_plan_end) {
         ctx.strokeStyle = task.planBorderColor ? task.planBorderColor : this.config.planBorderColor;
         ctx.lineWidth = 4;
         ctx.beginPath();
-        ctx.moveTo(pos.offset_x_plan_start + offset / 2, taskY);
-        ctx.lineTo(pos.offset_x_plan_end - offset / 2, taskY);
+        ctx.moveTo(pos.offset_x_plan_start + offset / 2 + this.config.xGap, taskY);
+        ctx.lineTo(pos.offset_x_plan_end - offset / 2 - this.config.xGap, taskY);
         ctx.stroke();
       }
       ctx.fillStyle = "#000";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantt-canvas-chart",
-  "version": "1.5.3",
+  "version": "1.6.0",
   "description": "High performance Gantt chart component based on Canvas, can be applied to any framework",
   "type": "module",
   "main": "dist/index.es.js",