From 6cb5c12fb793ea04175d6f9cc30bce739d78e144 Mon Sep 17 00:00:00 2001
From: Deepak Kyatham <deepak@inncircles.com>
Date: Tue, 26 Mar 2024 16:23:49 +0530
Subject: [PATCH 1/2] Feat:Add Grid highlight for current week, month, year

---
 src/gantt.scss | 15 +++++++++++++
 src/index.js   | 60 +++++++++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 69 insertions(+), 6 deletions(-)

diff --git a/src/gantt.scss b/src/gantt.scss
index 9c91dad..75100d9 100644
--- a/src/gantt.scss
+++ b/src/gantt.scss
@@ -40,6 +40,21 @@ $handle-color: #ddd !default;
 		opacity: 0.5;
 	}
 
+	.week-highlight {
+		fill: $light-yellow;
+		opacity: 0.5;
+	}
+
+	.month-highlight {
+		fill: $light-yellow;
+		opacity: 0.5;
+	}
+
+	.year-highlight {
+		fill: $light-yellow;
+		opacity: 0.5;
+	}
+
 	.arrow {
 		fill: none;
 		stroke: $text-muted;
diff --git a/src/index.js b/src/index.js
index 9cd505f..e383481 100644
--- a/src/index.js
+++ b/src/index.js
@@ -412,13 +412,46 @@ export default class Gantt {
         }
     }
 
-    make_grid_highlights() {
-        // highlight today's date
+    computeGridHighlightDimensions(view_mode) {
+        let xDist = 0;
+
         if (this.view_is(VIEW_MODE.DAY)) {
-            const x =
-                (date_utils.diff(date_utils.today(), this.gantt_start, 'hour') /
-                    this.options.step) *
+            return (date_utils.diff(date_utils.today(), this.gantt_start, 'hour') /
+                this.options.step) *
                 this.options.column_width;
+        }
+
+        for (let date of this.dates) {
+            const todayDate = new Date();
+            const startDate = new Date(date);
+            let endDate = new Date(date);
+            switch (view_mode) {
+                case VIEW_MODE.WEEK:
+                    endDate.setDate(date.getDate() + 7);
+                    break;
+                case VIEW_MODE.MONTH:
+                    endDate.setMonth(date.getMonth() + 1);
+                    break;
+                case VIEW_MODE.YEAR:
+                    endDate.setFullYear(date.getFullYear() + 1);
+                    break;
+            }
+
+            if (todayDate >= startDate && todayDate <= endDate) {
+                break;
+            } else {
+                xDist += this.options.column_width;
+            }
+        }
+        return xDist;
+    }
+
+    make_grid_highlights() {
+        // highlight today's | week's date
+        if (this.view_is(VIEW_MODE.DAY) || this.view_is(VIEW_MODE.WEEK) || this.view_is(VIEW_MODE.MONTH) || this.view_is(VIEW_MODE.YEAR)) {
+
+            let x = this.computeGridHighlightDimensions(this.options.view_mode);
+
             const y = 0;
 
             const width = this.options.column_width;
@@ -428,12 +461,27 @@ export default class Gantt {
                 this.options.header_height +
                 this.options.padding / 2;
 
+            let className = '';
+            switch (this.options.view_mode) {
+                case VIEW_MODE.DAY:
+                    className = 'today-highlight'
+                    break;
+                case VIEW_MODE.WEEK:
+                    className = 'week-highlight'
+                    break;
+                case VIEW_MODE.MONTH:
+                    className = 'month-highlight'
+                    break;
+                case VIEW_MODE.YEAR:
+                    className = 'year-highlight'
+                    break;
+            }
             createSVG('rect', {
                 x,
                 y,
                 width,
                 height,
-                class: 'today-highlight',
+                class: className,
                 append_to: this.layers.grid,
             });
         }

From 02aaf6a02fa8758a931735caa429836a14eaec2d Mon Sep 17 00:00:00 2001
From: Deepak Kyatham <deepak@inncircles.com>
Date: Tue, 26 Mar 2024 16:34:04 +0530
Subject: [PATCH 2/2] changes

---
 src/index.js | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/index.js b/src/index.js
index e383481..1da08d0 100644
--- a/src/index.js
+++ b/src/index.js
@@ -412,6 +412,7 @@ export default class Gantt {
         }
     }
 
+    //compute the horizontal x distance
     computeGridHighlightDimensions(view_mode) {
         let xDist = 0;
 
@@ -424,7 +425,7 @@ export default class Gantt {
         for (let date of this.dates) {
             const todayDate = new Date();
             const startDate = new Date(date);
-            let endDate = new Date(date);
+            const endDate = new Date(date);
             switch (view_mode) {
                 case VIEW_MODE.WEEK:
                     endDate.setDate(date.getDate() + 7);
@@ -436,7 +437,6 @@ export default class Gantt {
                     endDate.setFullYear(date.getFullYear() + 1);
                     break;
             }
-
             if (todayDate >= startDate && todayDate <= endDate) {
                 break;
             } else {
@@ -447,13 +447,11 @@ export default class Gantt {
     }
 
     make_grid_highlights() {
-        // highlight today's | week's date
+        // highlight today's | week's | month's | year's
         if (this.view_is(VIEW_MODE.DAY) || this.view_is(VIEW_MODE.WEEK) || this.view_is(VIEW_MODE.MONTH) || this.view_is(VIEW_MODE.YEAR)) {
 
-            let x = this.computeGridHighlightDimensions(this.options.view_mode);
-
+            const x = this.computeGridHighlightDimensions(this.options.view_mode);
             const y = 0;
-
             const width = this.options.column_width;
             const height =
                 (this.options.bar_height + this.options.padding) *