V-Calendar dates not showing the correct dates-CodePudding

The dates on the shown image are starting on the 1st of June, 2022 which is supposed to be a Wednesday but on the calendar, it is on Sunday. All months start on a Sunday not only June. I am only using <v-calendar /> with no extra props or configurations. I am using v2.4.1 of the v-calendar package.

This is how I am importing the package. Also, I am using Nuxt.js. Our other product uses Vue where the calendar is correct.

/plugins/v-calendar.js

import Vue from "vue";
import VCalendar from "v-calendar";

Vue.use(VCalendar, {
  componentPrefix: "v",
});

nuxt.config.js

plugins: [
   { src: "@/plugins/v-calendar.js", ssr: false },
],

page.vue

<v-calendar />

CodePudding user response：

With no plugins set, v-calendar start the week by sunday (which is the american convention). If you want to change this, on can use the firstDayOfWeek property. (See documentation here)

new Vue({
  el: "#app"
});

@import url 'https://unpkg.com/[email protected]/lib/v-calendar.min.css';

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/lib/v-calendar.umd.min.js"></script>
<div id='app'>
  <v-calendar :first-day-of-week="2"></v-calendar>
</div>

Otherwise, the June month start by default on wednesday using the classic configuration as you can see from the above snippet. The error might come from your configuration

CodePudding user response：

Not sure what issue you are facing, But just to reproduce the issue I created a demo and it is showing proper start date.

Demo :

new Vue({
  el: '#app',
  data() {
    const now = new Date()
    const later = new Date(now.getTime()   5 * 60 * 1000)
    return {
      value: null,
      availableDates: [
        { start: now, end: later }
      ]
    }
  }
})

<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/[email protected]"></script>
<div id='app'>
  <v-calendar/>
</div>