I’m using the separators prop to add a separator to the beggining of each month.
As per your documentation i used the following code (onBeforeTimeHeaderRender function):
let dp = planningRef1.current.control;
var separators = dp.separators.filter(function (s) {
return args.header.start < s.location && s.location <= args.header.end;
});
separators.forEach(function (s) {
if (!args.header.areas) {
args.header.areas = [];
}
args.header.areas = separators.map((s) => ({
start: s.location,
width: 1,
top: 0,
bottom: 0,
offsetX: -1,
backColor: s.color,
}));
});
I’m generating the separators dinamically:
separators={startOfMonth.map((date) => ({
location: new DayPilot.Date(date),
color: "rgb(192, 192, 192)",
}))}
The separator appears on the “grid” but then on the TimeHeaders, sometimes it does, sometimes it doesn’t.
Is there a better way to achieve this? A vertical separator line between each month?