From d92695aa6f764da52533d963ff7d16986bfef4db Mon Sep 17 00:00:00 2001
From: Manuk Minasyan <manuk.minasyan1@gmail.com>
Date: Fri, 1 May 2020 13:56:42 +0400
Subject: [PATCH 1/5] Added footer slot && isLayoutExpandable prop

---
 package.json                          |   2 +-
 src/Demo.vue                          | 218 +++++++++++++++-----------
 src/components/FunctionalCalendar.vue |  10 +-
 src/mixins/propsAndData.js            |   5 +
 4 files changed, 138 insertions(+), 97 deletions(-)

diff --git a/package.json b/package.json
index aa11fb9..67670be 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   },
   "name": "vue-functional-calendar",
   "description": "Lightweight, high-performance calendar component based on Vue.js",
-  "version": "2.8.71",
+  "version": "2.8.74",
   "license": "MIT",
   "repository": {
     "type": "git",
diff --git a/src/Demo.vue b/src/Demo.vue
index d2589c2..15de3a7 100644
--- a/src/Demo.vue
+++ b/src/Demo.vue
@@ -1,8 +1,13 @@
 <template>
     <div>
 
-        <FunctionalCalendar class="demo-calendar dateRangeInputs" :is-modal="true" :is-date-range="true"
+        <FunctionalCalendar class="demo-calendar dateRangeInputs"
+                            ref="demoCalendar1"
+                            v-model="demoCalendar1"
+                            :is-modal="true"
+                            :is-date-range="true"
                             :is-multiple="true"
+                            :isLayoutExpandable="true"
                             :clanedars-count="2">
             <template v-slot:dateRangeInputs="props">
                 <label for="check-in">
@@ -34,98 +39,104 @@
                            :readonly="!props.isTypeable">
                 </label>
             </template>
-        </FunctionalCalendar>
-
-
-        <FunctionalCalendar class="demo-calendar 2"
-                            ref="Calendar"
-                            v-model="calendarData"
-                            :sundayStart="true"
-                            :hiddenElements="['']"
-                            :showWeekNumbers="false"
-                            :withTimePicker="false"
-                            :is-date-picker="false"
-                            :is-multiple-date-picker="true"
-                            :is-date-range="false"
-                            :min-sel-days="3"
-                            :is-dark="false"
-                            :date-format="'yyyy-mm-dd'"
-                            :is-multiple="true"
-                            :calendars-count="2"
-                            :isSeparately="true"
-                            :with-time-picker="false"
-                            :change-month-function="true"
-                            :change-year-function="true"
-                            :marked-dates="markedDates"
-                            :is-auto-closeable="false"
-                            :is-modal="false"
-                            :change-year-step="5"
-                            :is-typeable="true"
-                            @choseDay="choseDay"
-                            title-position="left"
-                            arrows-position="right"
-        >
-        </FunctionalCalendar>
-
-        <FunctionalCalendar class="demo-calendar 2"
-                            ref="Calendar"
-                            :sundayStart="true"
-                            :hiddenElements="['']"
-                            :showWeekNumbers="true"
-                            :is-date-picker="false"
-                            :is-multiple-date-picker="true"
-                            :is-date-range="false"
-                            :min-sel-days="3"
-                            :is-dark="false"
-                            :date-format="'yyyy-mm-dd'"
-                            :is-multiple="true"
-                            :calendars-count="2"
-                            :isSeparately="true"
-                            :with-time-picker="false"
-                            :change-month-function="true"
-                            :change-year-function="true"
-                            :marked-dates="markedDates"
-                            :is-auto-closeable="false"
-                            :is-modal="false"
-                            :change-year-step="5"
-                            :is-typeable="true"
-                            @choseDay="choseDay"
-                            title-position="left"
-                            arrows-position="right"
-        >
-        </FunctionalCalendar>
-
-        <pre>
-        {{ calendarData }}
-        </pre>
-
-        <functional-calendar class="demo-custom-calendar 1"
-                             :change-month-function="true"
-                             :change-year-function="true"
-                             :sundayStart="false"
-                             :showWeekNumbers="false"
-                             title-position="left"
-                             arrows-position="right"
-        >
-            <template v-slot:default="props">
-                <div class="custom-day-container">
-                    <div class="custom-day">
-                        {{ props.day.day }}
-                        <div class="events">
-                            <div class="event-item" :class="event.class"
-                                 v-for="event in getEventsByDate(props.day.date)" :key="event.id">
-                                {{ event.title }}
-                            </div>
-                        </div>
-                    </div>
+            <template v-slot:footer>
+                <div class="footer">
+                    <a class="button" @click.prevent="$refs.demoCalendar1.showCalendar = false">Apply</a>
+                    <a class="button is-blue" @click.prevent="demoCalendar1.dateRange = {}">Clear</a>
                 </div>
             </template>
-        </functional-calendar>
-
-        <!--        <button @click="markedDates2.push('22/3/2020')">Add date</button>-->
+        </FunctionalCalendar>
 
 
-        <button @click="$refs.Calendar.ChooseDate('2020-10-15')">Choose Date 2020-10-15</button>
+<!--        <FunctionalCalendar class="demo-calendar 2"-->
+<!--                            ref="Calendar"-->
+<!--                            v-model="calendarData"-->
+<!--                            :sundayStart="true"-->
+<!--                            :hiddenElements="['']"-->
+<!--                            :showWeekNumbers="false"-->
+<!--                            :withTimePicker="false"-->
+<!--                            :is-date-picker="false"-->
+<!--                            :is-multiple-date-picker="true"-->
+<!--                            :is-date-range="false"-->
+<!--                            :min-sel-days="3"-->
+<!--                            :is-dark="false"-->
+<!--                            :date-format="'yyyy-mm-dd'"-->
+<!--                            :is-multiple="true"-->
+<!--                            :calendars-count="2"-->
+<!--                            :isSeparately="true"-->
+<!--                            :with-time-picker="false"-->
+<!--                            :change-month-function="true"-->
+<!--                            :change-year-function="true"-->
+<!--                            :marked-dates="markedDates"-->
+<!--                            :is-auto-closeable="false"-->
+<!--                            :is-modal="false"-->
+<!--                            :change-year-step="5"-->
+<!--                            :is-typeable="true"-->
+<!--                            @choseDay="choseDay"-->
+<!--                            title-position="left"-->
+<!--                            arrows-position="right"-->
+<!--        >-->
+<!--        </FunctionalCalendar>-->
+
+<!--        <FunctionalCalendar class="demo-calendar 2"-->
+<!--                            ref="Calendar"-->
+<!--                            :sundayStart="true"-->
+<!--                            :hiddenElements="['']"-->
+<!--                            :showWeekNumbers="true"-->
+<!--                            :is-date-picker="false"-->
+<!--                            :is-multiple-date-picker="true"-->
+<!--                            :is-date-range="false"-->
+<!--                            :min-sel-days="3"-->
+<!--                            :is-dark="false"-->
+<!--                            :date-format="'yyyy-mm-dd'"-->
+<!--                            :is-multiple="true"-->
+<!--                            :calendars-count="2"-->
+<!--                            :isSeparately="true"-->
+<!--                            :with-time-picker="false"-->
+<!--                            :change-month-function="true"-->
+<!--                            :change-year-function="true"-->
+<!--                            :marked-dates="markedDates"-->
+<!--                            :is-auto-closeable="false"-->
+<!--                            :is-modal="false"-->
+<!--                            :change-year-step="5"-->
+<!--                            :is-typeable="true"-->
+<!--                            @choseDay="choseDay"-->
+<!--                            title-position="left"-->
+<!--                            arrows-position="right"-->
+<!--        >-->
+<!--        </FunctionalCalendar>-->
+
+<!--        <pre>-->
+<!--        {{ calendarData }}-->
+<!--        </pre>-->
+
+<!--        <functional-calendar class="demo-custom-calendar 1"-->
+<!--                             :change-month-function="true"-->
+<!--                             :change-year-function="true"-->
+<!--                             :sundayStart="false"-->
+<!--                             :showWeekNumbers="false"-->
+<!--                             title-position="left"-->
+<!--                             arrows-position="right"-->
+<!--        >-->
+<!--            <template v-slot:default="props">-->
+<!--                <div class="custom-day-container">-->
+<!--                    <div class="custom-day">-->
+<!--                        {{ props.day.day }}-->
+<!--                        <div class="events">-->
+<!--                            <div class="event-item" :class="event.class"-->
+<!--                                 v-for="event in getEventsByDate(props.day.date)" :key="event.id">-->
+<!--                                {{ event.title }}-->
+<!--                            </div>-->
+<!--                        </div>-->
+<!--                    </div>-->
+<!--                </div>-->
+<!--            </template>-->
+<!--        </functional-calendar>-->
+
+<!--        &lt;!&ndash;        <button @click="markedDates2.push('22/3/2020')">Add date</button>&ndash;&gt;-->
+
+
+<!--        <button @click="$refs.Calendar.ChooseDate('2020-10-15')">Choose Date 2020-10-15</button>-->
 
         <!--<FunctionalCalendar class="demo-calendar 3"-->
         <!--ref="Calendar2"-->
@@ -194,6 +205,7 @@
         components: {FunctionalCalendar},
         data() {
             return {
+                demoCalendar1: {},
                 events: [
                     {
                         id: 1,
@@ -306,6 +318,34 @@
                 }
             }
         }
+
+        .footer {
+            display: flex;
+            justify-content: flex-end;
+            margin: 0 5px 5px 0;
+
+            .button {
+                background-color: #4CAF50; /* Green */
+                border: none;
+                color: white;
+                padding: 5px 27px;
+                text-align: center;
+                text-decoration: none;
+                display: inline-block;
+                font-size: 16px;
+
+                &:hover {
+                    cursor: pointer;
+                    -moz-box-shadow:    inset 0 0 10px #436562;
+                    -webkit-box-shadow: inset 0 0 10px #436562;
+                    box-shadow:         inset 0 0 10px #436562;
+                }
+
+                &.is-blue {
+                    background-color: #008CBA;
+                }
+            }
+        }
     }
 
     .demo-custom-calendar {
diff --git a/src/components/FunctionalCalendar.vue b/src/components/FunctionalCalendar.vue
index 79355a8..5eda147 100644
--- a/src/components/FunctionalCalendar.vue
+++ b/src/components/FunctionalCalendar.vue
@@ -126,7 +126,7 @@
                                             </span>
                                         </div>
                                     </div>
-                                    <div class="vfc-week" v-if="calendarItem.weeks.length < 6"
+                                    <div class="vfc-week" v-if="calendarItem.weeks.length < 6 && !fConfigs.isLayoutExpandable"
                                          v-for="moreWeekKey in (6-calendarItem.weeks.length)"
                                          :key="key + moreWeekKey + 'moreWeek'">
                                         <div v-if="fConfigs.showWeekNumbers" class="vfc-day vfc-week-number">
@@ -142,6 +142,7 @@
                             </div>
                         </div>
                     </div>
+                    <slot name="footer"></slot>
                 </div>
             </template>
         </div>
@@ -216,12 +217,7 @@
 
             // Reacts to external selected dates
             this.$watch('value', function (value) {
-                if (this.fConfigs.isDateRange) {
-                    this.calendar.dateRange.start.date = value.dateRange.start.date || false;
-                    this.calendar.dateRange.end.date = value.dateRange.end.date || false
-                } else {
-                    this.calendar.selectedDate = value.selectedDate || false
-                }
+                this.calendar = value;
             }, {deep: true});
 
             this.$watch('showCalendar', function (value) {
diff --git a/src/mixins/propsAndData.js b/src/mixins/propsAndData.js
index b94a3f3..818d1f8 100644
--- a/src/mixins/propsAndData.js
+++ b/src/mixins/propsAndData.js
@@ -122,6 +122,10 @@ export const propsAndData = {
             type: Boolean,
             default: undefined
         },
+        isLayoutExpandable: {
+            type: Boolean,
+            default: undefined
+        },
         titlePosition: {
             type: String,
             default: "center"
@@ -214,6 +218,7 @@ export const propsAndData = {
                 hiddenElements: [],
                 isAutoCloseable: false,
                 isDark: false,
+                isLayoutExpandable: false,
 
                 titlePosition: "center",
                 arrowsPosition: "space-between"

From 1fd59eb5b9726c43a3e65518694ceedb51860029 Mon Sep 17 00:00:00 2001
From: Manuk Minasyan <manuk.minasyan1@gmail.com>
Date: Fri, 1 May 2020 16:58:12 +0400
Subject: [PATCH 2/5] Changed html tags to div, added new prop
 isLayoutExpandable with dynamic content, added slots navigationArrowLeft,
 navigationArrowRight

---
 package.json                          |  2 +-
 src/Demo.vue                          | 14 ++++--
 src/assets/scss/calendar.scss         | 71 +++++++++++++--------------
 src/components/FunctionalCalendar.vue | 41 +++++++++++-----
 4 files changed, 76 insertions(+), 52 deletions(-)

diff --git a/package.json b/package.json
index 67670be..97208cc 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   },
   "name": "vue-functional-calendar",
   "description": "Lightweight, high-performance calendar component based on Vue.js",
-  "version": "2.8.74",
+  "version": "2.8.75",
   "license": "MIT",
   "repository": {
     "type": "git",
diff --git a/src/Demo.vue b/src/Demo.vue
index 15de3a7..fae7d2c 100644
--- a/src/Demo.vue
+++ b/src/Demo.vue
@@ -4,11 +4,13 @@
         <FunctionalCalendar class="demo-calendar dateRangeInputs"
                             ref="demoCalendar1"
                             v-model="demoCalendar1"
-                            :is-modal="true"
+                            :is-modal="false"
                             :is-date-range="true"
                             :is-multiple="true"
                             :isLayoutExpandable="true"
-                            :clanedars-count="2">
+                            :calendars-count="2"
+                            :isSeparately="false"
+                            arrowsPosition="space-between">
             <template v-slot:dateRangeInputs="props">
                 <label for="check-in">
                     <svg width="21" height="23" viewBox="0 0 21 23" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -39,6 +41,12 @@
                            :readonly="!props.isTypeable">
                 </label>
             </template>
+            <template v-slot:navigationArrowLeft>
+                <div>←</div>
+            </template>
+            <template v-slot:navigationArrowRight>
+                <div>→</div>
+            </template>
             <template v-slot:footer>
                 <div class="footer">
                     <a class="button" @click.prevent="$refs.demoCalendar1.showCalendar = false">Apply</a>
@@ -298,7 +306,7 @@
     }
 
     .demo-calendar {
-        width: 400px;
+        width: 600px;
         margin: 100px;
 
         &.dateRangeInputs {
diff --git a/src/assets/scss/calendar.scss b/src/assets/scss/calendar.scss
index 9cc73ae..7f86c85 100644
--- a/src/assets/scss/calendar.scss
+++ b/src/assets/scss/calendar.scss
@@ -139,6 +139,7 @@ input.vfc-single-input {
     .vfc-tags-input-wrapper-default {
       background-color: $mirage;
       border-color: $astronaut;
+
       &.vfc-tags-input {
         .vfc-tags-input-badge {
           background-color: $white;
@@ -568,43 +569,41 @@ input.vfc-single-input {
             margin: 0 20px;
             z-index: 100;
 
-            h2 {
-              &.vfc-top-date {
-                margin: 25px;
-                font-size: 18px;
-                font-weight: normal;
 
-                &.vfc-left {
-                  text-align: left;
-                }
+            .vfc-top-date {
+              margin: 25px;
+              font-size: 18px;
+              font-weight: normal;
 
-                &.vfc-right {
-                  text-align: right;
-                }
+              &.vfc-left {
+                text-align: left;
+              }
 
-                &.vfc-center {
-                  text-align: center;
-                }
+              &.vfc-right {
+                text-align: right;
+              }
 
+              &.vfc-center {
+                text-align: center;
+              }
 
 
-                a {
-                  cursor: default;
-                  text-decoration: unset;
-                  margin: 0 2px;
-                  color: $black;
+              a {
+                cursor: default;
+                text-decoration: unset;
+                margin: 0 2px;
+                color: $black;
 
-                  &.vfc-cursor-pointer {
-                    cursor: pointer;
-                  }
+                &.vfc-cursor-pointer {
+                  cursor: pointer;
+                }
 
-                  &.vfc-underline {
-                    cursor: pointer;
-                    text-decoration: underline $royalblue;
+                &.vfc-underline {
+                  cursor: pointer;
+                  text-decoration: underline $royalblue;
 
-                    &.vfc-underline-active {
-                      text-decoration-color: $black;
-                    }
+                  &.vfc-underline-active {
+                    text-decoration-color: $black;
                   }
                 }
               }
@@ -894,17 +893,15 @@ input.vfc-single-input {
 
         div {
           &.vfc-content {
-            h2 {
-              &.vfc-top-date {
-                a {
-                  color: $white;
+            .vfc-top-date {
+              a {
+                color: $white;
 
-                  &.vfc-underline {
-                    text-decoration: underline $pictionBlue;
+                &.vfc-underline {
+                  text-decoration: underline $pictionBlue;
 
-                    &.vfc-underline-active {
-                      text-decoration-color: $white;
-                    }
+                  &.vfc-underline-active {
+                    text-decoration-color: $white;
                   }
                 }
               }
diff --git a/src/components/FunctionalCalendar.vue b/src/components/FunctionalCalendar.vue
index 5eda147..66eb426 100644
--- a/src/components/FunctionalCalendar.vue
+++ b/src/components/FunctionalCalendar.vue
@@ -51,6 +51,19 @@
             <time-picker v-if="showTimePicker"></time-picker>
             <template v-else>
                 <div class="vfc-calendars-container">
+                    <div class="vfc-separately-navigation-buttons" :class="'vfc-' + fConfigs.arrowsPosition"
+                         v-if="!fConfigs.isSeparately">
+                        <div @click="PreMonth(0)" :class="{'vfc-cursor-pointer': allowPreDate}">
+                            <slot name="navigationArrowLeft">
+                                <div class="vfc-arrow-left" :class="{'vfc-disabled': !allowPreDate}"></div>
+                            </slot>
+                        </div>
+                        <div @click="NextMonth(0)" :class="{'vfc-cursor-pointer': allowNextDate}">
+                            <slot name="navigationArrowRight">
+                                <div class="vfc-arrow-right" :class="{'vfc-disabled': !allowNextDate}"></div>
+                            </slot>
+                        </div>
+                    </div>
                     <div class="vfc-calendars" ref="calendars">
                         <div class="vfc-calendar" v-for="(calendarItem, key) in listCalendars"
                              :key="calendarItem.key">
@@ -60,21 +73,26 @@
                                                :calendar-key="key">
                             </month-year-picker>
                             <div class="vfc-content">
-                                <div class="vfc-separately-navigation-buttons" :class="'vfc-' + fConfigs.arrowsPosition"
-                                     v-if="(!fConfigs.isSeparately && key === 0) || fConfigs.isSeparately">
+                                <div v-if="fConfigs.isSeparately" class="vfc-separately-navigation-buttons"
+                                     :class="'vfc-' + fConfigs.arrowsPosition">
                                     <div @click="PreMonth(key)" :class="{'vfc-cursor-pointer': allowPreDate}">
-                                        <div class="vfc-arrow-left" :class="{'vfc-disabled': !allowPreDate}"></div>
+                                        <slot name="navigationArrowLeft">
+                                            <div class="vfc-arrow-left" :class="{'vfc-disabled': !allowPreDate}"></div>
+                                        </slot>
                                     </div>
                                     <div @click="NextMonth(key)" :class="{'vfc-cursor-pointer': allowNextDate}">
-                                        <div class="vfc-arrow-right" :class="{'vfc-disabled': !allowNextDate}"></div>
+                                        <slot name="navigationArrowRight">
+                                            <div class="vfc-arrow-right"
+                                                 :class="{'vfc-disabled': !allowNextDate}"></div>
+                                        </slot>
                                     </div>
                                 </div>
                                 <transition
                                         tag="div"
                                         :name='getTransition_()' appear>
-                                    <h2 class="vfc-top-date"
-                                        :class="'vfc-' + fConfigs.titlePosition"
-                                        v-if="checkHiddenElement('month')">
+                                    <div class="vfc-top-date"
+                                         :class="'vfc-' + fConfigs.titlePosition"
+                                         v-if="checkHiddenElement('month')">
                                         <a href="#" @click.prevent="openMonthPicker(key+1)"
                                            :class="{'vfc-cursor-pointer vfc-underline':fConfigs.changeMonthFunction, 'vfc-underline-active':showMonthPicker === key+1}">
                                             {{ calendarItem.month }}</a>
@@ -82,12 +100,12 @@
                                            :class="{'vfc-cursor-pointer vfc-underline':fConfigs.changeYearFunction,  'vfc-underline-active':showYearPicker === key+1}">
                                             {{ calendarItem.year }}
                                         </a>
-                                    </h2>
+                                    </div>
                                 </transition>
                                 <transition
                                         tag="div"
                                         :name='getTransition_()' appear>
-                                    <section class="vfc-dayNames">
+                                    <div class="vfc-dayNames">
                                         <span v-if="fConfigs.showWeekNumbers"></span>
                                         <span v-for="(dayName, dayKey) in fConfigs.dayNames" :key="key + dayKey + 1"
                                               class="vfc-day">
@@ -96,7 +114,7 @@
                                             </template>
                                         </span>
 
-                                    </section>
+                                    </div>
                                 </transition>
                                 <transition-group
                                         tag='div'
@@ -126,7 +144,8 @@
                                             </span>
                                         </div>
                                     </div>
-                                    <div class="vfc-week" v-if="calendarItem.weeks.length < 6 && !fConfigs.isLayoutExpandable"
+                                    <div class="vfc-week"
+                                         v-if="calendarItem.weeks.length < 6 && !fConfigs.isLayoutExpandable"
                                          v-for="moreWeekKey in (6-calendarItem.weeks.length)"
                                          :key="key + moreWeekKey + 'moreWeek'">
                                         <div v-if="fConfigs.showWeekNumbers" class="vfc-day vfc-week-number">

From b21dc3752ff0a9dc7575b0eabf4f0d013fa8f1fa Mon Sep 17 00:00:00 2001
From: Manuk Minasyan <manuk.minasyan1@gmail.com>
Date: Fri, 1 May 2020 19:13:22 +0400
Subject: [PATCH 3/5] Changed the calendar SCSS

---
 package.json                  |    2 +-
 src/assets/scss/calendar.scss | 1485 +++++++++++++++++----------------
 2 files changed, 764 insertions(+), 723 deletions(-)

diff --git a/package.json b/package.json
index 97208cc..4059f63 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   },
   "name": "vue-functional-calendar",
   "description": "Lightweight, high-performance calendar component based on Vue.js",
-  "version": "2.8.75",
+  "version": "2.8.76",
   "license": "MIT",
   "repository": {
     "type": "git",
diff --git a/src/assets/scss/calendar.scss b/src/assets/scss/calendar.scss
index 7f86c85..4da3bfd 100644
--- a/src/assets/scss/calendar.scss
+++ b/src/assets/scss/calendar.scss
@@ -1,188 +1,375 @@
 @import './variables.scss';
 
-.vfc-popover-container {
-  &:focus {
+.vfc {
+  &-popover-container {
+    &:focus {
+      outline: none;
+    }
+  }
+
+  &-single-input,
+  &-multiple-input input {
+    font-size: inherit;
+    transition: width 200ms;
+    padding: 7px;
+    width: 120px;
+    color: $silver_chalice;
+    border: 1px solid $gallery;
+    text-align: center;
     outline: none;
   }
-}
-
-input.vfc-single-input, .vfc-multiple-input input {
-  font-size: inherit;
-  transition: width 200ms;
-  padding: 7px;
-  width: 120px;
-  color: $silver_chalice;
-  border: 1px solid $gallery;
-  text-align: center;
-  outline: none;
-}
-
-input.vfc-single-input {
-  border-radius: 10px;
-}
-
-.vfc-multiple-input input:first-child {
-  border-radius: 10px 0 0 10px;
-}
-
-.vfc-multiple-input input:last-child {
-  border-radius: 0 10px 10px 0;
-}
-
-.vfc-tags-input-root {
-  .vfc-tags-input-wrapper-default {
-    width: 295px;
-    padding: 0.5em 0.25em;
-    min-height: 15px;
-    background: $white;
-    border: 1px solid $alto;
+
+  &-single-input {
     border-radius: 10px;
+  }
 
-    &.vfc-tags-input {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
+  &-multiple-input input {
+    &:first-child {
+      border-radius: 10px 0 0 10px;
+    }
 
-      input {
-        flex: 1;
-        background: transparent;
-        border: none;
+    &:last-child {
+      border-radius: 0 10px 10px 0;
+    }
+  }
 
-        &[type="text"] {
-          color: $trout;
-        }
+  &-tags-input {
+    display: -webkit-flex;
+    display: -moz-flex;
+    display: -ms-flex;
+    display: -o-flex;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
 
-        &:focus {
-          outline: none;
-        }
+    input {
+      flex: 1;
+      background: transparent;
+      border: none;
+
+      &[type="text"] {
+        color: $trout;
       }
 
-      span {
-        margin-right: 0.3em;
-        margin-bottom: 0.3em;
-        padding-right: 0.75em;
-        padding-left: 0.6em;
-        border-radius: 10em;
+      &:focus {
+        outline: none;
       }
+    }
 
+    span {
+      margin-right: 0.3em;
+      margin-bottom: 0.3em;
+      padding-right: 0.75em;
+      padding-left: 0.6em;
+      border-radius: 10em;
+    }
 
-      /* Tag badge styles */
-      .vfc-tags-input-badge {
-        width: 85px;
-        background-color: $porcelain;
-        position: relative;
-        display: inline-block;
-        padding: 0.25em 0.4em;
-        font-size: 75%;
-        font-weight: 700;
-        line-height: 1;
-        text-align: center;
-        white-space: nowrap;
-        vertical-align: baseline;
-        border-radius: 0.25em;
-        overflow: hidden;
-        text-overflow: ellipsis;
+    &-wrapper-default {
+      width: 295px;
+      padding: 0.5em 0.25em;
+      min-height: 15px;
+      background: $white;
+      border: 1px solid $alto;
+      border-radius: 10px;
+    }
 
-        .vfc-tags-input-remove {
-          cursor: pointer;
-          position: absolute;
-          display: inline-block;
-          right: 0.3em;
-          top: 0.3em;
-          padding: 0.5em;
-          overflow: hidden;
+    &-badge {
+      width: 85px;
+      background-color: $porcelain;
+      position: relative;
+      display: inline-block;
+      padding: 0.25em 0.4em;
+      font-size: 75%;
+      font-weight: 700;
+      line-height: 1;
+      text-align: center;
+      white-space: nowrap;
+      vertical-align: baseline;
+      border-radius: 0.25em;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
 
-          &:before, &:after {
-            content: "";
-            position: absolute;
-            width: 75%;
-            left: 0.15em;
-            background: $lightred;
-            height: 2px;
-            margin-top: -1px;
-          }
+    &-remove {
+      cursor: pointer;
+      position: absolute;
+      display: inline-block;
+      right: 0.3em;
+      top: 0.3em;
+      padding: 0.5em;
+      overflow: hidden;
 
-          &:after {
-            content: "";
-            position: absolute;
-            width: 75%;
-            left: 0.15em;
-            background: $lightred;
-            height: 2px;
-            margin-top: -1px;
-            transform: rotate(-45deg);
-          }
+      &::before,
+      &::after {
+        content: "";
+        position: absolute;
+        width: 75%;
+        left: 0.15em;
+        background: $lightred;
+        height: 2px;
+        margin-top: -1px;
+        transform: rotate(45deg);
+      }
 
-          &:before {
-            transform: rotate(45deg);
-          }
-        }
+      &::after {
+        transform: rotate(-45deg);
       }
     }
   }
-}
 
-.vfc-dark {
-  &.vfc-multiple-input {
-    input {
+  &-dark {
+    &.vfc-multiple-input {
+      input {
+        border-color: $astronaut;
+        background-color: $mirage
+      }
+    }
+
+    .vfc-single-input {
       border-color: $astronaut;
       background-color: $mirage
     }
-  }
 
-  .vfc-single-input {
-    border-color: $astronaut;
-    background-color: $mirage
+    &.vfc-tags-input-root {
+      .vfc-tags-input-wrapper-default {
+        background-color: $mirage;
+        border-color: $astronaut;
+
+        &.vfc-tags-input {
+          .vfc-tags-input-badge {
+            background-color: $white;
+          }
+        }
+      }
+    }
   }
 
-  &.vfc-tags-input-root {
-    .vfc-tags-input-wrapper-default {
+  &-main-container {
+    position: relative;
+    border-radius: .28571429rem;
+    box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.25);
+    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", serif;
+    background-color: $white;
+    user-select: none;
+    box-sizing: border-box;
+
+    &.vfc-modal {
+      position: absolute;
+      width: inherit;
+      z-index: 1000;
+    }
+
+    > * {
+      box-sizing: border-box;
+    }
+
+    &.vfc-dark {
       background-color: $mirage;
-      border-color: $astronaut;
 
-      &.vfc-tags-input {
-        .vfc-tags-input-badge {
-          background-color: $white;
+      .vfc-navigation-buttons,
+      .vfc-separately-navigation-buttons {
+        div {
+
+          .vfc-arrow-right,
+          .vfc-arrow-left {
+            border-color: $white
+          }
+
+          .vfc-arrow-left:active,
+          .vfc-arrow-right:active {
+            border-color: $lightgrey;
+          }
         }
       }
-    }
-  }
-}
 
-.vfc-main-container {
-  position: relative;
-  border-radius: .28571429rem;
-  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.25);
-  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", serif;
-  background-color: $white;
-  user-select: none;
+      .vfc-calendars {
+        .vfc-calendar {
 
-  &.vfc-modal {
-    position: absolute;
-    width: inherit;
-    z-index: 1000;
-  }
+          .vfc-months-container {
+            .vfc-content {
+              background-color: $white;
 
-  .vfc-time-picker-container {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
+              .vfc-navigation-buttons {
+                div {
 
-    .vfc-time-picker {
-      box-sizing: border-box;
+                  .vfc-arrow-left,
+                  .vfc-arrow-right {
+                    border-color: $black;
+                  }
+                }
 
-      &::after {
-        content: '';
-        display: table;
-        clear: both;
+                .vfc-top-date {
+                  color: $black;
+
+                  .vfc-popover-caret {
+                    background-color: $white;
+                  }
+
+                  &.vfc-underline {
+                    text-decoration: underline dotted $royalblue;
+                  }
+                }
+              }
+
+              .vfc-months {
+                div.vfc-item {
+                  color: $black;
+
+                  &:hover {
+                    background-color: rgba(113, 113, 113, 0.3);
+                  }
+
+                  &.vfc-selected {
+                    background-color: $pictionBlue;
+                    color: $white;
+                  }
+                }
+              }
+            }
+          }
+
+          div {
+            &.vfc-content {
+              .vfc-top-date {
+                a {
+                  color: $white;
+
+                  &.vfc-underline {
+                    text-decoration: underline $pictionBlue;
+
+                    &.vfc-underline-active {
+                      text-decoration-color: $white;
+                    }
+                  }
+                }
+              }
+
+              .vfc-dayNames {
+                span {
+                  color: $gainsboro;
+                }
+              }
+
+              .vfc-week {
+                .vfc-week-number {
+                  border-color: $keppel;
+                }
+
+                div {
+                  &.vfc-day {
+
+                    .vfc-base-start,
+                    .vfc-base-end {
+                      background-color: $astronaut;
+                    }
+
+                    span.vfc-span-day {
+                      color: $white;
+
+                      &.vfc-today {
+                        background-color: $keppel;
+                        color: $white;
+                      }
+
+                      &.vfc-marked {
+                        background-color: $pictionBlue;
+
+                        &.vfc-borderd,
+                        &.vfc-start-marked,
+                        &.vfc-end-marked {
+                          color: $white;
+                        }
+
+                        &:before {
+                          background-color: $astronaut;
+                        }
+
+                        &:after {
+                          color: $black;
+                        }
+
+                        &.vfc-hide {
+                          color: $gainsboro;
+                        }
+                      }
+
+                      &.vfc-hide {
+                        color: $tundora;
+                      }
+
+                      &.vfc-disabled {
+                        color: rgba(133, 133, 133, 0.2);
+                      }
+
+                      &:after {
+                        color: $black;
+                      }
+
+                      &.vfc-hover:hover,
+                      &.vfc-hovered {
+                        z-index: 1;
+                        background-color: $charade;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
       }
 
-      & * {
-        box-sizing: border-box;
+
+      .vfc-time-picker-container {
+        .vfc-time-picker__list {
+
+          .vfc-time-picker__item {
+            color: $white;
+          }
+
+          .vfc-time-picker__item--selected {
+            color: $pictionBlue;
+          }
+
+          &::-webkit-scrollbar-track {
+            background: $astronaut;
+          }
+
+          &::-webkit-scrollbar-thumb {
+            background: $pictionBlue;
+          }
+        }
+
+
+        .vfc-close:before,
+        .vfc-close:after {
+          background-color: $white;
+        }
+
+        .vfc-modal-time-mechanic {
+          .vfc-modal-time-line {
+            background-color: $pictionBlue;
+            color: $white;
+          }
+        }
       }
     }
+  }
+
+  &-time-picker {
+    &::after {
+      content: '';
+      display: table;
+      clear: both;
+    }
 
-    .vfc-time-picker__list {
+    &-container {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    &__list {
       float: left;
       width: 50%;
       height: 200px;
@@ -199,72 +386,74 @@ input.vfc-single-input {
       &::-webkit-scrollbar-thumb {
         background: $silver;
       }
-    }
 
-    .vfc-time-picker__with-suffix .vfc-time-picker__list {
-      width: 33.3%;
+      .vfc-time-picker__with-suffix & {
+        width: 33.333333%;
+      }
     }
 
-    .vfc-time-picker__item {
+    &__item {
       padding: 10px 0;
       font-size: 20px;
       text-align: center;
       cursor: pointer;
       transition: font-size .3s;
-    }
-
-    .vfc-time-picker__item:hover {
-      font-size: 32px;
-    }
 
-    .vfc-time-picker__item--selected {
-      color: $royalblue;
-      font-size: 32px;
-    }
+      &:hover {
+        font-size: 32px;
+      }
 
-    .vfc-time-picker__item--disabled {
-      opacity: 0.4;
-      cursor: default;
-      font-size: 20px !important;
-    }
+      &--selected {
+        color: $royalblue;
+        font-size: 32px;
+      }
 
-    .vfc-close {
-      position: absolute;
-      right: 12px;
-      top: 16px;
-      width: 32px;
-      height: 32px;
-      opacity: 0.3;
-      z-index: 10000;
+      &--disabled {
+        opacity: 0.4;
+        cursor: default;
+        font-size: 20px !important;
+      }
     }
+  }
 
-    .vfc-close:hover {
+  &-close {
+    position: absolute;
+    right: 12px;
+    top: 16px;
+    width: 32px;
+    height: 32px;
+    opacity: 0.3;
+    z-index: 100;
+
+    &:hover {
       opacity: 1;
     }
 
-    .vfc-close:before, .vfc-close:after {
+    &::before,
+    &::after {
       position: absolute;
       left: 15px;
       content: ' ';
       height: 26px;
       width: 2px;
       background-color: $white;
-    }
-
-    .vfc-close:before {
       transform: rotate(45deg);
     }
 
-    .vfc-close:after {
+    &::after {
       transform: rotate(-45deg);
     }
+  }
 
-    .vfc-modal-time-mechanic {
-      position: relative;
-      margin: 0 auto;
-      width: 100%;
+  &-modal {
+    &-time {
+      &-mechanic {
+        position: relative;
+        margin: 0 auto;
+        width: 100%;
+      }
 
-      .vfc-modal-time-line {
+      &-line {
         width: 100%;
         background-color: $royalblue;
         text-align: left;
@@ -284,48 +473,23 @@ input.vfc-single-input {
       }
     }
 
-    .vfc-modal-append {
+    &-append {
       color: $boulder;
       font-weight: normal;
       display: flex;
       justify-content: space-between;
-
-      .vfc-arrow {
-        opacity: 0.3;
-        transition: 0.2s;
-      }
-
-      .vfc-arrow:hover {
-        opacity: 1;
-      }
-
-      .vfc-arrow-up {
-        width: 0;
-        height: 0;
-        border-left: 20px solid transparent;
-        border-right: 20px solid transparent;
-        border-bottom: 20px solid #333333;
-      }
-
-      .vfc-arrow-down {
-        width: 0;
-        height: 0;
-        border-left: 20px solid transparent;
-        border-right: 20px solid transparent;
-        border-top: 20px solid #333333;
-      }
     }
 
-    .vfc-modal-midle {
+    &-midle {
       display: inline-block;
-    }
 
-    .vfc-modal-midle-dig {
-      display: inline-block;
-      text-align: center;
+      &-dig {
+        display: inline-block;
+        text-align: center;
+      }
     }
 
-    .vfc-modal-digits {
+    &-digits {
       display: flex;
       justify-content: space-between;
       font-size: 50px;
@@ -339,11 +503,42 @@ input.vfc-single-input {
     }
   }
 
-  .vfc-separately-navigation-buttons {
+  &-arrow {
+    opacity: 0.3;
+    transition: 0.2s;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &-up {
+      width: 0;
+      height: 0;
+      border-left: 20px solid transparent;
+      border-right: 20px solid transparent;
+      border-bottom: 20px solid #333333;
+    }
+
+    &-down {
+      width: 0;
+      height: 0;
+      border-left: 20px solid transparent;
+      border-right: 20px solid transparent;
+      border-top: 20px solid #333333;
+    }
+  }
+
+  &-separately-navigation-buttons {
     margin-bottom: -80px;
   }
 
-  .vfc-navigation-buttons, .vfc-separately-navigation-buttons {
+  &-navigation-buttons {
+    width: 100%;
+    position: absolute;
+  }
+
+  &-navigation-buttons,
+  &-separately-navigation-buttons {
     flex: 0 1 15%;
     margin-top: -10px;
     display: flex;
@@ -386,7 +581,8 @@ input.vfc-single-input {
         border-color: #ddd;
       }
 
-      .vfc-arrow-left, .vfc-arrow-right {
+      .vfc-arrow-left,
+      .vfc-arrow-right {
         &.vfc-disabled {
           border-color: #dddddd;
         }
@@ -401,429 +597,266 @@ input.vfc-single-input {
         transform: rotate(45deg);
       }
     }
-
   }
 
-  .vfc-calendars-container {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
+  &-calendar {
     position: relative;
-    overflow: hidden;
+    flex: 1;
+    height: auto;
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: stretch;
 
-    .vfc-navigation-buttons {
-      width: 100%;
-      position: absolute;
+    .vfc-content {
+      margin-bottom: 20px;
     }
 
-    .vfc-calendars {
+    &s {
       flex: 1 1 75%;
       display: flex;
       flex-wrap: wrap;
 
-      .vfc-calendar {
-        position: relative;
-        flex: 1;
-        height: auto;
+      &-container {
         display: flex;
-        flex-flow: column nowrap;
-        align-items: stretch;
-
-        .vfc-months-container {
-          display: flex;
-          flex-direction: row;
-          margin-left: -20px;
-
-          &.vfc-left {
-            justify-content: flex-start;
-            margin-left: 0;
+        flex-direction: column;
+        height: 100%;
+        position: relative;
+        overflow: hidden;
+      }
+    }
 
-            .vfc-content {
-              .vfc-navigation-buttons {
-                .vfc-top-date {
-                  .vfc-popover-caret {
-                    left: 45px;
-                  }
-                }
-              }
-            }
-          }
+    &-fade-enter-active,
+    &-fade-leave-active,
+    &-slide-down-enter-active,
+    &-slide-down-leave-active,
+    &-slide-left-enter-active,
+    &-slide-left-leave-active,
+    &-slide-right-enter-active,
+    &-slide-right-leave-active,
+    &-slide-up-enter-active,
+    &-slide-up-leave-active {
+      transition: all 0.25s ease-in-out
+    }
 
-          &.vfc-center {
-            justify-content: center;
-          }
+    &-fade-leave-active,
+    &-none-leave-active,
+    &-slide-down-leave-active,
+    &-slide-left-leave-active,
+    &-slide-right-leave-active,
+    &-slide-up-leave-active {
+      position: absolute
+    }
 
-          &.vfc-right {
-            justify-content: flex-end;
+    &-none-enter-active,
+    &-none-leave-active {
+      transition-duration: 0s
+    }
 
-            .vfc-content {
-              .vfc-navigation-buttons {
-                .vfc-top-date {
-                  .vfc-popover-caret {
-                    left: calc(100% - 90px);
-                  }
-                }
-              }
-            }
-          }
+    &-slide-left-enter,
+    &-slide-right-leave-to {
+      opacity: 0;
+      -webkit-transform: translateX(25px);
+      transform: translateX(25px)
+    }
 
-          .vfc-content {
-            width: 45%;
-            position: absolute;
-            z-index: 1000;
-            background-color: $licorice;
-            border: 1px solid;
-            border-radius: 5px;
-            top: 55px;
-            color: $white;
-            padding: 5px 0;
+    &-slide-left-leave-to,
+    &-slide-right-enter {
+      opacity: 0;
+      -webkit-transform: translateX(-25px);
+      transform: translateX(-25px)
+    }
 
-            .vfc-navigation-buttons {
-              position: unset;
-              display: flex;
-              justify-content: space-between;
+    &-slide-down-leave-to,
+    &-slide-up-enter {
+      opacity: 0;
+      -webkit-transform: translateY(20px);
+      transform: translateY(20px)
+    }
 
-              div {
-                margin: 10px 10px;
+    &-slide-down-enter,
+    &-slide-up-leave-to {
+      opacity: 0;
+      -webkit-transform: translateY(-20px);
+      transform: translateY(-20px)
+    }
+  }
 
-                .vfc-arrow-left, .vfc-arrow-right {
-                  border-color: $white;
-                  width: 8px;
-                  height: 8px;
-                  cursor: pointer;
+  &-months {
+    flex: 1 1 75%;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
 
-                  &:hover {
-                    border-color: $pictionBlue;
-                  }
-                }
-              }
+    .vfc-item {
+      flex: 1;
+      flex-basis: 30%;
+      margin: 3px;
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      text-align: center;
+      outline-style: none;
+      border-radius: 5px;
 
-              .vfc-top-date {
-                font-size: 18px;
-                font-weight: bold;
-                margin: 0;
-                display: flex;
-                flex-direction: row;
-                justify-content: center;
-
-                .vfc-popover-caret {
-                  content: "";
-                  position: absolute;
-                  display: block;
-                  width: 12px;
-                  height: 12px;
-                  border-top: inherit;
-                  border-left: inherit;
-                  background: inherit;
-                  z-index: -1;
-                  background-color: $licorice;
-                  transform: translateY(-40%) rotate(45deg);
-                  top: 0;
-                  left: 50%;
-                }
+      &:hover {
+        background-color: rgba(113, 113, 113, 0.3);
+        transition: background-color 0.2s ease-in-out;
+        cursor: pointer;
+      }
 
+      &.vfc-selected {
+        background-color: $pictionBlue;
+        color: $white;
+        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+      }
+    }
 
-                &.vfc-underline {
-                  cursor: pointer;
-                  text-decoration: underline dotted $royalblue;
-                }
-              }
-            }
+    &-container {
+      display: flex;
+      flex-direction: row;
+      margin-left: -20px;
 
-            .vfc-months {
-              flex: 1 1 75%;
-              padding: 0;
-              display: flex;
-              flex-wrap: wrap;
-              justify-content: space-between;
-
-              div.vfc-item {
-                flex: 1;
-                flex-basis: 30%;
-                margin: 3px;
-                display: flex;
-                justify-content: center;
-                flex-direction: column;
-                text-align: center;
-                outline-style: none;
-                border-radius: 5px;
-
-                &:hover {
-                  background-color: rgba(113, 113, 113, 0.3);
-                  transition: background-color 0.2s ease-in-out;
-                  cursor: pointer;
-                }
+      &.vfc-left {
+        justify-content: flex-start;
+        margin-left: 0;
 
-                &.vfc-selected {
-                  background-color: $pictionBlue;
-                  color: $white;
-                  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-                }
+        .vfc-content {
+          .vfc-navigation-buttons {
+            .vfc-top-date {
+              .vfc-popover-caret {
+                left: 45px;
               }
             }
           }
         }
+      }
 
-        div {
-          &.vfc-content {
-            margin: 0 20px;
-            z-index: 100;
-
+      &.vfc-left {
+        justify-content: flex-start;
+        margin-left: 0;
 
+        .vfc-content {
+          .vfc-navigation-buttons {
             .vfc-top-date {
-              margin: 25px;
-              font-size: 18px;
-              font-weight: normal;
-
-              &.vfc-left {
-                text-align: left;
-              }
-
-              &.vfc-right {
-                text-align: right;
-              }
-
-              &.vfc-center {
-                text-align: center;
+              .vfc-popover-caret {
+                left: 45px;
               }
-
-
-              a {
-                cursor: default;
-                text-decoration: unset;
-                margin: 0 2px;
-                color: $black;
-
-                &.vfc-cursor-pointer {
-                  cursor: pointer;
-                }
-
-                &.vfc-underline {
-                  cursor: pointer;
-                  text-decoration: underline $royalblue;
-
-                  &.vfc-underline-active {
-                    text-decoration-color: $black;
-                  }
-                }
-              }
-            }
-
-            /* Calendar rows */
-            .vfc-dayNames, .vfc-week {
-              display: flex;
             }
+          }
+        }
+      }
 
-            .vfc-dayNames {
-              flex: 30px 0 0;
-              margin-bottom: 10px;
+      &.vfc-center {
+        justify-content: center;
+      }
 
-              span {
-                width: 100%;
-                margin-right: 5px;
-                color: $mineShaft;
-                text-align: center;
+      &.vfc-right {
+        justify-content: flex-end;
 
-                &:last-child {
-                  margin-right: 0
-                }
+        .vfc-content {
+          .vfc-navigation-buttons {
+            .vfc-top-date {
+              .vfc-popover-caret {
+                left: calc(100% - 90px);
               }
             }
+          }
+        }
+      }
 
-            .vfc-week {
-              .vfc-week-number {
-                border-right: 1px solid $lightred;
-              }
-
-              div {
-                &.vfc-day {
-                  position: relative;
-                  width: 100%;
-                  display: flex;
-                  flex-direction: column;
-                  margin-top: 3px;
-
-                  .vfc-base-start, .vfc-base-end {
-                    position: absolute;
-                    background: $lightskyblue;
-                    width: 50% !important;
-                    border-radius: 0 !important;
-                    border-right-width: 0 !important;
-                    height: 100%;
-                  }
-
-                  .vfc-base-start {
-                    right: 0;
-                  }
-
-                  .vfc-base-end {
-                    left: 0;
-                  }
-
-                  span.vfc-span-day {
-                    display: inline-block;
-                    text-align: center;
-                    width: 30px;
-                    line-height: 30px;
-                    border-radius: 50%;
-                    margin: 0 auto;
-                    vertical-align: middle;
-
-                    &.vfc-today {
-                      background-color: $lightred;
-                      color: $white;
-                    }
-
-                    &.vfc-cursor-not-allowed {
-                      cursor: not-allowed
-                    }
-
-                    &.vfc-marked {
-                      margin: auto;
-                      background-color: $royalblue;
-                      border-radius: 50%;
-                      opacity: 1;
-                      z-index: 1;
-
-                      &.vfc-borderd, &.vfc-start-marked, &.vfc-end-marked {
-                        color: $white;
-
-                        &:before {
-                          background: transparent;
-                        }
-                      }
-
-                      &:before {
-                        top: 0;
-                        left: 0;
-                        content: "";
-                        position: absolute;
-                        background-color: $lightskyblue;
-                        width: 100%;
-                        height: 100%;
-                        z-index: -1;
-                      }
-
-                      &:after {
-                        color: $black;
-                      }
-
-                      &.vfc-hide {
-                        color: $lightgrey;
-
-                        &:after {
-
-                        }
-                      }
-                    }
-
-                    &.vfc-hide {
-                      color: $gainsboro;
-
-                      &:after {
-
-                      }
-                    }
-
-                    &.vfc-disabled {
-                      margin: auto;
-                      color: rgba(0, 0, 0, 0.2);
-                      border-radius: 50%;
-                      opacity: 1;
-                      z-index: 2;
-                    }
-
-                    &:after {
-                      z-index: 2;
-                      position: absolute;
-                      top: 0;
-                      left: 0;
-                      bottom: 0;
-                      right: 0;
-                      content: attr(data-date);
-                      color: $black;
-                      display: flex;
-                      justify-content: center;
-                      align-items: center;
-                    }
+      .vfc-content {
+        width: 45%;
+        position: absolute;
+        z-index: 1000;
+        background-color: $licorice;
+        border: 1px solid;
+        border-radius: 5px;
+        top: 55px;
+        color: $white;
+        padding: 5px 0;
 
-                    &.vfc-hover:hover, &.vfc-hovered {
-                      background-color: $lightgreyHover;
-                      z-index: 100;
-                    }
-                  }
+        .vfc-navigation-buttons {
+          position: unset;
+          display: flex;
+          justify-content: space-between;
 
+          div {
+            margin: 10px 10px;
 
-                  /* Weekends */
-                  &:last-child {
-                    color: $black;
-                  }
+            .vfc-arrow-left,
+            .vfc-arrow-right {
+              border-color: $white;
+              width: 8px;
+              height: 8px;
+              cursor: pointer;
 
-                }
+              &:hover {
+                border-color: $pictionBlue;
               }
             }
+          }
 
-            .vfc-calendar-fade-enter-active,
-            .vfc-calendar-fade-leave-active,
-            .vfc-calendar-slide-down-enter-active,
-            .vfc-calendar-slide-down-leave-active,
-            .vfc-calendar-slide-left-enter-active,
-            .vfc-calendar-slide-left-leave-active,
-            .vfc-calendar-slide-right-enter-active,
-            .vfc-calendar-slide-right-leave-active,
-            .vfc-calendar-slide-up-enter-active,
-            .vfc-calendar-slide-up-leave-active {
-              transition: all 0.25s ease-in-out
-            }
+          .vfc-top-date {
+            font-size: 18px;
+            font-weight: bold;
+            margin: 0;
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
 
-            .vfc-calendar-fade-leave-active,
-            .vfc-calendar-none-leave-active,
-            .vfc-calendar-slide-down-leave-active,
-            .vfc-calendar-slide-left-leave-active,
-            .vfc-calendar-slide-right-leave-active,
-            .vfc-calendar-slide-up-leave-active {
-              position: absolute
+            .vfc-popover-caret {
+              content: "";
+              position: absolute;
+              display: block;
+              width: 12px;
+              height: 12px;
+              border-top: inherit;
+              border-left: inherit;
+              background: inherit;
+              z-index: -1;
+              background-color: $licorice;
+              transform: translateY(-40%) rotate(45deg);
+              top: 0;
+              left: 50%;
             }
 
-            .vfc-calendar-none-enter-active,
-            .vfc-calendar-none-leave-active {
-              transition-duration: 0s
-            }
 
-            .vfc-calendar-slide-left-enter,
-            .vfc-calendar-slide-right-leave-to {
-              opacity: 0;
-              -webkit-transform: translateX(25px);
-              transform: translateX(25px)
+            &.vfc-underline {
+              cursor: pointer;
+              text-decoration: underline dotted $royalblue;
             }
+          }
+        }
 
-            .vfc-calendar-slide-left-leave-to,
-            .vfc-calendar-slide-right-enter {
-              opacity: 0;
-              -webkit-transform: translateX(-25px);
-              transform: translateX(-25px)
-            }
+        .vfc-months {
+          flex: 1 1 75%;
+          padding: 0;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-between;
+
+          div.vfc-item {
+            flex: 1;
+            flex-basis: 30%;
+            margin: 3px;
+            display: flex;
+            justify-content: center;
+            flex-direction: column;
+            text-align: center;
+            outline-style: none;
+            border-radius: 5px;
 
-            .vfc-calendar-slide-down-leave-to,
-            .vfc-calendar-slide-up-enter {
-              opacity: 0;
-              -webkit-transform: translateY(20px);
-              transform: translateY(20px)
+            &:hover {
+              background-color: rgba(113, 113, 113, 0.3);
+              transition: background-color 0.2s ease-in-out;
+              cursor: pointer;
             }
 
-            .vfc-calendar-slide-down-enter,
-            .vfc-calendar-slide-up-leave-to {
-              opacity: 0;
-              -webkit-transform: translateY(-20px);
-              transform: translateY(-20px)
-            }
-          }
-        }
-
-        &:last-child {
-          div {
-            &.vfc-content {
-              margin-bottom: 20px;
+            &.vfc-selected {
+              background-color: $pictionBlue;
+              color: $white;
+              text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
             }
           }
         }
@@ -831,185 +864,193 @@ input.vfc-single-input {
     }
   }
 
-  &.vfc-dark {
-    background-color: $mirage;
+  &-content {
+    margin: 0 20px;
+    z-index: 100;
+  }
 
-    .vfc-navigation-buttons, .vfc-separately-navigation-buttons {
-      div {
-        .vfc-arrow-right, .vfc-arrow-left {
-          border-color: $white
-        }
+  &-top-date {
+    margin: 25px;
+    font-size: 18px;
+    font-weight: normal;
 
-        .vfc-arrow-left:active,
-        .vfc-arrow-right:active {
-          border-color: $lightgrey;
-        }
-      }
+    &.vfc-left {
+      text-align: left;
     }
 
-    .vfc-calendars {
-      .vfc-calendar {
-
-        .vfc-months-container {
-          .vfc-content {
-            background-color: $white;
-
-            .vfc-navigation-buttons {
-              div {
-                .vfc-arrow-left, .vfc-arrow-right {
-                  border-color: $black;
-                }
-              }
+    &.vfc-right {
+      text-align: right;
+    }
 
-              .vfc-top-date {
-                color: $black;
+    &.vfc-center {
+      text-align: center;
+    }
 
-                .vfc-popover-caret {
-                  background-color: $white;
-                }
 
-                &.vfc-underline {
-                  text-decoration: underline dotted $royalblue;
-                }
-              }
-            }
+    a {
+      cursor: default;
+      text-decoration: unset;
+      margin: 0 2px;
+      color: $black;
 
-            .vfc-months {
-              div.vfc-item {
-                color: $black;
+      &.vfc-cursor-pointer {
+        cursor: pointer;
+      }
 
-                &:hover {
-                  background-color: rgba(113, 113, 113, 0.3);
-                }
+      &.vfc-underline {
+        cursor: pointer;
+        text-decoration: underline $royalblue;
 
-                &.vfc-selected {
-                  background-color: $pictionBlue;
-                  color: $white;
-                }
-              }
-            }
-          }
+        &.vfc-underline-active {
+          text-decoration-color: $black;
         }
+      }
+    }
+  }
 
-        div {
-          &.vfc-content {
-            .vfc-top-date {
-              a {
-                color: $white;
-
-                &.vfc-underline {
-                  text-decoration: underline $pictionBlue;
-
-                  &.vfc-underline-active {
-                    text-decoration-color: $white;
-                  }
-                }
-              }
-            }
-
-            .vfc-dayNames {
-              span {
-                color: $gainsboro;
-              }
-            }
-
-            .vfc-week {
-              .vfc-week-number {
-                border-color: $keppel;
-              }
-
-              div {
-                &.vfc-day {
+  &-dayNames,
+  &-week {
+    display: flex;
+  }
 
-                  .vfc-base-start, .vfc-base-end {
-                    background-color: $astronaut;
-                  }
+  &-dayNames {
+    flex: 30px 0 0;
+    margin-bottom: 10px;
 
-                  span.vfc-span-day {
-                    color: $white;
+    span {
+      width: 100%;
+      margin-right: 5px;
+      color: $mineShaft;
+      text-align: center;
 
-                    &.vfc-today {
-                      background-color: $keppel;
-                      color: $white;
-                    }
+      &:last-child {
+        margin-right: 0
+      }
+    }
+  }
 
-                    &.vfc-marked {
-                      background-color: $pictionBlue;
+  &-week {
+    &-number {
+      border-right: 1px solid $lightred;
+    }
 
-                      &.vfc-borderd, &.vfc-start-marked, &.vfc-end-marked {
-                        color: $white;
-                      }
+    .vfc-day {
+      position: relative;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      margin-top: 3px;
+
+      .vfc-base-start,
+      .vfc-base-end {
+        position: absolute;
+        background: $lightskyblue;
+        width: 50% !important;
+        border-radius: 0 !important;
+        border-right-width: 0 !important;
+        height: 100%;
+      }
 
-                      &:before {
-                        background-color: $astronaut;
-                      }
+      .vfc-base-start {
+        right: 0;
+      }
 
-                      &:after {
-                        color: $black;
-                      }
+      .vfc-base-end {
+        left: 0;
+      }
 
-                      &.vfc-hide {
-                        color: $gainsboro;
-                      }
-                    }
+      span.vfc-span-day {
+        display: inline-block;
+        text-align: center;
+        width: 30px;
+        line-height: 30px;
+        border-radius: 50%;
+        margin: 0 auto;
+        vertical-align: middle;
+
+        &.vfc-today {
+          background-color: $lightred;
+          color: $white;
+        }
 
-                    &.vfc-hide {
-                      color: $tundora;
-                    }
+        &.vfc-cursor-not-allowed {
+          cursor: not-allowed
+        }
 
-                    &.vfc-disabled {
-                      color: rgba(133, 133, 133, 0.2);
-                    }
+        &.vfc-marked {
+          margin: auto;
+          background-color: $royalblue;
+          border-radius: 50%;
+          opacity: 1;
+          z-index: 1;
 
-                    &:after {
-                      color: $black;
-                    }
+          &.vfc-borderd,
+          &.vfc-start-marked,
+          &.vfc-end-marked {
+            color: $white;
 
-                    &.vfc-hover:hover, &.vfc-hovered {
-                      z-index: 1;
-                      background-color: $charade;
-                    }
-                  }
-                }
-              }
+            &:before {
+              background: transparent;
             }
           }
-        }
-      }
-    }
 
+          &:before {
+            top: 0;
+            left: 0;
+            content: "";
+            position: absolute;
+            background-color: $lightskyblue;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+          }
 
-    .vfc-time-picker-container {
-      .vfc-time-picker__list {
+          &:after {
+            color: $black;
+          }
 
-        .vfc-time-picker__item {
-          color: $white;
+          &.vfc-hide {
+            color: $lightgrey;
+          }
         }
 
-        .vfc-time-picker__item--selected {
-          color: $pictionBlue;
+        &.vfc-hide {
+          color: $gainsboro;
         }
 
-        &::-webkit-scrollbar-track {
-          background: $astronaut;
+        &.vfc-disabled {
+          margin: auto;
+          color: rgba(0, 0, 0, 0.2);
+          border-radius: 50%;
+          opacity: 1;
+          z-index: 2;
         }
 
-        &::-webkit-scrollbar-thumb {
-          background: $pictionBlue;
+        &:after {
+          z-index: 2;
+          position: absolute;
+          top: 0;
+          left: 0;
+          bottom: 0;
+          right: 0;
+          content: attr(data-date);
+          color: $black;
+          display: flex;
+          justify-content: center;
+          align-items: center;
         }
-      }
-
 
-      .vfc-close:before, .vfc-close:after {
-        background-color: $white;
+        &.vfc-hover:hover,
+        &.vfc-hovered {
+          background-color: $lightgreyHover;
+          z-index: 100;
+        }
       }
 
-      .vfc-modal-time-mechanic {
-        .vfc-modal-time-line {
-          background-color: $pictionBlue;
-          color: $white;
-        }
+      /* Weekends */
+      &:last-child {
+        color: $black;
       }
     }
   }
-}
+}
\ No newline at end of file

From 43f34a6ca01ab7d2f100a171d46831f9dae946af Mon Sep 17 00:00:00 2001
From: Manuk Minasyan <manuk.minasyan1@gmail.com>
Date: Fri, 1 May 2020 19:14:38 +0400
Subject: [PATCH 4/5] Changed version to 2.8.77

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 4059f63..b75f3f5 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   },
   "name": "vue-functional-calendar",
   "description": "Lightweight, high-performance calendar component based on Vue.js",
-  "version": "2.8.76",
+  "version": "2.8.77",
   "license": "MIT",
   "repository": {
     "type": "git",

From 25289cd58a1cf22c341303c413627e6953d37509 Mon Sep 17 00:00:00 2001
From: Manuk Minasyan <manuk.minasyan1@gmail.com>
Date: Sat, 2 May 2020 16:14:17 +0400
Subject: [PATCH 5/5] Solved problem connected with v-model

---
 package.json                          |  2 +-
 src/Demo.vue                          |  5 +++--
 src/components/FunctionalCalendar.vue | 17 ++++++++++++-----
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index b75f3f5..c2a0322 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   },
   "name": "vue-functional-calendar",
   "description": "Lightweight, high-performance calendar component based on Vue.js",
-  "version": "2.8.77",
+  "version": "2.8.79",
   "license": "MIT",
   "repository": {
     "type": "git",
diff --git a/src/Demo.vue b/src/Demo.vue
index fae7d2c..63799de 100644
--- a/src/Demo.vue
+++ b/src/Demo.vue
@@ -4,7 +4,7 @@
         <FunctionalCalendar class="demo-calendar dateRangeInputs"
                             ref="demoCalendar1"
                             v-model="demoCalendar1"
-                            :is-modal="false"
+                            :is-modal="true"
                             :is-date-range="true"
                             :is-multiple="true"
                             :isLayoutExpandable="true"
@@ -213,7 +213,8 @@
         components: {FunctionalCalendar},
         data() {
             return {
-                demoCalendar1: {},
+                demoCalendar1: {
+                },
                 events: [
                     {
                         id: 1,
diff --git a/src/components/FunctionalCalendar.vue b/src/components/FunctionalCalendar.vue
index 66eb426..3327a59 100644
--- a/src/components/FunctionalCalendar.vue
+++ b/src/components/FunctionalCalendar.vue
@@ -236,8 +236,10 @@
 
             // Reacts to external selected dates
             this.$watch('value', function (value) {
-                this.calendar = value;
-            }, {deep: true});
+                if (value.hasOwnProperty('dateRange')) {
+                    this.calendar = value;
+                }
+            }, {immediate: true, deep: true});
 
             this.$watch('showCalendar', function (value) {
                 if (value)
@@ -566,12 +568,17 @@
                         this.showCalendar = false;
                     }
                 } else if (this.fConfigs.isMultipleDatePicker) {
-                    if (this.calendar.selectedDates.find(date => date.date === item.date)) {
+                    if (this.calendar.hasOwnProperty('selectedDates') && this.calendar.selectedDates.find(date => date.date === item.date)) {
                         let dateIndex = this.calendar.selectedDates.findIndex(date => date.date === item.date);
                         this.calendar.selectedDates.splice(dateIndex, 1);
                     } else {
                         let date = Object.assign({}, this.defaultDateFormat);
                         date.date = item.date;
+
+                        if(!this.calendar.hasOwnProperty('selectedDates')) {
+                            this.calendar.selectedDates = [];
+                        }
+
                         this.calendar.selectedDates.push(date);
                     }
 
@@ -609,7 +616,7 @@
                                 if (this.calendar.selectedDate === day.date)
                                     day.isMarked = true;
                             } else if (vm.fConfigs.isMultipleDatePicker) {
-                                if (vm.calendar.selectedDates.find(date => date.date === day.date))
+                                if (vm.calendar.hasOwnProperty('selectedDates') && vm.calendar.selectedDates.find(date => date.date === day.date))
                                     day.isMarked = true;
                             } else {
                                 day.isMouseToLeft = false;
@@ -1052,7 +1059,7 @@
                     classes.push('vfc-end-marked');
                 }
 
-                if (day.date === this.calendar.selectedDate || this.calendar.selectedDates.find(sDate => sDate.date === day.date)) {
+                if (day.date === this.calendar.selectedDate || (this.calendar.hasOwnProperty('selectedDates') && this.calendar.selectedDates.find(sDate => sDate.date === day.date))) {
                     classes.push('vfc-borderd')
                 }