[Feature Request] Month picker in VDatePicker 3.5.4 - events and event-color props missing

[mycak]

Problem to solve

VDatePicker in Vuetify 2 had a props: events and event-color . VDatePicker in Vuetify 3 does not seem to have any equivalent option. Would be good to have it again or day slot to customize day field.

Proposed solution

Add a events/event-color props back to VDatePicker or add day slot to customize day field.

[laurentfirdion]

Hey any news on that request ? I really need those props in Vuetify 3

[mycak]

Hey, unfortunately nothing :(

[laurentfirdion]

I ended up achieving it with plain javascript since it's not on vuetify's roadmap

[azampagl]

Any updates on this? @laurentfirdion how did you achieve this? Hack solution that scans all of the btn_contents to add the properly overlay?

E.g. for each span v-btn, that's the container you know you need for the 12th of the month events? 12

[laurentfirdion]

Here is an example below (I intentionnally stripped it from other specificities)

<script setup lang="ts">
import {watch} from "vue";

const props = defineProps<{
  taskDates: string[],
}>()

watch(() => props.taskDates, () => {
  displayEventsDate()
})

function displayEventsDate() {
  if(props.taskDates.length) {
    for (const dateUtc of props.taskDates) {
      const selector = `[data-v-date='${dateUtc}']`
      setTimeout(() => { // setTimeout needed to avoid class  'has-event' being override by vuetfy's component internal update
        document.querySelector(selector)!.classList.add('has-event')
      },100)
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep(.v-date-picker-month__day) {
  &.has-event::after {
    background-color: rgb(var(--v-theme-primary)) !important;
    border-radius: 50%;
    height: 4px;
    width: 4px;
    content: '';
    display: block;
    position: absolute;
    bottom: 6px;
  }
}
</style>

the vDatePicker provides in its html a data-v-date="dateUTC" attribute on each div surrounding a day of the month so we can find a match beetween taskDates which is an array of utc date stringified and the utc date in the data-attribute. You need an event (watcher or vue lifecycle) to call the function which adds the css class. In my case the taskDates prop is updated each time the user changes the current month. I guess it is a common implementation. Hope it will help you