[task overview] header

app/src/plugins/tm@dashboard/tasks/_components/z-timeline.vue

@@ -10,19 +10,32 @@
 			:onEventClick="taskClicked"
 			:editable-events="vueCalConfig.editing"
 			:events="calData.dates"
+			:unscheduledTime="calData.unscheduled_times"
 			:overlaps-per-time-step="false"
 			:showTimeInCells="false"
 			:time-cell-height="200"
 			:min-cell-width="300"
-			@ready="scrollToYesterday"
+			@ready="onReady()"
 			@view-change="weekChanged"
 			@event-drop="eventMoved"
 		>
 			<template v-slot:weekday-heading="{ heading }">
-				<span class="d-flex align-center">
-					<img v-if="getHeadingDate(heading.date) == 'Dnes'" :src="require('./_img/home-icon.svg')" class="mr-2"> 
-					<p>{{ getHeadingDate(heading.date) }}</p>
-				</span>
+				<div class="w-100 h-100 d-flex flex-column">
+					<span class="d-flex align-center">
+						<img v-if="getHeadingDate(heading.date) == 'Dnes'" :src="require('./_img/home-icon.svg')" class="mr-2"> 
+						<p>{{ getHeadingDate(heading.date) }}</p>
+					</span>
+
+					<div class="unscheduled-time d-flex align-center text-left">
+						<div class="unscheduled-time-initials d-flex align-center justify-center me-4">
+							<p>{{heading.initials}}</p>
+						</div>
+						<div>
+							<p class="mb-0 mt-0 unscheduled-time-name">{{heading.name}}</p>
+							<h1 class="mb-0 mt-0">{{heading.unscheduledTime}} h</h1>
+						</div>
+					</div>
+				</div>
 			</template>
 
 			<template v-slot:time-cell="{ hours, minutes }">
@@ -97,6 +110,11 @@ export default {
 			this.$emit('eventMoved', e)
 		},
 
+		onReady() {
+			this.scrollToYesterday()
+			this.correctTimecolumnMargin()
+		},
+
 		scrollToYesterday() {
 			if (!document.getElementsByClassName('yesterday-cell').length) return
 
@@ -105,6 +123,13 @@ export default {
 			scrollContainer.scrollLeft = yesterdayCell.offsetLeft - scrollContainer.offsetLeft - 20
 		},
 
+		correctTimecolumnMargin() {
+			const heightOfDayHeader = document.getElementsByClassName('vuecal__heading')[0].clientHeight
+			console.log(heightOfDayHeader)
+			console.log(document.getElementsByClassName('vuecal__time-column')[0].style)
+			document.getElementsByClassName('vuecal__time-column')[0].style.marginTop = `${heightOfDayHeader}px`
+		},
+
 		getHeadingDate(value) {
 			const date = new Date(value)
 
@@ -178,6 +203,33 @@ export default {
 			.vuecal__cell:before
 				border: none
 
+			.vuecal__heading
+				height: fit-content
+				min-height: 100%
+				padding-right: 20px
+
+				.unscheduled-time
+					background: rgba(0, 0, 0, 0.04)
+					border-radius: 24px
+					padding: 10px 15px
+					margin-top: 10px
+
+					.unscheduled-time-name
+						font-weight: 400
+						font-size: 15px
+
+					.unscheduled-time-initials
+						width: 50px
+						height: 50px
+						background: #6200EE
+						border-radius: 50%
+
+						p
+							font-weight: 400
+							font-size: 20px
+							color: white
+						
+
 			.vuecal__cells.week-view
 				border-left: 1px solid rgba(0, 0, 0, .1)
 				padding-left: 20px
@@ -203,7 +255,7 @@ export default {
 				flex-wrap: nowrap !important
 
 			.vuecal__cell
-				padding: 10px 10px 10px 0px 
+				padding: 10px 20px 10px 0px 
 
 			.vuecal:not(.vuecal--day-view) .vuecal__cell--selected:not(.vuecal__cell--today) ,
 			.vuecal__cell--current:not(.vuecal__cell--today),

app/src/plugins/tm@dashboard/tasks/tasks.vue

@@ -64,6 +64,13 @@ export default {
 				delete event.ends_at
 			})
 
+			this.timelineData.unscheduled_times.forEach(time => {
+				time.name = this.timelineData.name
+				time.surname = this.timelineData.surname
+			})
+
+			console.log(this.timelineData.unscheduled_times)
+
 			// format working hours
 			this.config.startHour = Number(this.timelineData.work_hours_from.split(':')[0]) - 1
 			this.config.endHour = Number(this.timelineData.work_hours_to.split(':')[0]) + 1