diff --git a/src/defaults.js b/src/defaults.js index e138521..4025e29 100644 --- a/src/defaults.js +++ b/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 }; diff --git a/src/gantt.css b/src/gantt.css index 2fa3328..abd351d 100644 --- a/src/gantt.css +++ b/src/gantt.css @@ -186,10 +186,6 @@ } } - & .holiday-highlight { - fill: var(--holiday-color); - } - & .arrow { fill: none; stroke: #9fa9b1; diff --git a/src/index.js b/src/index.js index ce52dd0..408c9ea 100644 --- a/src/index.js +++ b/src/index.js @@ -534,31 +534,55 @@ export default class Gantt { } highlightWeekends() { - // FIX - if (!this.view_is('Day') && !this.view_is('Half Day')) return; - for ( - let d = new Date(this.gantt_start); - d <= this.gantt_end; - d.setDate(d.getDate() + 1) - ) { - if (d.getDay() === 0 || d.getDay() === 6) { - 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.view_is('Day') ? 1 : 2) * - this.config.column_width, - height, - class: 'holiday-highlight', - append_to: this.layers.grid, - }); + for (let color in this.options.holiday_highlight) { + let check_highlight = this.options.holiday_highlight[color]; + if (check_highlight === 'weekend') + check_highlight = (d) => d.getDay() === 0 || d.getDay() === 6; + + console.log(check_highlight); + let extra_func; + + if (typeof check_highlight === 'object') { + let f = check_highlight.find((k) => typeof k === 'function'); + if (f) { + extra_func = f; + } + + check_highlight = (d) => + this.options.holiday_highlight[color] + .filter((k) => typeof k !== 'function') + .map((k) => new Date(k + ' ').getTime()) + .includes(d.getTime()); + } + + for ( + let d = new Date(this.gantt_start); + 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, + }); + } } } }