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

<template>
	<div class="calendar-wrapper">
		<Vue-cal
			:hide-view-selector="true"
			:hide-title-bar="true"
			:disable-views="['years', 'year', 'month', 'day']"
			:time-from="8 * 60"
			:time-to="24 * 60"
			:hide-weekends="true"
			:selected-date="new Date()"
			:onEventClick="taskClicked"
			:editable-events="vueCalConfig.editing"
			:events="events"
			:min-event-width="90"
			:overlaps-per-time-step="true"
			:time-cell-height="200"
			:min-cell-width="300"
			sticky-split-labels
		>
			<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>
			</template>

			<template v-slot:time-cell="{ hours, minutes }">
				<span class="d-flex align-center justify-center">
					<p>{{hours}}:{{String(minutes).padStart(2, '0')}}</p>
					<div class="time-column-line"></div>
				</span>
			</template>

			<template v-slot:event="{ event }">
				<div class="vuecal__event-title vuecal__event-title--edit"
					contenteditable
					@blur="event.title = $event.target.innerHTML"
					v-html="event.title" />
				<small class="vuecal__event-time">

				<strong>Event start:</strong> <span>{{ event.start.formatTime("h O'clock") }}</span><br/>
				<strong>Event end:</strong> <span>{{ event.end.formatTime("h O'clock") }}</span>
				</small>
			</template>
		</Vue-cal>
	</div>
</template>
 
<script>
// import VueCal from 'vue-cal'
// import 'vue-cal/dist/vuecal.css'

export default {
	components: { 
		// VueCal,
	},

	data() {
		return {
			events: [
				{
					start: '2022-11-21 8:00',
					end: '2022-11-21 13:30',
					title: 'Running Marathon',
					content: '<i class="icon material-icons">directions_run</i>',
					class: 'red',
					id: 1
				},
				{
					start: '2022-11-21 9:00',
					end: '2022-11-21 11:00',
					title: 'Drink water!',
					content: '<i class="icon material-icons">local_drink</i>',
					class: 'green',
					id: 2
				},
				{
					start: '2022-11-21 10:00',
					end: '2022-11-21 12:00',
					title: 'Trip to India',
					content: '<i class="icon material-icons">flight</i>',
					class: 'blue',
					id: 3
				},
				{
					start: '2022-11-21 13:30',
					end: '2022-11-21 16:00',
					title: 'Trip to India',
					content: '<i class="icon material-icons">flight</i>',
					class: 'blue',
					id: 3
				},
				{
					start: '2022-11-22 11:00',
					end: '2022-11-22 13:00',
					title: 'Trip to India',
					content: '<i class="icon material-icons">flight</i>',
					class: 'yellow',
					id: 3
				}
			],

			vueCalConfig: {
				editing: {
					title: false,
					drag: true,
					resize: false,
					delete: false,
					create: false 
				}
			},

		}
	},

	methods: {
		getHeadingDate(value) {
			const date = new Date(value)

			const today = new Date()
			const yesterday = new Date((new Date()).setDate(today.getDate() - 1))
			const tomorrow = new Date((new Date()).setDate(today.getDate() + 1))

			if (today.toLocaleDateString('sk-SK') === date.toLocaleDateString('sk-SK')) return "Dnes"
			if (yesterday.toLocaleDateString('sk-SK') === date.toLocaleDateString('sk-SK')) return "Včera"
			if (tomorrow.toLocaleDateString('sk-SK') === date.toLocaleDateString('sk-SK')) return "Zajtra"

			return date.toLocaleDateString('sk-SK')
		},

		taskClicked(task) {
			console.log("task", task)
		}
	}
}
</script>

<style lang="sass" scoped>
	.calendar-wrapper
		width: 100%
		overflow-x: scroll
		padding-top: 50px

	.vuecal
		transform: scale(1)

	::v-deep

		.vuecal__cells
			-ms-overflow-style: none
			scrollbar-width: none

			&::-webkit-scrollbar
				display: none

		.vuecal__body
			max-height: 100%
			overflow-y: scroll
			position: relative !important
			-ms-overflow-style: none
			scrollbar-width: none

			&::-webkit-scrollbar
				display: none

		.weekday-label
			justify-content: start !important 
			font-size: 24px
			font-weight: 700

		.vuecal__weekdays-headings,
		.vuecal__cell:before
			border: none

		.vuecal__time-column
			width: 150px
			box-shadow: none !important
		
			.time-column-line
				width: 40px
				height: 0
				border: 1px solid rgba(33, 33, 33, 0.08)
				margin-left: 10px

		.vuecal__flex
			flex-wrap: nowrap !important

		.vuecal__cell
			padding: 10px 10px 10px 0px 

		.vuecal__cell--today
			background-color: rgba(0, 0, 0, .02) !important

		.vuecal:not(.vuecal--day-view) .vuecal__cell--selected:not(.vuecal__cell--today) ,
		.vuecal__cell--current:not(.vuecal__cell--today)
			background-color: white

		.vuecal__event
			border-radius: 16px
			padding: 20px 10px
			text-align: left

			.vuecal__event-title
				text-align: left

			&:hover
				z-index: 10

			&.red
				background: #FFC9C9 !important

			&.green
				background: #E9FFE5 !important

			&.blue
				background: #DADEF8 !important

			&.yellow
				background: #F6ECD3 !important
</style>