[timeline] sticky header, scroll to hour....

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

@@ -11,8 +11,9 @@
 			:unscheduledTime="calData.unscheduled_times"
 			:overlaps-per-time-step="false"
 			:showTimeInCells="false"
-			:time-cell-height="100"
-			:snap-to-time="15"
+			:time-cell-height="timeCellHeight"
+			:snap-to-time="8 * 60"
+			:scroll-to-hour="calConfig.scrollHour"
 			:min-cell-width="300"
 			@ready="onReady()"
 			@view-change="weekChanged"
@@ -94,7 +95,7 @@ export default {
 			type: Object,
 			required: true,
 			default() {
-				return {startHour: 8, endHour: 16, date: new Date()}
+				return {date: new Date(), scrollHour: 7}
 			}
 		}
 	},
@@ -112,12 +113,13 @@ export default {
 			},
 			focusedEventId: null,
 			showCompleteModal: null,
-			showDeleteModal: null
+			showDeleteModal: null,
+			timeCellHeight: 100,
 		}
 	},
 
 	mounted() {
-		this._scrollToDefaultTime()
+		this._scrollToDefaultTime()	
 	},
 
 	methods: {
@@ -137,7 +139,7 @@ export default {
 
 		onReady() {
 			this.scrollToYesterday()
-			this.correctTimecolumnMargin()
+			this.correctMargins()
 		},
 
 		scrollToYesterday() {
@@ -148,9 +150,10 @@ export default {
 			scrollContainer.scrollLeft = yesterdayCell.offsetLeft - scrollContainer.offsetLeft - 20
 		},
 
-		correctTimecolumnMargin() {
+		correctMargins() {
 			const heightOfDayHeader = document.getElementsByClassName('vuecal__heading')[0].clientHeight
 			document.getElementsByClassName('vuecal__time-column')[0].style.marginTop = `${heightOfDayHeader}px`
+			document.getElementsByClassName('vuecal__cells-body')[0].style.marginTop = `${heightOfDayHeader}px`
 		},
 
 		getHeadingDate(value) {
@@ -211,7 +214,8 @@ export default {
 
 	.calendar-wrapper
 		width: 100%
-		padding-top: 50px
+		height: 100%
+		// padding-top: 50px
 
 		&:deep()
 			.vuecal__cells
@@ -252,6 +256,16 @@ export default {
 			.vuecal__cell:before
 				border: none
 
+			.vuecal__scrollable-body
+				position: relative
+
+			.vuecal__weekdays-headings
+				position: absolute
+				top: 0
+				left: 20px
+				z-index: 999
+				background: white
+
 			.vuecal__heading
 				height: fit-content
 				min-height: 100%