Padding fixes

Author: ManukMinasyan

package.json

@@ -6,7 +6,7 @@
   },
   "name": "vue-functional-calendar",
   "description": "Lightweight, high-performance calendar component based on Vue.js",
-  "version": "2.6.3",
+  "version": "2.6.4",
   "license": "MIT",
   "repository": {
     "type": "git",

src/Demo.vue

@@ -22,6 +22,28 @@
             <span :class="{'green-point': props.day.day === 5, 'orange-point': props.day.day === 9, 'green-line': props.day.day === 11}"></span>
                 </span>
         </FunctionalCalendar>
+        <FunctionalCalendar class="demo-calendar"
+                            ref="Calendar2"
+                            :is-date-range="true"
+                            :min-sel-days="3"
+                            :is-dark="true"
+                            :date-format="'dd/mm/yyyy'"
+                            :is-multiple="true"
+                            :calendars-count="1"
+                            :with-time-picker="false"
+                            :change-month-function="true"
+                            :change-year-function="true"
+                            :disabled-dates="['10/10/2019']"
+                            v-slot:default="props"
+                            :is-auto-closeable="true"
+                            :is-modal="false"
+                            :change-year-step="5"
+        >
+            <span style="text-align: center">
+            {{ props.day.day }}
+            <span :class="{'green-point': props.day.day === 5, 'orange-point': props.day.day === 9, 'green-line': props.day.day === 11}"></span>
+                </span>
+        </FunctionalCalendar>
         <!--<functional-calendar class="demo-calendar"-->
         <!--:with-time-picker='true'-->
         <!--:is-date-picker='true'-->

src/assets/scss/calendar.scss

@@ -67,7 +67,6 @@ input.vfc-single-input {
 
     .vfc-content {
       width: 45%;
-      height: 50%;
       position: absolute;
       z-index: 1000;
       background-color: $licorice;

src/components/FunctionalCalendar.vue

@@ -164,8 +164,8 @@
 
             window.addEventListener('click', (e) => {
                 if (this.showMonthPicker || this.showYearPicker) {
-                    let element1 = document.querySelector('.vfc-calendars .vfc-top-date a:nth-child(1)');
-                    let element2 = document.querySelector('.vfc-calendars .vfc-top-date a:nth-child(2)');
+                    let element1 = this.$refs.calendars.querySelector('.vfc-calendars .vfc-top-date a:nth-child(1)');
+                    let element2 = this.$refs.calendars.querySelector('.vfc-calendars .vfc-top-date a:nth-child(2)');
 
                     if (!this.$refs.monthContainer.contains(e.target) && !element1.contains(e.target) && !element2.contains(e.target)) {
                         this.showMonthPicker = this.showYearPicker = false