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

score 1 · Answer 1 · answered Jun 07 '22 at 07:53

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

answered Jun 07 '22 at 07:53

RenaudC5

3,553
1
11
29

I had configurations previously but just to check whether its the configurations I removed all of it. Still the problem persists. – Shashank Gnawali Jun 07 '22 at 08:47
Can you provide a codepen to show your code and configuration ? – RenaudC5 Jun 07 '22 at 08:52
I can only reproduce this on my project. When I try it on codepen this works fine. I have edited the question to have all the code related to v-calendar. Also I am using Nuxt.js if it helps – Shashank Gnawali Jun 07 '22 at 09:01

score 1 · Answer 2 · answered Jun 07 '22 at 07:55

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>

V-Calendar dates not showing the correct dates

2 Answers2