How do I change the color of p:schedule at certain hours in Primefaces?

Question

I've been looking for a way to change the color of the p:schedule element in Primefaces at certain hours, but I just can't find one. For example, in the next image I would want the schedule to be light green instead of white from 13:00 to 14:00 : schedule that i want to change.

I don't want to add different colored events, I only want to change the color of certain parts of the schedule to different colors.

So far I haven't found an attribute or something that I could use to change it that specifically.

Answer 1

If you inspect the rows and cells with your browser's DOM inspector, you'll see that each cell has a data-time attribute containing the time:

Simply use those to add CSS rules. For example:

td[data-time='13:00:00'],
td[data-time='13:10:00'],
td[data-time='13:20:00'] {
  background-color: red;
}

See also How do I override default PrimeFaces CSS with custom styles?