V-Calendar dates not showing the correct dates

Question

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 />

Answer 1

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/v-calendar@2.4.1/lib/v-calendar.min.css';

 <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script> <script src="https://unpkg.com/v-calendar@2.4.1/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

Answer 2

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/v-calendar@2.4.1"></script> <div id='app'> <v-calendar/> </div>