Our state of the art Gantt chart


Post by bhavadharanisure »

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
sharedandbreak.png (30.25 KiB) Viewed 171 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
entirelyshaded.PNG (28.99 KiB) Viewed 171 times

Post by mats »

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.


Post by bhavadharanisure »

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

schedulerss.png
schedulerss.png (14.76 KiB) Viewed 153 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 ?


Post by mats »

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


Post Reply