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

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

Open
mycak opened this issue Feb 28, 2024 · 5 comments · May be fixed by #20965
Open

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

mycak opened this issue Feb 28, 2024 · 5 comments · May be fixed by #20965
Labels
C: VDatePicker good first issue A quick-win fix that would be great for new contributors T: enhancement Functionality that enhances existing features

Comments

@mycak
Copy link

mycak commented Feb 28, 2024

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

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

@mycak
Copy link
Author

mycak commented Mar 21, 2024

Hey, unfortunately nothing :(

@laurentfirdion
Copy link

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

@azampagl
Copy link

azampagl commented Jun 3, 2024

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

laurentfirdion commented Jun 3, 2024

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

@MatthewAry MatthewAry added T: enhancement Functionality that enhances existing features C: VDatePicker labels Nov 16, 2024
@MatthewAry MatthewAry added the good first issue A quick-win fix that would be great for new contributors label Nov 16, 2024
@KaelWD KaelWD marked this as a duplicate of #20883 Jan 20, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
C: VDatePicker good first issue A quick-win fix that would be great for new contributors T: enhancement Functionality that enhances existing features
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants