:disabled-dates => Incomprehensible behavior when using an array

[cregx]

Hello,

I want to initialize a calendar so that certain days of the week, e.g. Sunday, are always deactivated. This works understandably well - also thanks to the documentation. However, when I want to add more days (holidays), I get an incomprehensible result. I must admit that I am neither a JavaScript nor a Vue expert.

The source code I used looks like this in excerpts:

My Vue component

<template>
    <v-container>
        <v-row>
            <v-col class="d-flex justify-center">
                <VDatePicker
                    v-model="selectedDate"
                    @update:modelValue="onDayClick"
                    mode="dateTime"
                    title-position="left"
                    :locale="langUI"
                    :is-required="true"
                    :first-day-of-week="2"
                    :is24hr="true"
                    :hide-time-header="false"
                    :min-date="new Date()"
                    :disabled-dates="initDisabledDates"
                    :rules="initDateRules"
                    :attributes="initDateAttributes" />
            </v-col>
        </v-row>
    </v-container>
</template>

My Pinia-based store

import { defineStore } from 'pinia'

export const useAppStore = defineStore('app', {
  state: () => {
    return {
      generalHolidays: [],                  
    };
  },
  actions: {
    updateGeneralHolidays() { // <= This action is to dynamically generate an array of repeating ISO-based calendar data.
      const year = new Date().getFullYear();
      const daysOff = [
        `${year}-06-01`,
        `${year}-06-02`,
        `${year}-06-03`,
      ];   
      this.generalHolidays = daysOff;
    },
  },

If I now try to initialize the calendar accordingly via initDisabledDates and disable only certain dates, then only two calendar days are disabled or not at all.

My Vue component (Composition API)

<script setup>
    import { useAppStore } from '@/store/app.js'
    import { DatePicker as VDatePicker } from 'v-calendar'; 
    import { ref } from 'vue';
    import tools from '@/assets/tools.js';

    const { getRoundedDateTime, getNextWeekday, isAfterBusinessHours } = tools
    const { operatingHours } = useAppStore().$state

    const store = useAppStore();

    store.updateGeneralHolidays(); // <= For testing purposes initialize the store data explicitly with dates for calendar days to be disabled.

   // other source code

   //#region Begin initialization VDatePicker
    const initDisabledDates = ref([
        store.generalHolidays, // <= How can I pass an array of calendar dates at this point so that they are explicitly disabled in the calendar?
        {
            repeat: {
                weekdays: 1,
            },
        },
    ]);
   //#endregion
</script>

And this is the result:

What happens to the 2023-06-03?

Can anyone explain my error or point me to a solution. I would be very grateful for it.

@nathanreyes: Basically I find V-Calendar very good. Thank you for that.

[cregx]

I have made a few more attempts to rule out errors in interpreting the documentation.

If I use date objects instead of string-based dates, the result is slightly different, but again, neither reproducible nor traceable.

My Pinia-based store

import { defineStore } from 'pinia'

export const useAppStore = defineStore('app', {
  state: () => {
    return {
      generalHolidays: [],                  
    };
  },
  actions: {
    updateGeneralHolidays() { // <= This action is to dynamically generate an array of repeating ISO-based calendar data.
      const year = new Date().getFullYear();
      const daysOff = [
        new Date(year, 5, 13),
        new Date(year, 5, 16),
        new Date(year, 5, 22),
        new Date(year, 5, 24),
        new Date(year, 5, 25),
      ];  
      this.generalHolidays = daysOff;
    },
  },

And this is the result:

I don't want to get hung up on the idea and would appreciate more ideas on how to solve my problem: In principle, I don't want to have to enter calendar data for holidays over and over again, e.g. 1x a year, but do it automatically with the solution I presented. I think that other users of V-Calendar might also have this problem.

So I would be thankful for alternative solutions.