how to set default v-calendar visible months

Question

I'm working with V-calendar to select date ranges

The default v-calendar view shows me the current month and the next month (today is febury), like:

However I would like to set default view from current and past month, cause the default range is the last 30 days , like:

How can I set this in my v-calendar?

Answer 1

I just solved it by setting the from-page and to-page props. like

<DatePicker :from-page="fromPage" :to-page="toPage" mode="range"/>

And use momentjs to get these parameters

  get currentMonth() {
    const month = moment().month()+1; // 0 to 11
    const year = moment().year();
    return { month, year };
  }

  get previousMonth() {
    const month = moment().subtract(1, "month").month()+1; // 0 to 11
    const year = moment().subtract(1, "month").year();
    return { month, year };
  }