Bryntum Support Forums

Posted: **Tue Sep 27, 2022 6:49 am**

Hi,
How to highlight the available hours of the resource in shaded lines and the break hours in red in Scheduler pro like the below attached image

: sharedandbreak.png (30.25 KiB) Viewed 242 times

I tried giving css

.b-grid-row:not(.b-group-row) .b-sch-timeaxis-cell {
    background: repeating-linear-gradient(
      -45deg,
      #f1f1f1,
      #f1f1f1 3px,
      white 3px,
      white 6px
    );
  }
  .b-sch-resourcetimerange.custom {
    background: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.2),
        rgba(255, 255, 255, 0.2) 10px,
        rgba(190, 190, 190, 0.2) 10px,
        rgba(190, 190, 190, 0.2) 20px
      )
      rgba(255, 255, 255, 0);
    color: #888;
  }

but the entire scheduler pro region is shaded

: entirelyshaded.PNG (28.99 KiB) Viewed 242 times

Posted: **Tue Sep 27, 2022 11:35 am**

Sure, try something like:

.b-sch-timeaxis-cell {
    border: 1em solid white;
}

.b-sch-resourcenonworkingtime {
    background-color: #fff;
}

For the break interval, assign a special cls to the interval which then gets added as a CSS class so you can color it.

Posted: **Wed Sep 28, 2022 6:42 am**

Hi Mats,
I added the classes you mentioned, as you can see in image attached below

: schedulerss.png (14.76 KiB) Viewed 224 times

[{
      id: -2147464374,
      intervals: [
        {
          isWorking: false,
          name:"lunch",
          recurrentEndDate: "at 12:00",
          recurrentStartDate: "at 13:00"
        },
        {
          isWorking: false,
          name:"dayoff",
          recurrentEndDate: "on Tue at 0:00",
          recurrentStartDate: "on Mon at 0:00",
        },
        {
          isWorking: false,
          name:"shiftover",
          recurrentEndDate: "at 10:27",
          recurrentStartDate: "at 19:27",
        },
      ],
     

},]

have also attached the calender store data above, we have a "dayoff" on monday but as you see in the image it is also shaded.
how can the shading be removed on monday?

how can I highlight the "lunch" time in red ?

Posted: **Wed Sep 28, 2022 8:17 am**

For the break interval, assign a special cls to the interval which then gets added as a CSS class so you can color it.

https://bryntum.com/docs/scheduler-pro/api/SchedulerPro/model/CalendarIntervalModel#field-cls

Example:

{
                        "isWorking"          : false,
                        "name"               : "break",
                        "cls"                : "break",
                        "recurrentStartDate" : "on Mon at 10:00",
                        "recurrentEndDate"   : "on Mon at 11:00"
                    }

Then use the 'break' CSS class to style

Bryntum Support Forums

[REACT] How to highlight the available hours of the resource

[REACT] How to highlight the available hours of the resource

Re: [REACT] How to highlight the available hours of the resource

Re: [REACT] How to highlight the available hours of the resource

Re: [REACT] How to highlight the available hours of the resource