gantt-canvas-chart 1.5.4 → 1.6.0

package/dist/index.cjs.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.5.4
+ * 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,6 +195,9 @@ class GanttChart {
       tooltipFormat: null,
       tooltipColor: "black",
       todayColor: "#ff4d4f",
+      weekendBgColor: "#f7f7f7",
+      holidays: [],
+      dateSeparator: "/",
       offsetTop: 0,
       offsetLeft: 0,
       scrollEdgeThresholds: 10,
@@ -232,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);
@@ -241,6 +246,9 @@ class GanttChart {
     this.init();
   }
   init() {
+    if (this.config.holidays.length > 0) {
+      this.buildHolidaysMap();
+    }
     this.buildTaskMap();
     this.updatePixelsPerDay();
     this.calculateFullTimeline();
@@ -289,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();
@@ -930,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();
@@ -989,6 +1014,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.0
  * (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.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,6 +193,9 @@ class GanttChart {
       tooltipFormat: null,
       tooltipColor: "black",
       todayColor: "#ff4d4f",
+      weekendBgColor: "#f7f7f7",
+      holidays: [],
+      dateSeparator: "/",
       offsetTop: 0,
       offsetLeft: 0,
       scrollEdgeThresholds: 10,
@@ -230,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);
@@ -239,6 +244,9 @@ class GanttChart {
     this.init();
   }
   init() {
+    if (this.config.holidays.length > 0) {
+      this.buildHolidaysMap();
+    }
     this.buildTaskMap();
     this.updatePixelsPerDay();
     this.calculateFullTimeline();
@@ -287,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();
@@ -928,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();
@@ -987,6 +1012,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.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,6 +197,9 @@
         tooltipFormat: null,
         tooltipColor: "black",
         todayColor: "#ff4d4f",
+        weekendBgColor: "#f7f7f7",
+        holidays: [],
+        dateSeparator: "/",
         offsetTop: 0,
         offsetLeft: 0,
         scrollEdgeThresholds: 10,
@@ -234,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);
@@ -243,6 +248,9 @@
       this.init();
     }
     init() {
+      if (this.config.holidays.length > 0) {
+        this.buildHolidaysMap();
+      }
       this.buildTaskMap();
       this.updatePixelsPerDay();
       this.calculateFullTimeline();
@@ -291,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();
@@ -932,6 +956,7 @@
     }
     // In the drawGrid method
     drawGrid(ctx, startDate, endDate) {
+      const separator = this.config.dateSeparator;
       ctx.strokeStyle = "#e6e6e6";
       ctx.lineWidth = 1;
       ctx.beginPath();
@@ -991,6 +1016,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.0",
   "description": "High performance Gantt chart component based on Canvas, can be applied to any framework",
   "type": "module",
   "main": "dist/index.es.js",