feat(VDatePicker): add events and event-color support

[maryamBaratii]

Description

• Restores the events and event-color props in VDatePicker for month view.
• Allows event markers to be displayed on months, similar to the behavior in Vuetify 2.
• Ensures the correct color is applied to event markers.
• Updated documentation to reflect the new props.

Fixes #19296

Markup:

<template>
  <v-app>
    <v-container>
      <v-date-picker
        :event-color="date => date[9] % 2 ? 'red' : 'yellow'"
        :events="functionEvents"
        :v-model="date2"
      />
    </v-container>
  </v-app>
</template>

<script setup>
  import { onMounted, ref } from 'vue'

  const arrayEvents = ref(null)
  const date2 = ref((new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)).toISOString().substr(0, 10))
  function functionEvents (date) {
    const [, , day] = date.split('-')
    if ([12, 17, 28].includes(parseInt(day, 10))) return true
    if ([1, 19, 22].includes(parseInt(day, 10))) return ['red', '#00f']
    return false
  }
  onMounted(() => {
    arrayEvents.value = [...Array(6)].map(() => {
      const day = Math.floor(Math.random() * 30)
      const d = new Date()
      d.setDate(day)
      return d.toISOString().substr(0, 10)
    })
  })
</script>

[maryamBaratii]

Hey @johnleider, I appreciate all the work you and the team do on Vuetify! I'd love to contribute to the project, and submitted this PR. I'd love to get your thoughts when you have time. Thanks!

[johnleider]

Hey @johnleider, I appreciate all the work you and the team do on Vuetify! I'd love to contribute to the project, and submitted this PR. I'd love to get your thoughts when you have time. Thanks!

I'll take a look. Is this mostly just copying what was there in V2? Also, since this is a feature, it will need to go to the dev branch.

Thank you!

[maryamBaratii]

Thanks, John! Yes, this restores the event and event-color props in VDatePicker, just like in Vuetify 2. Let me know if anything else needs tweaking.

[AndrewJesse]

Excited for this

[johnleider]

Just as an update. I think everything looks good but I want to spend some time on the example for the docs.

[J-Sek]

It is immediately obvious that selected day color makes it a challenge to show those dots in a way that they do not blend into the background. I wish the example in docs could include the defaults provider solving it with bordered passed down to the VBadge.

<v-defaults-provider :defaults="{ VBadge: { rounded: 'sm', bordered: true } }"> 
  <!-- picker with events (the example on the right) -->
</v-defaults-provider>

[maryamBaratii]

I can also update the default event color from surface-variant to primary, or something else that works better visually.