[task overview] header

app/src/plugins/app@vendor/vue-cal/index.vue

@@ -46,7 +46,7 @@
                 </div>
               </div>
               <div class="vuecal__flex vuecal__cells vuecal__scrollable-body" :class="`${view.id}-view`" grow="grow" :wrap="!cellOrSplitMinWidth || !isWeekView" :column="!!cellOrSplitMinWidth">
-                <weekdays-headings v-if="cellOrSplitMinWidth &amp;&amp; isWeekView" :transition-direction="transitionDirection" :week-days="weekDays" :switch-to-narrower-view="switchToNarrowerView" :style="cellOrSplitMinWidth ? `min-width: ${cellOrSplitMinWidth}px` : ''">
+                <weekdays-headings v-if="cellOrSplitMinWidth &amp;&amp; isWeekView" :transition-direction="transitionDirection" :week-days="weekDays" :switch-to-narrower-view="switchToNarrowerView" :style="cellOrSplitMinWidth ? `min-width: ${cellOrSplitMinWidth}px` : ''" :unscheduledTime="unscheduledTime">
                   <template #weekday-heading="{ heading, view }" v-if="$slots['weekday-heading']">
                     <slot name="weekday-heading" :heading="heading" :view="view"></slot>
                   </template>
@@ -185,6 +185,7 @@ export default {
     // This prevents drag creation by mistake when you want to navigate.
     dragToCreateThreshold: { type: Number, default: 15 },
     editableEvents: { type: [Boolean, Object], default: false },
+    unscheduledTime: { type: Array, default: [] },
     events: { type: Array, default: () => [] },
     eventsCountOnYearView: { type: Boolean, default: false },
     eventsOnMonthView: { type: [Boolean, String], default: false },

app/src/plugins/app@vendor/vue-cal/styles.scss

@@ -1,7 +1,7 @@
 $time-column-width: 3em;
 $week-numbers-width: 3em;
 $time-column-width-12: 4em; // twelve-hour clock shows am/pm.
-$weekdays-headings-height: 2.8em;
+$weekdays-headings-height: 4em;
 $weekdays-headings-height-with-splits: 3.4em;
 $splits-headers-height: 1.5em;
 

app/src/plugins/app@vendor/vue-cal/weekdays-headings.vue

@@ -30,9 +30,14 @@ export default {
   props: {
     transitionDirection: { type: String, default: 'right' },
     weekDays: { type: Array, default: () => [] },
-    switchToNarrowerView: { type: Function, default: () => {} }
+    switchToNarrowerView: { type: Function, default: () => {} },
+    unscheduledTime: { type: Array, default: [] }
   },
 
+  // created() {
+  //   console.log(this.weekDays)
+  // },
+
   methods: {
     selectCell (date, DOMEvent) {
       if (date.getTime() !== this.view.selectedDate.getTime()) {
@@ -43,6 +48,9 @@ export default {
     cleanupHeading: heading => ({
       label: heading.full,
       date: heading.date,
+      unscheduledTime: heading.unscheduledTime,
+      name: heading.name,
+      initials: heading.initials,
       ...(heading.today ? { today: heading.today } : {})
     })
   },
@@ -54,6 +62,10 @@ export default {
       let todayFound = false
       const headings = this.weekDays.map((cell, i) => {
         const date = this.utils.date.addDays(this.view.startDate, this.vuecal.startWeekOnSunday ? i - 1 : i)
+        let unscheduledTime = this.unscheduledTime[i].time ? this.unscheduledTime[i].time : 0
+        unscheduledTime = Math.floor(unscheduledTime / 60) + "," + String(unscheduledTime % 60)[0]
+        const name = this.unscheduledTime[i].name + " " + this.unscheduledTime[i].surname
+        const initials = this.unscheduledTime[i].name.charAt(0).toUpperCase() + this.unscheduledTime[i].surname.charAt(0).toUpperCase()
 
         return {
           hide: cell.hide,
@@ -62,6 +74,9 @@ export default {
           // week days when does not fit on screen or with small/xsmall options.
           small: cell.short || cell.label.substr(0, 3),
           xsmall: cell.short || cell.label.substr(0, 1),
+          unscheduledTime: unscheduledTime,
+          name: name,
+          initials: initials,
 
           // Only for week view.
           ...(this.view.id === 'week' ? {
@@ -71,6 +86,8 @@ export default {
           } : {})
         }
       })
+
+      console.log(headings)
       return headings
     },
     cellWidth () {