Style Intervals depending on Category for v-calendar

[WobblySlug]

Hey everyone. Is it possible to style the interval that the category differently? It appears that "interval" is a time slot across multiple categories.

Currently I have this (the grey area at the top indicates that it's outside of working hours)

But I'd like to be able to do this (style each interval category separately).

I'm open to any suggestions, thanks so much in advance.

[KaelWD]

Both interval-style and the interval slot expose the current category

[WobblySlug]

Hey @KaelWD , thanks for your reply.

Could you please tell me which version of Vuetify are you using? The API documentation I'm looking at here doesn't have anything like that.

Also, what is your console.log actually representing in your screenshot above?

Thanks in advance!

[KaelWD]

Looks like it's missing from the api docs.

https://codepen.io/kaelwd/pen/xxdpWJp?editors=1010

[WobblySlug]

@KaelWD dude I could kiss you!

Any idea what version of Vuetify has the category within the interval style?
My package.json says "vuetify": "^2.3.16", and unfortunately does not contain any category JSON property. I may have to think about updating soon!

[KaelWD]

2.4.0: #12518

[WobblySlug]

2.4.0: #12518

Thanks again @KaelWD

[WobblySlug]

The ability to style a category interval was added in Vuetify v2.4.0