V-calendar: calendar.popover.position

[jeffster9]

First of all; nice work!!! :) I look forward to using this calendar in my project. However, I've hit a slight road-block. I'm almost positive I'm missing something here but I've read the docs and I cannot figure out how to have the calendar popover position to the left, opposed to the bottom.

I have tried:
Vue.use(VCalendar, { popoverDirection: 'left' })
as well as:
<v-calendar popover-direction="left"

The issue w/ this is that I have the calendar in a right-side column and when the popover appears for a date on the right, half of the information is hidden off the screen. So, it would be great if I could position the popover to the left so that all of the content is visible (at least on lg devices ).

I know this is a common issue; so, again, I'm almost positive I'm missing something. Your assistance is appreciated :) Thanks in advance!

BTW, i'm using v1.0.0-beta.14 in Nuxt.js v2.7.1

[SDenman]

I'm also wondering about popover position, but in a slightly different way.

My problem is that since my app will be used mainly on mobiles, the calendar will fill the screen width and this means that the popovers for dates on the edges will overflow out of the viewable window and so their content will be partially hidden.

The best solution would be to detect where the user has clicked and position the tooltip accordingly - so for a date in the middle - no problem, for a date on the left - position to the right, for a date on the right - position left etc.

If this is not possible though, it's not the end of the world, as I'll just display a modal window in the centre of the screen instead, which will also be a little easier to format, but I'd like to know if there's a solution using the tooltip feature.

As with jeffster9 - I concur - awesome work! Many thanks!

[ptdev]

If you're using v1.0 then the placement should be handled by popper.js and you now also have a "$screens" function to help you with responsive design.
Here's a simplified example:

<v-date-picker
    mode="range"
    :popover="{ placement: $screens({ default: 'bottom', md: 'left-start' }) }"
    :columns="$screens({ default: 1, md: 2, xl: 3 })"
/>

This will make the popover show centered in the bottom on the default size (that is small/mobile) and on the left-start when on medium or larger viewports.
Check the documentation for Popper.js placement option in order to see the valid options, which are basically:

top
top-start
top-end
right
right-start
right-end
bottom
bottom-start
bottom-end
left
left-start
left-end

You can also use the $screens function to change how many calendars are displayed by using it on the :columns prop. The example above results in a 1 month shown on small, 2 months on medium and large, and 3 months on extra large.

Note that if you're using nuxt.js, the $screens function doesn't appear to be working fully, as I've reported on #372 which will hopefully get fixed soon.

[haringsrob]

I think first of all we have to note that there are 2 types of popover:

1. The date picker as popover;
2. The popover tooltip on day hovers.

I think one option here would be to allow popper options to be set during the plugin initialisation.

If the maintainer or anyone could provide some insight/pointers I am happy to propose a pr.