Highlight weekends on ruler

[robibuckley]

Hi, I have a timeline and have the scale set as 'day' - I was wondering how I could possibly highlight weekends (Saturday and Sunday) on the ruler? (bold / different background etc)

Or conversely, highlight workdays?

Is there any way to achieve this?

[ka215]

Hi there,

Yes, you can do that. You should add custom styles like below in your CSS file.

/* for Saturday style */
.jqtl-ruler-line-item[data-ruler-item^="weekday-"][data-ruler-item$=",6"] {
  background-color: rgba(51,51,247,.08);
}
/* for Sunday style */
.jqtl-ruler-line-item[data-ruler-item^="weekday-"][data-ruler-item$=",0"] {
    background-color: rgba(247,51,51,.08);
}

CSS attribute selectors for weekday on the ruler is as follows:

• .jqtl-ruler-line-item[data-ruler-item^="weekday-"][data-ruler-item$=",0"] -> Sunday
• .jqtl-ruler-line-item[data-ruler-item^="weekday-"][data-ruler-item$=",1"] -> Monday
• .jqtl-ruler-line-item[data-ruler-item^="weekday-"][data-ruler-item$=",2"] -> Tuesday
• .jqtl-ruler-line-item[data-ruler-item^="weekday-"][data-ruler-item$=",3"] -> Wednesday
• .jqtl-ruler-line-item[data-ruler-item^="weekday-"][data-ruler-item$=",4"] -> Thursday
• .jqtl-ruler-line-item[data-ruler-item^="weekday-"][data-ruler-item$=",5"] -> Friday
• .jqtl-ruler-line-item[data-ruler-item^="weekday-"][data-ruler-item$=",6"] -> Saturday

Then if you want to bold string in the ruler item;

.jqtl-ruler-line-item[data-ruler-item^="weekday-"] span {
    font-weight: 600;
}

Please try it.

Thank you,