Hello,
is it possible to style weekends differently on timeline?
like non working days with calendar props but without its logic
Support Forum
Hey kosmos,
Thanks for reaching out.
We have a demo with custom styling for weekends https://bryntum.com/products/scheduler/examples/nonworkingdays/
You can use the following CSS rules to update (you need to add custom-style
class to the Scheduler element)
.custom-style {
.b-timeranges-header-canvas .b-sch-nonworkingtime {
background-color : rgb(152, 70, 70, 0.15);
}
.b-timeaxissubgrid .b-sch-range {
background : repeating-linear-gradient(
-45deg,
rgba(188, 96, 96, 0.05),
rgba(188, 96, 96, 0.05) 10px,
rgba(152, 70, 70, 0.08) 10px,
rgba(152, 70, 70, 0.08) 20px
);
}
.b-sch-event-wrap .b-sch-nonworkingtime {
background : repeating-linear-gradient(
45deg,
rgba(255, 255, 255, 0.2),
rgba(255, 255, 255, 0.2) 10px,
rgba(255, 255, 255, 0.3) 10px,
rgba(255, 255, 255, 0.3) 20px
);
background-color : #00000050;
}
}
Best regards,
Márcio
Hey,
So, you can configure a custom class to your calendar, like this
{
"id" : "weekends",
"name" : "Weekends",
"unspecifiedTimeIsWorking" : true,
"intervals" : [
{
"recurrentStartDate" : "on Mon at 0:00",
"recurrentEndDate" : "on Sat at 0:00",
"cls" : "weekends",
"name" : "Working weekend",
"isWorking" : true
}
]
}
And then, change the background color of the weekends
class.
We have a demo with that custom styling here https://bryntum.com/products/gantt/examples/calendars/
Best regards,
Márcio
Sounds like you need recurring time ranges.
https://bryntum.com/products/scheduler/docs/#Scheduler/feature/TimeRanges
Example: https://bryntum.com/products/scheduler/examples/recurringtimeranges/
is these feature supported in gantt?
i have added these code for testing from these page
https://bryntum.com/products/gantt/docs/api/Scheduler/feature/TimeRanges
const first = DateHelper.startOf(new Date(), 'week'); //<- from example
const ganttConfig: Partial<GanttConfig> = {
timeRanges: [
{
duration: 2,
startDate: "2024-02-01",
endDate: "2024-02-07",
cls: "bryntum-weekend",
},
{ id : 1, name : 'Cool range', startDate : DateHelper.add(first, 2, 'days'), duration : 1, durationUnit : 'day' } //<- from example
],
nothing changed in gantt visually
and document.querySelectorAll(".bryntum-weekend") did return empty nodelist