How to highlight weekends and holidays

PTete

How to highlight weekends and holidays with specific colors to consider them when planning tasks

tasha

Hello PTete,

To apply CSS to the scales and highlight them you can set css parameter as a function where you can return your css class depending on the conditions you need.

Please check the example: https://stackblitz.com/edit/vitejs-vite-wnfu6myw?file=src%2FGanttComponent.jsx,src%2Fdata.js

If you are talking about highlighting holidays in the chart itself, it is already available in Svelte Gantt and later on we will add it to the React Gantt.

Docs
https://docs.svar.dev/svelte/gantt/api/properties/highlightTime
Demo
https://docs.svar.dev/svelte/gantt/samples/#/holidays/willow

naoki

Thanks for the great Gantt chart.
I am using React.
I added css: dayStyle to the date column of
scales to color the Gantt chart in date view for holidays (Saturday and Sunday), but only the header is colored.
I tried another method, using highlightTime, to add color using custom CSS, but this also only adds color to the header.
How can I color the cells inside the Gantt chart as well?

tasha

Hello

Currently, the feature to color the cells inside the Gantt chart is not available. However,we plan to introduce it as a commercial feature in the future.
Using highlightTime property you can hightlight specific time areas in the chart (but not cells).
Please take a look at the example: https://stackblitz.com/edit/vitejs-vite-jpzcyq9g?file=src%2FGanttComponent.jsx

naoki

Thank you for your prompt reply! Thank you also for the sample.
I am sorry to be so selfish, but what I would like to do is to make Saturday blue and Sunday red in the day view.
If I specify “wx-weekend”, the gray color is applied to everything except the header, but if I prepare custom CSS other than “wx-weekend” (blue, red), the color is applied only to the header.
I would be very happy if colors were applied to other areas than the header, like “wx-weekend”.

Below is the program source we tried.
【js】
function isDayOff1(date) {
const d = date.getDay();
return d === 6;
}
function isDayOff2(date) {
const d = date.getDay();
return d === 0;
}
function highlightTime(d, u) {
if (u === "day" && isDayOff1(d)) return "wx-weekend-1";
if (u === "day" && isDayOff2(d)) return "wx-weekend-2";
return "";
}

【css】
/* Saturday color blue */
.wx-cell.wx-weekend-1.x2-nufjbd {
background: blue;
color: var(--wx-gantt-holiday-color);
}

/* Sunday color red */
.wx-cell.wx-weekend-2.x2-nufjbd {
background: red;
color: var(--wx-gantt-holiday-color);
}