How to set not working days?

[lucadena]

Hi,
I'm trying to set the not working days on my gantt.

Now, automatically, the gantt set the background color only on Saturday and Sunday.

Is possible to configure manually the days? For example on 25 december

[delhoume]

I think the color is set using a CSS class.
Via the VIS timeline subcomponent.

See nurses.css where we do not hightlight weekend days

You might be able to set a class for a given day that would trigger a css rule.

[reregaga]

As noted above, see the nurses example:

gantt-chart/packages/ibm-gantt-chart-docs/src/examples/nurses/nurses.story.js

Lines 160 to 198 in 6b6fee2

	timeTable: {
	renderer: {
	generateDecorations(start, end, ctx) {
	const gantt = ctx.gantt;
	const horiz = gantt.timeLine.getHorizon(); // Get data horizon
	return [
	/* Uncomment those two lines and comment the two following ones to see how to specify a own style defined in nurses.css instead of using a predefined one
	{ start: start, end : horiz.start, className : 'unscheduled-area' },
	{ start: horiz.end, end : end, className : 'unscheduled-area' } */
	{ start, end: horiz.start, type: 'invalid' },
	{ start: horiz.end, end, type: 'invalid' },
	];
	},
	generateRowDecorations(nurse, start, end) {
	const dayoffs = nurse.dayoffs;
	const breaks = [];
	if (dayoffs && dayoffs.length) {
	let date = new Date(start),
	startDate,
	nextDay;
	while (date.getTime() < end) {
	nextDay = new Date(date.valueOf());
	nextDay.setDate(date.getDate() + 1);
	nextDay.setHours(0, 0, 0, 0);
	if (dayoffs.indexOf(date.getDay()) > -1) {
	startDate = new Date(date);
	startDate.setHours(0, 0, 0, 0);
	breaks.push({
	start: startDate.getTime(),
	end: nextDay.getTime(),
	});
	}
	date = nextDay;
	}
	}
	return breaks;
	},
	},
	},

The only thing is that in some versions there is an error that causes the coloring to fail, as mentioned in #59 (comment), so you need to correct line

gantt-chart/packages/ibm-gantt-chart/src/timetable/timetable.js

Line 1104 in 6b6fee2

node.style.width = this.gantt.timeLine.getXFromMillis(obj.end) - left;

to

node.style.width = this.gantt.timeLine.getXFromMillis(obj.end) - left + 'px';