Added slots functionality

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

src/Demo.vue

@@ -7,9 +7,12 @@
                             :is-multiple="true"
                             :calendars-count="1"
                             :with-time-picker="true"
-                            :limits="{min: '25/06/2019', max: '01/07/2019'}"
                             :change-month-function="true"
-        ></FunctionalCalendar>
+                            v-slot:default="props"
+        >
+            {{ props.day.day }}
+            <span  :class="{'green-point': props.day.day === 5, 'orange-point': props.day.day === 9, 'green-line': props.day.day === 11}"></span>
+        </FunctionalCalendar>
         <!--<functional-calendar class="demo-calendar"-->
         <!--:with-time-picker='true'-->
         <!--:is-date-picker='true'-->
@@ -99,7 +102,7 @@
     }
 
     .demo-calendar {
-        width: 300px;
+        width: 400px;
         /*height: 400px;*/
         margin: 100px;
     }
@@ -118,4 +121,33 @@
         padding-bottom: 20px !ie 7;
         max-height: 600px;
     }
+
+    .green-line {
+        width: 20px;
+        position: absolute;
+        height: 2px;
+        background-color: #45cc0d;
+        bottom: 3px;
+        left: calc(50% - 10px);
+    }
+
+    .green-point {
+        position: absolute;
+        width: 4px;
+        height: 4px;
+        border-radius: 50%;
+        background-color: #45cc0d;
+        bottom: 3px;
+        left: calc(50% - 4px);
+    }
+
+    .orange-point {
+        position: absolute;
+        width: 4px;
+        height: 4px;
+        border-radius: 50%;
+        background-color: #eb9800;
+        bottom: 3px;
+        left: calc(50% - 4px);
+    }
 </style>

src/assets/scss/calendar.scss

@@ -431,7 +431,7 @@ input.vfc-single-input {
                     left: 0;
                   }
 
-                  span {
+                  span.vfc-span-day {
                     display: inline-block;
                     text-align: center;
                     width: 30px;

src/components/FunctionalCalendar.vue

@@ -110,10 +110,13 @@
                                                  class="vfc-base-end"></div>
                                             <span v-if="!day.hideLeftAndRightDays"
                                                   data-date="" :key="day_key"
+                                                  class="vfc-span-day"
                                                   :class="getClassNames(day)"
                                                   @click="clickDay(day)"
                                                   @mouseover="dayMouseOver(week_key, day.date)">
-                                                {{ day.day }}
+                                                <slot :week="week" :day="day">
+                                                    {{ day.day }}
+                                                </slot>
                                         </span>
                                         </div>
                                     </div>