CODEWITHSUNDEEP
vuejs3v-calendar.io
Ian Davis
Ian Davis

Reputation: 19423

Vue3 v-calendar how to open calendar to a particular past month

Using V-Calendar, how can I render the calendar with it open to a specific month that's in the past? Instead of the current month.

I'm trying the following:

Html:

<v-calendar :attributes="attributes"...></v-calendar>

JS:

<script setup>
  const attributes = ref([
    {
      id: 'some-random-id',
      dates: new Date(2018,3,1)
    }
  ])
</script>

Yet it still opens to the current month, instead of the month I want from 2018. I'm hoping to avoid doing a .move('2018-03-01') inside of onMounted because if I do that, then the UI does a "flicker", where it initially loads to current month, then transitions to the 2018 month. Thanks.

Upvotes: 0

Views: 723

Answers (1)

yoduh
yoduh

Reputation: 14649

The prop you want to use is from-page

Description: The page (month, year) for the first calendar pane located at row 0 and column 0. Use the .sync modifier for two-way binding.

<template>
  <v-calendar :from-page="date" />
</template>

<script>
import { ref } from 'vue';
export default {
  setup() {
    const date = ref({});

    return {
      date
    };
  },

  mounted() {
    this.date = { month: 3, year: 2018 };
  }
};
</script>

Upvotes: 1

Related Questions