title: How to change alignment of popover from v-date-picker component?
body: <p>I am using the v-calendar plugin to create a datepicker on the frontend. How can i change the position/alignment of the popover of the v-date-picker component? (While keeping all other elements centered aswell, and while only using CDN imports)</p>
  
  <p>I am trying to build a frontend using Vue.js, v-calendar, Bootstrap (and Chart.js for some graphs). All these libraries/frameworks/plugins were imported into the project by using CDN links for now. I tried using the <strong>popoverAlign</strong> property, which was mentioned on the <a href="https://github.com/nathanreyes/v-calendar" rel="nofollow noreferrer">v-calendar GitHub page</a>. It may be important to add, that i am using <code>text-align: center;</code> on the body to center all the elements on the page, but it seems like the popover does not get centered aswell.</p>
  
  <p>This is the code i tried using:</p>
  
  <pre><code>Vue.use(VCalendar, {
     popoverAlign: "bottom",
  })
  </code></pre>
  
  <p>But i received the errror message <code>Uncaught ReferenceError: VCalendar is not defined</code>, which was maybe caused because i use the libraries only through CDN links and did not install them otherwise.</p>
  
  <p>I expected the popover to appear right under the input element of the datepicker. It actually appeared under it, but shifted to the left. 
  Like this:
  <a href="https://imgur.com/a/wmgdPcf" rel="nofollow noreferrer">actual result</a></p>
  
  <p>I also tried recreating the issue in a <a href="https://jsfiddle.net/nLjt14zq/" rel="nofollow noreferrer">JSFiddle</a>, but the problem did not appear there. I am clueless, as i don't know what is causing this weird alignment of the popover.</p>