feat: configurable highlights

src/defaults.js

@@ -7,7 +7,7 @@ const DEFAULT_VIEW_MODES = [
         step: '1h',
         lower_text: 'HH',
         upper_text: (d, ld, lang) =>
-            d.getDate() !== ld.getDate()
+            !ld || d.getDate() !== ld.getDate()
                 ? date_utils.format(d, 'D MMMM', lang)
                 : '',
         upper_text_frequency: 24,
@@ -19,7 +19,7 @@ const DEFAULT_VIEW_MODES = [
         format_string: 'YYYY-MM-DD HH',
         lower_text: 'HH',
         upper_text: (d, ld, lang) =>
-            d.getDate() !== ld.getDate()
+            !ld || d.getDate() !== ld.getDate()
                 ? date_utils.format(d, 'D MMM', lang)
                 : '',
         upper_text_frequency: 4,
@@ -31,7 +31,7 @@ const DEFAULT_VIEW_MODES = [
         format_string: 'YYYY-MM-DD HH',
         lower_text: 'HH',
         upper_text: (d, ld, lang) =>
-            d.getDate() !== ld.getDate()
+            !ld || d.getDate() !== ld.getDate()
                 ? d.getMonth() !== d.getMonth()
                     ? date_utils.format(d, 'D MMM', lang)
                     : date_utils.format(d, 'D', lang)
@@ -44,9 +44,11 @@ const DEFAULT_VIEW_MODES = [
         format_string: 'YYYY-MM-DD',
         step: '1d',
         lower_text: (d, ld, lang) =>
-            d.getDate() !== ld.getDate() ? date_utils.format(d, 'D', lang) : '',
+            !ld || d.getDate() !== ld.getDate()
+                ? date_utils.format(d, 'D', lang)
+                : '',
         upper_text: (d, ld, lang) =>
-            d.getMonth() !== ld.getMonth()
+            !ld || d.getMonth() !== ld.getMonth()
                 ? date_utils.format(d, 'MMMM', lang)
                 : '',
         thick_line: (d) => d.getDay() === 1,
@@ -61,7 +63,7 @@ const DEFAULT_VIEW_MODES = [
                 ? date_utils.format(d, 'D MMM', lang)
                 : date_utils.format(d, 'D', lang),
         upper_text: (d, ld, lang) =>
-            d.getMonth() !== ld.getMonth()
+            !ld || d.getMonth() !== ld.getMonth()
                 ? date_utils.format(d, 'MMMM', lang)
                 : '',
         thick_line: (d) => d.getDate() >= 1 && d.getDate() <= 7,
@@ -117,6 +119,7 @@ const DEFAULT_OPTIONS = {
     today_button: true,
     view_mode_select: false,
     default_snap: '1d',
+    holiday_highlight: { green: 'weekend' },
 };
 
 export { DEFAULT_OPTIONS, DEFAULT_VIEW_MODES };

src/gantt.css

@@ -186,10 +186,6 @@
         }
     }
 
-    & .holiday-highlight {
-        fill: var(--holiday-color);
-    }
-
     & .arrow {
         fill: none;
         stroke: #9fa9b1;

src/index.js

@@ -534,31 +534,55 @@ export default class Gantt {
     }
 
     highlightWeekends() {
-        // FIX
+        for (let color in this.options.holiday_highlight) {
-        if (!this.view_is('Day') && !this.view_is('Half Day')) return;
+            let check_highlight = this.options.holiday_highlight[color];
-        for (
+            if (check_highlight === 'weekend')
-            let d = new Date(this.gantt_start);
+                check_highlight = (d) => d.getDay() === 0 || d.getDay() === 6;
-            d <= this.gantt_end;
+
-            d.setDate(d.getDate() + 1)
+            console.log(check_highlight);
-        ) {
+            let extra_func;
-            if (d.getDay() === 0 || d.getDay() === 6) {
+
-                const x =
+            if (typeof check_highlight === 'object') {
-                    (date_utils.diff(d, this.gantt_start, this.config.unit) /
+                let f = check_highlight.find((k) => typeof k === 'function');
-                        this.config.step) *
+                if (f) {
-                    this.config.column_width;
+                    extra_func = f;
-                const height =
+                }
-                    (this.options.bar_height + this.options.padding) *
+
-                    this.tasks.length;
+                check_highlight = (d) =>
-                createSVG('rect', {
+                    this.options.holiday_highlight[color]
-                    x,
+                        .filter((k) => typeof k !== 'function')
-                    y: this.options.header_height + this.options.padding / 2,
+                        .map((k) => new Date(k + ' ').getTime())
-                    width:
+                        .includes(d.getTime());
-                        (this.view_is('Day') ? 1 : 2) *
+            }
-                        this.config.column_width,
+
-                    height,
+            for (
-                    class: 'holiday-highlight',
+                let d = new Date(this.gantt_start);
-                    append_to: this.layers.grid,
+                d <= this.gantt_end;
-                });
+                d.setDate(d.getDate() + 1)
+            ) {
+                if (check_highlight(d) || (extra_func && extra_func(d))) {
+                    const x =
+                        (date_utils.diff(
+                            d,
+                            this.gantt_start,
+                            this.config.unit,
+                        ) /
+                            this.config.step) *
+                        this.config.column_width;
+                    const height =
+                        (this.options.bar_height + this.options.padding) *
+                        this.tasks.length;
+                    createSVG('rect', {
+                        x,
+                        y:
+                            this.options.header_height +
+                            this.options.padding / 2,
+                        width: this.config.column_width,
+                        height,
+                        style: `fill: ${color};`,
+                        append_to: this.layers.grid,
+                    });
+                }
             }
         }
     }