[Feature Request] Styling an entire day individually on a v-calendar

Problem to solve

I’m representing data on a calendar, and I’d like to use a conditional class to style calendar days individually. I can’t see how this is possible within the current <template scope-slot="day"></template> at the moment.

Proposed solution

https://i.imgur.com/LcBeZAX.png

Conditionally applying a class on the day. This example was done editing things in the inspector, but it would be cool if we could just easily add a flag to the day instance like :background-color="backgroundColour".

[LucaColombi]

I did some magic, by using a template with a coloured square:

	<v-calendar locale="it" min-weeks="5" ref="calendar" v-model="calendar.value"
	.....>
		<template v-slot:day="{ past, date }">
			<div v-if="calendar.dates[date]" style="position:absolute;top:0;left:0;right:0;bottom:0;opacity:0.5" v-bind:style="{ 'background-color': calendar.dates[date].color }">
				&nbsp;
			</div>
		</template></v-calendar>

you can start from here and see if you can obtain what you want

anyway, this component should have a little more extensibility

[mrkazu]

I did some magic, by using a template with a coloured square:

	<v-calendar locale="it" min-weeks="5" ref="calendar" v-model="calendar.value"
	.....>
		<template v-slot:day="{ past, date }">
			<div v-if="calendar.dates[date]" style="position:absolute;top:0;left:0;right:0;bottom:0;opacity:0.5" v-bind:style="{ 'background-color': calendar.dates[date].color }">
				&nbsp;
			</div>
		</template></v-calendar>

you can start from here and see if you can obtain what you want

anyway, this component should have a little more extensibility

This is nice! however, the div layer will be under the events but above the date button, making the day button not activate functions when clicked.

to fix this you need to add

.v-btn–fab { z-index: 2; }