V-calendar: Open onClick

[rcascante]

How to toggle the calendar by clicking on the input?

[kokosss12]

Look here

https://github.com/nathanreyes/v-calendar#user-content-custom-defaults

Set property popoverVisibility to focus

e.g.:

Vue.use(VCalendar, {
popoverVisibility: 'focus'
});

[rcascante]

Thank you very much for your fast reply. I've tried this property, the issue is that I want to hide it when I click on the input again, as it is considered as a focus it's displaying it.
I there any way to do something like @click="focus = !focus" ?

[rcascante]

Good afternoon!
While I was considering different options in order to toggle the calendar when I click on the input, I ended up with this solution:

1) Added the popover-visibility to my datePicker element
:popover-visibility="popoverVisibility"
2) The popoverVisibility is a data with 'hidden' value by default
3) Created a custom input using slots and added a @click event:
<input type="text" slot-scope="{ inputValue }" :value="inputValue" class='form-control' :readonly='true' @input="onStayChanged" @click="onCalendarSelect">
4) The function onCalendar toggles the popoverVisibility from 'visible' to 'hidden'

This approach works fine on desktop devices, bu as soon as I check for mobile there is an issue with displaying the selected range on the input:
example:
selected range: 15-01-2019 to 20-01-2019
input on mobile shows: 15-01-2019 to 15-01-2019

This behaviour does not happen when the popover-visibility is set to 'focus', but the natural behaviour of users is to click again on the input to close the calendar or outside it