V-calendar: showPageRange method not working yet?

[nikwins]

I want to show seasonal periods on my calendar after a user clicks a specific button. This of course is working fine. But now if a seasonal period is after the date range that is currently shown by the calendar, the user wouldn't see any change. So in that case I want to switch the calendar view to the months the seasonal period lies in.
In the docs I found that there is a method called showPageRange that should excatly do that. But I can't seem to make it work. For test purposes I implemented it in the same way as stated in the docs, but it just doesn't do anything.

Here is an example.

Is this still in work or am I missing something?

[nathanreyes]

This was just poorly documented on my part. Any of the following will be possible in the next beta.

  ...
  const date = new Date(2020, 0, 1); // January, 2020
  const page = { month: 2, year: 2020 }; // February, 2020
  // Pass a date
  calendar.showPageRange(date);
  // Pass a page ({ month, year })
  calendar.showPageRange(page);
  // From a date or page
  calendar.showPageRange({ from: date });
  // To a date or page
  calendar.showPageRange({ to: page });
  // From a date or page to a date or page
  calendar.showPageRange({ from: date, to: page })

Currently, it expects an object with optional from and to pages (in the { month, year } format).

[nathanreyes]

The docs have been updated for this method in beta.14.

[zsjjerry]

您好，作者； 是这样的，我正在做一个项目里面用到这个组件； 我就想问题就是calendar.showPageRange该方法有安卓与IOS区分嘛？ 是因为这样的，我在项目上使用该方法实现了通过年月指定回到该日期的日历页面； 安卓系统上使用没有问题，IOS上面就不可以；

[enzonotario]

Is there a way to use this behaviour in the datepicker? For now, when I want to focus an specific month, I set the range to a day of that month and then just set this.range = {}...

[nikwins]

This works with the datepicker. Just add a ref="yourCalendarName" to the datepicker, then focus a specific month like so:

this.$refs.yourCalendarName.$refs.calendar.showPageRange({ from: { month: 8, year: 2019 } })

[enzonotario]

I tried that, but it says showPageRange is not a function: https://jsfiddle.net/r30onw8v/

[nikwins]

You've used beta13 in your example. The update for the showPageRange function came with beta14. I edited my answer above, I forgot the .$refs.calendar part. Here is an edited fiddle for example.

[enzonotario]

Ahh, yes, in fact I have tried it in my local env (with the latest version), but I didn't know about the additional $refs.calendar. Now it works fine. Thanks so much!

[nikwins]

Glad I could help :)