gantt-canvas-chart 1.5.4 → 1.6.1

package/dist/index.cjs.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.5.4
+ * gantt-canvas-chart v1.6.1
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -9,24 +9,35 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 class DateUtils {
   static ONE_DAY_MS = 24 * 60 * 60 * 1e3;
   static format(date, format = "yyyy-MM-dd") {
-    const o = {
-      "M+": date.getMonth() + 1,
-      "d+": date.getDate(),
-      "h+": date.getHours(),
-      "m+": date.getMinutes(),
-      "s+": date.getSeconds(),
+    let fmt = format;
+    let ret;
+    const opt = {
+      "Y+": `${date.getFullYear()}`,
+      // 年
+      "y+": `${date.getFullYear()}`,
+      // 年
+      "M+": `${date.getMonth() + 1}`,
+      // 月
+      "D+": `${date.getDate()}`,
+      // 日
+      "d+": `${date.getDate()}`,
+      // 日
+      "h+": `${date.getHours()}`,
+      // 时
+      "m+": `${date.getMinutes()}`,
+      // 分
+      "s+": `${date.getSeconds()}`,
+      // 秒
       "q+": Math.floor((date.getMonth() + 3) / 3),
       W: ["日", "一", "二", "三", "四", "五", "六"][date.getDay()]
     };
-    if (/(y+)/.test(format))
-      format = format.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
-    for (let k in o)
-      if (new RegExp("(" + k + ")").test(format))
-        format = format.replace(
-          RegExp.$1,
-          RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
-        );
-    return format;
+    for (const k in opt) {
+      ret = new RegExp("(" + k + ")").exec(fmt);
+      if (ret) {
+        fmt = fmt.replace(ret[1], ret[1].length === 1 ? opt[k] : opt[k].padStart(ret[1].length, "0"));
+      }
+    }
+    return fmt;
   }
   static addDays(date, days) {
     const r = new Date(date);
@@ -146,6 +157,7 @@ class GanttChart {
   resizeObserver;
   taskPositions;
   taskMap;
+  holidaysMap;
   isLoadingData = false;
   hasMoreDataLeft = true;
   hasMoreDataRight = true;
@@ -194,6 +206,9 @@ class GanttChart {
       tooltipFormat: null,
       tooltipColor: "black",
       todayColor: "#ff4d4f",
+      weekendBgColor: "#f7f7f7",
+      holidays: [],
+      dateSeparator: "/",
       offsetTop: 0,
       offsetLeft: 0,
       scrollEdgeThresholds: 10,
@@ -232,6 +247,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);
@@ -241,6 +257,9 @@ class GanttChart {
     this.init();
   }
   init() {
+    if (this.config.holidays.length > 0) {
+      this.buildHolidaysMap();
+    }
     this.buildTaskMap();
     this.updatePixelsPerDay();
     this.calculateFullTimeline();
@@ -289,10 +308,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();
@@ -307,6 +342,7 @@ class GanttChart {
   destroy() {
     if (this.resizeObserver) {
       this.resizeObserver.disconnect();
+      this.resizeObserver = null;
     }
     this.container.removeEventListener("scroll", this.handleScroll);
     this.mainCanvas.removeEventListener("mousemove", this.handleMouseMove);
@@ -314,6 +350,8 @@ class GanttChart {
     this.data = [];
     this.taskMap.clear();
     this.taskPositions.clear();
+    this.holidaysMap.clear();
+    this.config.holidays = [];
     this.container.remove();
   }
   calculateFullTimeline() {
@@ -730,7 +768,7 @@ class GanttChart {
     }
     const groupedBlocks = this.groupConsecutiveBlocks(visibleBlocks);
     ctx.fillStyle = "#333";
-    ctx.font = "bold 14px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
+    ctx.font = "bold 12px 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);
@@ -739,7 +777,7 @@ class GanttChart {
         ctx.fillStyle = this.config.headerBgColor;
         ctx.fillRect(Math.round(visibleStart), 0, Math.round(visibleEnd - visibleStart), Math.round(h * 0.5));
         ctx.fillStyle = "#333";
-        ctx.fillText(group.text, Math.round(visibleStart + 5), Math.round(group.yPos));
+        ctx.fillText(group.text, Math.round(visibleStart + 5), Math.round(group.yPos - 3));
       }
     });
     while (currentDateForLower <= this.visibleDateRange.end) {
@@ -778,7 +816,7 @@ class GanttChart {
       }
       const unitWidth = this.dateToX(nextDate) - x;
       ctx.fillStyle = "#000412";
-      ctx.font = "14px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,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.textAlign = "center";
       ctx.fillText(lowerText, Math.round(x + unitWidth / 2), Math.round(h * 0.7));
       ctx.beginPath();
@@ -930,6 +968,7 @@ class GanttChart {
   }
   // In the drawGrid method
   drawGrid(ctx, startDate, endDate) {
+    const separator = this.config.dateSeparator;
     ctx.strokeStyle = "#e6e6e6";
     ctx.lineWidth = 1;
     ctx.beginPath();
@@ -989,6 +1028,12 @@ class GanttChart {
         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);

package/dist/index.css

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.5.4
+ * gantt-canvas-chart v1.6.1
  * (c) 2025-present chandq
  * Released under the MIT License.
  */

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;
@@ -180,6 +182,9 @@ export declare interface GanttConfig {
     showTooltip?: boolean;
     tooltipColor?: 'black' | 'white';
     todayColor?: string;
+    weekendBgColor?: string;
+    holidays?: string[];
+    dateSeparator?: string;
     offsetTop?: number;
     offsetLeft?: number;
     scrollEdgeThresholds?: number;

package/dist/index.es.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.5.4
+ * gantt-canvas-chart v1.6.1
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -7,24 +7,35 @@
 class DateUtils {
   static ONE_DAY_MS = 24 * 60 * 60 * 1e3;
   static format(date, format = "yyyy-MM-dd") {
-    const o = {
-      "M+": date.getMonth() + 1,
-      "d+": date.getDate(),
-      "h+": date.getHours(),
-      "m+": date.getMinutes(),
-      "s+": date.getSeconds(),
+    let fmt = format;
+    let ret;
+    const opt = {
+      "Y+": `${date.getFullYear()}`,
+      // 年
+      "y+": `${date.getFullYear()}`,
+      // 年
+      "M+": `${date.getMonth() + 1}`,
+      // 月
+      "D+": `${date.getDate()}`,
+      // 日
+      "d+": `${date.getDate()}`,
+      // 日
+      "h+": `${date.getHours()}`,
+      // 时
+      "m+": `${date.getMinutes()}`,
+      // 分
+      "s+": `${date.getSeconds()}`,
+      // 秒
       "q+": Math.floor((date.getMonth() + 3) / 3),
       W: ["日", "一", "二", "三", "四", "五", "六"][date.getDay()]
     };
-    if (/(y+)/.test(format))
-      format = format.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
-    for (let k in o)
-      if (new RegExp("(" + k + ")").test(format))
-        format = format.replace(
-          RegExp.$1,
-          RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
-        );
-    return format;
+    for (const k in opt) {
+      ret = new RegExp("(" + k + ")").exec(fmt);
+      if (ret) {
+        fmt = fmt.replace(ret[1], ret[1].length === 1 ? opt[k] : opt[k].padStart(ret[1].length, "0"));
+      }
+    }
+    return fmt;
   }
   static addDays(date, days) {
     const r = new Date(date);
@@ -144,6 +155,7 @@ class GanttChart {
   resizeObserver;
   taskPositions;
   taskMap;
+  holidaysMap;
   isLoadingData = false;
   hasMoreDataLeft = true;
   hasMoreDataRight = true;
@@ -192,6 +204,9 @@ class GanttChart {
       tooltipFormat: null,
       tooltipColor: "black",
       todayColor: "#ff4d4f",
+      weekendBgColor: "#f7f7f7",
+      holidays: [],
+      dateSeparator: "/",
       offsetTop: 0,
       offsetLeft: 0,
       scrollEdgeThresholds: 10,
@@ -230,6 +245,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);
@@ -239,6 +255,9 @@ class GanttChart {
     this.init();
   }
   init() {
+    if (this.config.holidays.length > 0) {
+      this.buildHolidaysMap();
+    }
     this.buildTaskMap();
     this.updatePixelsPerDay();
     this.calculateFullTimeline();
@@ -287,10 +306,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();
@@ -305,6 +340,7 @@ class GanttChart {
   destroy() {
     if (this.resizeObserver) {
       this.resizeObserver.disconnect();
+      this.resizeObserver = null;
     }
     this.container.removeEventListener("scroll", this.handleScroll);
     this.mainCanvas.removeEventListener("mousemove", this.handleMouseMove);
@@ -312,6 +348,8 @@ class GanttChart {
     this.data = [];
     this.taskMap.clear();
     this.taskPositions.clear();
+    this.holidaysMap.clear();
+    this.config.holidays = [];
     this.container.remove();
   }
   calculateFullTimeline() {
@@ -728,7 +766,7 @@ class GanttChart {
     }
     const groupedBlocks = this.groupConsecutiveBlocks(visibleBlocks);
     ctx.fillStyle = "#333";
-    ctx.font = "bold 14px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
+    ctx.font = "bold 12px 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);
@@ -737,7 +775,7 @@ class GanttChart {
         ctx.fillStyle = this.config.headerBgColor;
         ctx.fillRect(Math.round(visibleStart), 0, Math.round(visibleEnd - visibleStart), Math.round(h * 0.5));
         ctx.fillStyle = "#333";
-        ctx.fillText(group.text, Math.round(visibleStart + 5), Math.round(group.yPos));
+        ctx.fillText(group.text, Math.round(visibleStart + 5), Math.round(group.yPos - 3));
       }
     });
     while (currentDateForLower <= this.visibleDateRange.end) {
@@ -776,7 +814,7 @@ class GanttChart {
       }
       const unitWidth = this.dateToX(nextDate) - x;
       ctx.fillStyle = "#000412";
-      ctx.font = "14px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,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.textAlign = "center";
       ctx.fillText(lowerText, Math.round(x + unitWidth / 2), Math.round(h * 0.7));
       ctx.beginPath();
@@ -928,6 +966,7 @@ class GanttChart {
   }
   // In the drawGrid method
   drawGrid(ctx, startDate, endDate) {
+    const separator = this.config.dateSeparator;
     ctx.strokeStyle = "#e6e6e6";
     ctx.lineWidth = 1;
     ctx.beginPath();
@@ -987,6 +1026,12 @@ class GanttChart {
         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);

package/dist/index.umd.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.5.4
+ * gantt-canvas-chart v1.6.1
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -11,24 +11,35 @@
   class DateUtils {
     static ONE_DAY_MS = 24 * 60 * 60 * 1e3;
     static format(date, format = "yyyy-MM-dd") {
-      const o = {
-        "M+": date.getMonth() + 1,
-        "d+": date.getDate(),
-        "h+": date.getHours(),
-        "m+": date.getMinutes(),
-        "s+": date.getSeconds(),
+      let fmt = format;
+      let ret;
+      const opt = {
+        "Y+": `${date.getFullYear()}`,
+        // 年
+        "y+": `${date.getFullYear()}`,
+        // 年
+        "M+": `${date.getMonth() + 1}`,
+        // 月
+        "D+": `${date.getDate()}`,
+        // 日
+        "d+": `${date.getDate()}`,
+        // 日
+        "h+": `${date.getHours()}`,
+        // 时
+        "m+": `${date.getMinutes()}`,
+        // 分
+        "s+": `${date.getSeconds()}`,
+        // 秒
         "q+": Math.floor((date.getMonth() + 3) / 3),
         W: ["日", "一", "二", "三", "四", "五", "六"][date.getDay()]
       };
-      if (/(y+)/.test(format))
-        format = format.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
-      for (let k in o)
-        if (new RegExp("(" + k + ")").test(format))
-          format = format.replace(
-            RegExp.$1,
-            RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
-          );
-      return format;
+      for (const k in opt) {
+        ret = new RegExp("(" + k + ")").exec(fmt);
+        if (ret) {
+          fmt = fmt.replace(ret[1], ret[1].length === 1 ? opt[k] : opt[k].padStart(ret[1].length, "0"));
+        }
+      }
+      return fmt;
     }
     static addDays(date, days) {
       const r = new Date(date);
@@ -148,6 +159,7 @@
     resizeObserver;
     taskPositions;
     taskMap;
+    holidaysMap;
     isLoadingData = false;
     hasMoreDataLeft = true;
     hasMoreDataRight = true;
@@ -196,6 +208,9 @@
         tooltipFormat: null,
         tooltipColor: "black",
         todayColor: "#ff4d4f",
+        weekendBgColor: "#f7f7f7",
+        holidays: [],
+        dateSeparator: "/",
         offsetTop: 0,
         offsetLeft: 0,
         scrollEdgeThresholds: 10,
@@ -234,6 +249,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);
@@ -243,6 +259,9 @@
       this.init();
     }
     init() {
+      if (this.config.holidays.length > 0) {
+        this.buildHolidaysMap();
+      }
       this.buildTaskMap();
       this.updatePixelsPerDay();
       this.calculateFullTimeline();
@@ -291,10 +310,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();
@@ -309,6 +344,7 @@
     destroy() {
       if (this.resizeObserver) {
         this.resizeObserver.disconnect();
+        this.resizeObserver = null;
       }
       this.container.removeEventListener("scroll", this.handleScroll);
       this.mainCanvas.removeEventListener("mousemove", this.handleMouseMove);
@@ -316,6 +352,8 @@
       this.data = [];
       this.taskMap.clear();
       this.taskPositions.clear();
+      this.holidaysMap.clear();
+      this.config.holidays = [];
       this.container.remove();
     }
     calculateFullTimeline() {
@@ -732,7 +770,7 @@
       }
       const groupedBlocks = this.groupConsecutiveBlocks(visibleBlocks);
       ctx.fillStyle = "#333";
-      ctx.font = "bold 14px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
+      ctx.font = "bold 12px 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);
@@ -741,7 +779,7 @@
           ctx.fillStyle = this.config.headerBgColor;
           ctx.fillRect(Math.round(visibleStart), 0, Math.round(visibleEnd - visibleStart), Math.round(h * 0.5));
           ctx.fillStyle = "#333";
-          ctx.fillText(group.text, Math.round(visibleStart + 5), Math.round(group.yPos));
+          ctx.fillText(group.text, Math.round(visibleStart + 5), Math.round(group.yPos - 3));
         }
       });
       while (currentDateForLower <= this.visibleDateRange.end) {
@@ -780,7 +818,7 @@
         }
         const unitWidth = this.dateToX(nextDate) - x;
         ctx.fillStyle = "#000412";
-        ctx.font = "14px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,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.textAlign = "center";
         ctx.fillText(lowerText, Math.round(x + unitWidth / 2), Math.round(h * 0.7));
         ctx.beginPath();
@@ -932,6 +970,7 @@
     }
     // In the drawGrid method
     drawGrid(ctx, startDate, endDate) {
+      const separator = this.config.dateSeparator;
       ctx.strokeStyle = "#e6e6e6";
       ctx.lineWidth = 1;
       ctx.beginPath();
@@ -991,6 +1030,12 @@
           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);

package/package.json

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