Bryntum Support Forums

Hi,
I am trying to grey out weekends in vertical mode. I have effect only on header. Solution from other topic doesn't work for vertical mode:

css:

.b-grid-headers .b-sch-nonworkingtime {
  background-color: rgba(152, 70, 70, 0.15);
}

.b-grid-subgrid .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.15) 10px, rgba(152, 70, 70, 0.15) 20px);
}

ts:

      features : {
          sort        : 'name',
          eventResize : {
              showExactResizePosition : true
          },
          nonWorkingTime : true,

      scheduleTooltip : {
          // Hide schedule tooltip when hovering non-working days
          hideForNonWorkingTime : true
      }
  },

Hi,
Sorry, for the delay, Use this selector

.b-sch-timerange.b-sch-nonworkingtime {
    background: repeating-linear-gradient(-45deg, rgba(188, 96, 96, 0.05), rgba(188, 96, 96, 0.05) 10px, rgba(152, 70, 70, 0.15) 10px, rgba(152, 70, 70, 0.15) 20px);
}

instead of .b-grid-subgrid .b-sch-range

Thx but still no effect on the calendar.

Could you please provide a runnable test case so we can debug it?

Will be hard to do. It's not a small program. Maybe login and pass to application will be enough? You can see there calendar and css on inspect mode. Or maybe some other idea for vertical mode?

Version:
"@bryntum/scheduler": "5.0.1",
"@bryntum/scheduler-angular": "5.0.1",

I tried the CSS in our vertical example here https://bryntum.com/examples/scheduler/vertical/

And it looks like

Isn't it what you are looking for?

Yes, exactly like that.
What you put on ts and css files?

I've used this only css, which I already provided above.

.b-sch-timerange.b-sch-nonworkingtime {
    background: repeating-linear-gradient(-45deg, rgba(188, 96, 96, 0.05), rgba(188, 96, 96, 0.05) 10px, rgba(152, 70, 70, 0.15) 10px, rgba(152, 70, 70, 0.15) 20px);
}

I made a test and the feature not working for me.
What I should use for angular: nonWorkingTime or nonWorkingTimeFeature? I was trying both but I have no new class in tags after set it to true in features section.
When I check the demo there is shown 40 more new class nonWorkingTime on calendar tags.
On my application I have none of nonWorkingTime class after set it to true.

I found the solution right now...
It should be set in html tag:

<bryntum-scheduler
    #kalendarz
    [nonWorkingTimeFeature] = "true"
...
    ></bryntum-scheduler>