[REACT] style weekends

[kosmos]

Hello,
is it possible to style weekends differently on timeline?
like non working days with calendar props but without its logic

7.png (8.05 KiB) Viewed 247 times

[marcio]

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;
}
}

[kosmos]

i have weekend as working time and these demo is for non working time

[marcio]

Hey kosmos,

To clarify, do you want to have weekends with custom styles, but are the weekends also valid working times? Is that correct?

[kosmos]

yes that is correct. i just want to see visually weekends

[marcio]

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/

[kosmos]

these cls class gets only applied if isWorking is set to false
otherwise it is ignored for some reason

[Animal]

Sounds like you need recurring time ranges.

https://bryntum.com/products/scheduler/docs/#Scheduler/feature/TimeRanges

Example: https://bryntum.com/products/scheduler/examples/recurringtimeranges/

[kosmos]

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

[marcio]

Hey kosmos,

Did you enable the feature using timeRangesFeature?