Fixed limits error

Author: ManukMinasyan

package.json

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

src/Demo.vue

@@ -6,6 +6,8 @@
                             :date-format="'dd/mm/yyyy'"
                             :is-multiple="true"
                             :calendars-count="1"
+                            :with-time-picker="true"
+                            :limits="{min: '25/06/2019', max: '01/07/2019'}"
                             :change-month-function="true"
         ></FunctionalCalendar>
         <!--<functional-calendar class="demo-calendar"-->
@@ -97,7 +99,7 @@
     }
 
     .demo-calendar {
-        width: 256px;
+        width: 300px;
         /*height: 400px;*/
         margin: 100px;
     }

src/assets/scss/calendar.scss

@@ -196,7 +196,7 @@ input.vfc-single-input {
       content: ' ';
       height: 26px;
       width: 2px;
-      background-color: #FFFFFF;
+      background-color: $white;
     }
 
     .vfc-close:before {
@@ -216,8 +216,8 @@ input.vfc-single-input {
         width: 100%;
         background-color: $royalblue;
         text-align: left;
-        color: #FFFFFF;
-        font-size: 20px;
+        color: $white;
+        font-size: 16px;
         padding-top: 15px;
         padding-bottom: 15px;
         border-radius: .28571429rem .28571429rem 0 0;
@@ -441,7 +441,7 @@ input.vfc-single-input {
                     vertical-align: middle;
 
                     &.vfc-today {
-                      background-color: #ff8498;
+                      background-color: $lightred;
                       color: $white;
                     }
 
@@ -480,7 +480,7 @@ input.vfc-single-input {
                       }
 
                       &.vfc-hide {
-                        color: #d9d9d9;
+                        color: $lightgrey;
 
                         &:after {
 
@@ -520,7 +520,7 @@ input.vfc-single-input {
                     }
 
                     &.vfc-hover:hover {
-                      background-color: #dadada;
+                      background-color: $lightgreyHover;
                       z-index: 100;
                     }
                   }

src/assets/scss/variables.scss

@@ -1,7 +1,10 @@
 $black: #000000 !default;
 $white: #FFFFFF !default;
+$lightgrey: #d9d9d9 !default;
+$lightgreyHover: #dadada !default;;
 $powderblue: #B0E0E6 !default;
 $lightskyblue: #8fd8ec !default;
 $royalblue: #66b3cc !default;
 $steelblue: #4682B4 !default;
-$gainsboro: #bfbfbf !default;
+$gainsboro: #bfbfbf !default;
+$lightred: #ff8498 !default;

src/components/FunctionalCalendar.vue

@@ -200,29 +200,7 @@
             'calendar.currentDate': {
                 handler(value) {
                     this.$emit('input', this.calendar);
-                    if (this.fConfigs.limits) {
-                        let min = new Date(helpCalendar.getDateFromFormat(this.fConfigs.limits.min));
-                        min.setDate(1);
-                        min.setHours(0, 0, 0, 0);
-                        let max = new Date(helpCalendar.getDateFromFormat(this.fConfigs.limits.max));
-                        max.setDate(1);
-                        max.setHours(0, 0, 0, 0);
-
-                        this.allowPreDate = true;
-                        this.allowNextDate = true;
-
-                        let current = new Date(value);
-                        current.setDate(1);
-                        current.setHours(0, 0, 0, 0);
-
-                        if (current <= min) {
-                            this.allowPreDate = false;
-                        }
-
-                        if (current >= max) {
-                            this.allowNextDate = false;
-                        }
-                    }
+                    this.checkLimits(value);
                 }
             },
             'calendar.dateRange.start.date': {
@@ -298,6 +276,7 @@
                 this.setCalendarData();
                 this.listRendering();
                 this.markChooseDays();
+                this.checkLimits(this.calendar.currentDate);
             },
             updateCalendar() {
                 this.setExistingCalendarData();
@@ -880,6 +859,31 @@
             checkDateRangeEnd(date) {
                 return date === this.fConfigs.markedDateRange.end;
             },
+            checkLimits(value) {
+                if (this.fConfigs.limits) {
+                    let min = new Date(helpCalendar.getDateFromFormat(this.fConfigs.limits.min));
+                    min.setDate(1);
+                    min.setHours(0, 0, 0, 0);
+                    let max = new Date(helpCalendar.getDateFromFormat(this.fConfigs.limits.max));
+                    max.setDate(1);
+                    max.setHours(0, 0, 0, 0);
+
+                    this.allowPreDate = true;
+                    this.allowNextDate = true;
+
+                    let current = new Date(value);
+                    current.setDate(1);
+                    current.setHours(0, 0, 0, 0);
+
+                    if (current <= min) {
+                        this.allowPreDate = false;
+                    }
+
+                    if (current >= max) {
+                        this.allowNextDate = false;
+                    }
+                }
+            },
             getTransition_() {
                 if (!this.fConfigs.transition)
                     return '';