0
591
ViewsV-Calendar dates not showing the correct dates
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 />
2 answers
Answer question0
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
0
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>