Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(VDatePicker): add events and event-color support for date picker #20965

Open
wants to merge 2 commits into
base: dev
Choose a base branch
from

Conversation

maryamBaratii
Copy link

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

Screenshot 2025-02-07 at 02 14 56

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 maryamBaratii force-pushed the feat/19296-vdatepicker-events branch from b1b33c3 to 57f55dc Compare February 11, 2025 13:20
@maryamBaratii maryamBaratii force-pushed the feat/19296-vdatepicker-events branch from 57f55dc to ecf3e93 Compare February 11, 2025 15:52
@maryamBaratii
Copy link
Author

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!

{ class: 'v-date-picker-month__events' },
eventColors.map(color => {
const { colorClasses, colorStyles } = useColor(toRef({ background: color }))
return h('div', {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a .TSX file so you should be able to just return a function that returns an element.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Got it. I’ve updated the function to return an element directly. Let me know if any other changes are needed. Thanks!

@johnleider
Copy link
Member

johnleider commented Feb 11, 2025

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
Copy link
Author

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.

@maryamBaratii maryamBaratii changed the base branch from master to dev February 12, 2025 14:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

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