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

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

@@ -279,7 +279,6 @@ export default {
 					width = width - (parentNotSameOverlaps.length * (10 / sameOverlapsLength))
 					left = left + (5 * parentNotSameOverlaps.length - ((10 * parentNotSameOverlaps.length / sameOverlapsLength) * (this.eventPosition - parentNotSameOverlaps.length)))
 				}
-				zIdnex = 10
 			}
 
 			if (this.vuecal.minEventWidth && width < this.vuecal.minEventWidth) {

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

@@ -32,7 +32,7 @@
 							</slot>
 						</template>
 					</all-day-bar>
-					<div class="vuecal__bg" :class="{ vuecal__flex: !hasTimeColumn }" column="column">
+					<div class="vuecal__bg" :class="{ vuecal__flex: !hasTimeColumn }" column="column" ref="vuecal_scroll">
 						<div class="vuecal__flex" row="row" grow="grow">
 							<div class="vuecal__time-column" v-if="hasTimeColumn">
 								<div class="vuecal__all-day-text" v-if="showAllDayEvents &amp;&amp; cellOrSplitMinWidth &amp;&amp; !(isDayView &amp;&amp; !minSplitWidth)" :style="{ height: allDayBar.height }">
@@ -50,7 +50,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` : ''" :unscheduledTime="unscheduledTime">
+								<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" ref="vuecal_weekday_heading">
 									<template #weekday-heading="{ heading, view }" v-if="$slots['weekday-heading']">
 										<slot name="weekday-heading" :heading="heading" :view="view"></slot>
 									</template>
@@ -73,7 +73,7 @@
 									</template>
 								</all-day-bar>
 
-								<div class="vuecal__flex" :ref="el =&gt; cellsEl = el" grow="grow" :wrap="!cellOrSplitMinWidth || !isWeekView" :style="cellOrSplitMinWidth ? `min-width: ${cellOrSplitMinWidth}px` : ''">
+								<div class="vuecal__flex vuecal__cells-body" :ref="el =&gt; cellsEl = el" grow="grow" :wrap="!cellOrSplitMinWidth || !isWeekView" :style="cellOrSplitMinWidth ? `min-width: ${cellOrSplitMinWidth}px` : ''">
 									<!-- TU -->
 									<vuecal-cell v-for="(cell, i) in viewCells" :key="i" :options="$props" :edit-events="editEvents" :data="cell" :cell-width="hideWeekdays.length &amp;&amp; (isWeekView || isMonthView) &amp;&amp; cellWidth" :min-timestamp="minTimestamp" :max-timestamp="maxTimestamp" :cell-splits="hasSplits &amp;&amp; daySplits || []">
 										<template #cell-content="{ events, split, selectCell }">
@@ -186,6 +186,7 @@ export default {
 
 	props: {
 		activeView: { type: String, default: 'week' },
+		scrollToHour: { type: Number, default: 0 }, // In minutes.
 		// Only used if there are daySplits with minSplitWidth, to add the same height top spacer on time column.
 		allDayBarHeight: { type: [String, Number], default: '25px' },
 		cellClickHold: { type: Boolean, default: true },
@@ -554,6 +555,9 @@ export default {
 						  }
 						: {})
 				}
+
+				this.$refs['vuecal_scroll'].scrollTop = this.scrollToHour * this.timeCellHeight
+
 				this.$emit('view-change', params)
 			}
 		},
@@ -1302,6 +1306,13 @@ export default {
 				: {})
 		}
 
+		this.$refs['vuecal_scroll'].addEventListener('scroll', () => {
+			this.$refs['vuecal_weekday_heading'].onTimelineScroll(this.$refs['vuecal_scroll'].scrollTop)
+		})
+
+		this.viewportTimelineOffset = this.$refs['vuecal_scroll'].getBoundingClientRect().top
+		this.$refs['vuecal_scroll'].scrollTop = this.scrollToHour * this.timeCellHeight
+
 		this.$emit('ready', params)
 		this.ready = true
 	},

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

@@ -1,6 +1,7 @@
 <template lang="pug">
 //- weekdays-headings are on week view only.
-.vuecal__flex.vuecal__weekdays-headings
+.vuecal__flex.vuecal__weekdays-headings(
+  ref="vuecal_weekday_heading")
   template(v-for="(heading, i) in headings" :key="i")
     .vuecal__flex.vuecal__heading(
       v-if="!heading.hide"
@@ -31,7 +32,8 @@ export default {
     transitionDirection: { type: String, default: 'right' },
     weekDays: { type: Array, default: () => [] },
     switchToNarrowerView: { type: Function, default: () => {} },
-    unscheduledTime: { type: Array, default: [] }
+    unscheduledTime: { type: Array, default: [] },
+    // viewPortOffset: { type: Number, default: 0 },
   },
 
   methods: {
@@ -48,7 +50,10 @@ export default {
       name: heading.name,
       initials: heading.initials,
       ...(heading.today ? { today: heading.today } : {})
-    })
+    }),
+    onTimelineScroll(viewPortOffset) {
+      this.$refs['vuecal_weekday_heading'].style.top = `${viewPortOffset}px`
+    }
   },
 
   computed: {