Fixed problem connected with day hover

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.9",
+  "version": "2.6.0",
   "license": "MIT",
   "repository": {
     "type": "git",

src/assets/scss/calendar.scss

@@ -534,7 +534,7 @@ input.vfc-single-input {
                       align-items: center;
                     }
 
-                    &.vfc-hover:hover {
+                    &.vfc-hover:hover, &.vfc-hovered {
                       background-color: $lightgreyHover;
                       z-index: 100;
                     }
@@ -696,7 +696,8 @@ input.vfc-single-input {
                       color: $black;
                     }
 
-                    &.vfc-hover:hover {
+                    &.vfc-hover:hover, &.vfc-hovered {
+                      z-index: 1;
                       background-color: rgba(76, 76, 76, 0.3);
                     }
                   }
@@ -708,6 +709,7 @@ input.vfc-single-input {
       }
     }
 
+
     .vfc-months-container {
       .vfc-navigation-buttons {
         .vfc-top-date {

src/components/FunctionalCalendar.vue

@@ -426,6 +426,7 @@
                                 hide: day.hide,
                                 isMouseToLeft: false,
                                 isMouseToRight: false,
+                                isHovered: false,
                                 isDateRangeStart: vm.checkDateRangeStart(helpCalendar.formatDate(date)),
                                 isDateRangeEnd: vm.checkDateRangeEnd(helpCalendar.formatDate(date)),
                                 hideLeftAndRightDays: day.hideLeftAndRightDays,
@@ -624,6 +625,8 @@
 
                                 let item = week.days[i];
 
+                                this.listCalendars[e].weeks[f].days[i].isHovered = false;
+
                                 if (item.date !== this.calendar.dateRange.start.date && !this.fConfigs.markedDates.includes(item.date)) {
                                     this.listCalendars[e].weeks[f].days[i].isMarked = false;
                                 }
@@ -649,6 +652,10 @@
                                     ) {
                                         this.listCalendars[e].weeks[f].days[i].isMarked = true;
                                     }
+
+                                    if(!this.calendar.dateRange.end.date && itemDate === thisDate){
+                                        this.listCalendars[e].weeks[f].days[i].isHovered = true;
+                                    }
                                 }
 
                             }
@@ -805,6 +812,8 @@
                     // Mark Date
                     if (day.isMarked) {
                         classes.push('vfc-marked');
+                    }else if(day.isHovered) {
+                        classes.push('vfc-hovered');
                     }
 
                     if (this.fConfigs.markedDates.includes(day.date)) {