Las fechas en la imagen que se muestra comienzan el 1 de junio de 2022, que se supone que es miércoles, pero en el calendario es domingo. Todos los meses comienzan en domingo, no solo junio. Solo estoy usando <v-calendar />
sin accesorios ni configuraciones adicionales. Estoy usando v2.4.1 del paquete v-calendar.
Así es como estoy importando el paquete. Además, estoy usando Nuxt.js. Nuestro otro producto usa Vue donde el calendario es correcto.
/plugins/v-calendario.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 }, ],
página.vue
<v-calendar />
Sin complementos configurados, v-calendar
comienza la semana el domingo (que es la convención estadounidense). Si desea cambiar esto, puede usar la propiedad firstDayOfWeek
. (Ver documentación aquí )
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>
De lo contrario, el mes de junio comienza de forma predeterminada el miércoles con la configuración clásica, como puede ver en el fragmento anterior. El error puede provenir de su configuración
No estoy seguro de qué problema está enfrentando, pero solo para reproducir el problema, creé una demostración y muestra la fecha de inicio adecuada.
demostración :
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>