[Refactor] Code formatting refactor

app/public/mock/v1/overview/tasks.GET.json

@@ -104,6 +104,36 @@
 				"title": "Task 7",
 				"project_code": "CO-2201",
 				"master_task_color": "#E7DBF8"
+			},
+
+			{
+				"id": 8,
+				"task_id": 8,
+				"starts_at": "2022-12-19T07:00:00+00:00",
+				"ends_at": "2022-12-19T09:00:00+00:00",
+				"title": "Task 8",
+				"project_code": "CO-2201",
+				"master_task_color": "#E7DBF8"
+			},
+
+			{
+				"id": 9,
+				"task_id": 9,
+				"starts_at": "2022-12-20T09:00:00+00:00",
+				"ends_at": "2022-12-20T12:00:00+00:00",
+				"title": "Task 9",
+				"project_code": "CO-2201",
+				"master_task_color": "#E9FFE6"
+			},
+
+			{
+				"id": 10,
+				"task_id": 10,
+				"starts_at": "2022-12-19T12:00:00+00:00",
+				"ends_at": "2022-12-19T13:00:00+00:00",
+				"title": "Task 10",
+				"project_code": "CO-2201",
+				"master_task_color": "#57e0f2"
 			}
 		]
 	},

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

@@ -35,9 +35,13 @@
 					<div class="vuecal__bg" :class="{ vuecal__flex: !hasTimeColumn }" column="column">
 						<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 }"><span>{{ texts.allDay }}</span></div>
+								<div class="vuecal__all-day-text" v-if="showAllDayEvents &amp;&amp; cellOrSplitMinWidth &amp;&amp; !(isDayView &amp;&amp; !minSplitWidth)" :style="{ height: allDayBar.height }">
+									<span>{{ texts.allDay }}</span>
+								</div>
 								<div class="vuecal__time-cell" v-for="(cell, i) in timeCells" :key="i" :style="`height: ${timeCellHeight}px`">
-                  <slot name="time-cell" :hours="cell.hours" :minutes="cell.minutes"><span class="vuecal__time-cell-line"></span><span class="vuecal__time-cell-label">{{ cell.label }}</span></slot>
+									<slot name="time-cell" :hours="cell.hours" :minutes="cell.minutes"
+										><span class="vuecal__time-cell-line"></span><span class="vuecal__time-cell-label">{{ cell.label }}</span></slot
+									>
 								</div>
 							</div>
 							<div class="vuecal__flex vuecal__week-numbers" v-if="showWeekNumbers &amp;&amp; isMonthView" column="column">
@@ -68,7 +72,9 @@
 										</slot>
 									</template>
 								</all-day-bar>
+
 								<div class="vuecal__flex" :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 }">
 											<slot name="cell-content" :cell="cell" :view="view" :go-narrower="selectCell" :events="events">
@@ -86,7 +92,10 @@
 											<slot name="event" :view="view" :event="event">
 												<div class="vuecal__event-title vuecal__event-title--edit" v-if="editEvents.title &amp;&amp; event.titleEditable" contenteditable="contenteditable" @blur="onEventTitleBlur($event, event)" v-html="event.title"></div>
 												<div class="vuecal__event-title" v-else-if="event.title" v-html="event.title"></div>
-                        <div class="vuecal__event-time" v-if="time &amp;&amp; !event.allDay &amp;&amp; !(isMonthView &amp;&amp; (event.allDay || showAllDayEvents === 'short')) &amp;&amp; !isShortMonthView">{{ utils.date.formatTime(event.start, TimeFormat) }}<span v-if="event.endTimeMinutes">&nbsp;- {{ utils.date.formatTime(event.end, TimeFormat, null, true) }}</span><small class="days-to-end" v-if="event.daysCount &gt; 1 &amp;&amp; (event.segments[cell.formattedDate] || {}).isFirstDay">&nbsp;+{{ event.daysCount - 1 }}{{ (texts.day[0] || '').toLowerCase() }}</small></div>
+												<div class="vuecal__event-time" v-if="time &amp;&amp; !event.allDay &amp;&amp; !(isMonthView &amp;&amp; (event.allDay || showAllDayEvents === 'short')) &amp;&amp; !isShortMonthView">
+													{{ utils.date.formatTime(event.start, TimeFormat) }}<span v-if="event.endTimeMinutes">&nbsp;- {{ utils.date.formatTime(event.end, TimeFormat, null, true) }}</span
+													><small class="days-to-end" v-if="event.daysCount &gt; 1 &amp;&amp; (event.segments[cell.formattedDate] || {}).isFirstDay">&nbsp;+{{ event.daysCount - 1 }}{{ (texts.day[0] || '').toLowerCase() }}</small>
+												</div>
 												<div class="vuecal__event-content" v-if="event.content &amp;&amp; !(isMonthView &amp;&amp; event.allDay &amp;&amp; showAllDayEvents === 'short') &amp;&amp; !isShortMonthView" v-html="event.content"></div>
 											</slot>
 										</template>
@@ -149,7 +158,12 @@ const dateUtils = new DateUtils(textsDefaults) // Do this ASAP for date prototyp
 
 export default {
 	name: 'vue-cal',
-  components: { 'vuecal-cell': Cell, 'vuecal-header': Header, WeekdaysHeadings, AllDayBar },
+	components: {
+		'vuecal-cell': Cell,
+		'vuecal-header': Header,
+		WeekdaysHeadings,
+		AllDayBar
+	},
 
 	// By Vue design, passing props loses the reactivity unless it's a method or reactive OBJECT.
 	provide() {
@@ -339,10 +353,8 @@ export default {
 			if (this.locale === 'en') {
 				const texts = await import('./i18n/en.json')
 				this.texts = Object.assign({}, textsDefaults, texts)
-      }
+			} else {
-      else {
+				import(`./i18n/${locale}.json`).then((response) => {
-        import(`./i18n/${locale}.json`)
-          .then(response => {
 					this.texts = Object.assign({}, textsDefaults, response.default)
 					this.utils.date.updateTexts(this.texts)
 				})
@@ -354,7 +366,7 @@ export default {
 		 */
 		loadDragAndDrop() {
 			import('./modules/drag-and-drop')
-        .then(response => {
+				.then((response) => {
 					const { DragAndDrop } = response
 					this.modules.dnd = new DragAndDrop(this)
 				})
@@ -516,13 +528,19 @@ export default {
 					view,
 					startDate,
 					endDate: this.view.endDate,
-          ...(this.isMonthView ? {
+					...(this.isMonthView
+						? {
 								firstCellDate: this.view.firstCellDate,
 								lastCellDate: this.view.lastCellDate,
 								outOfScopeEvents: this.view.outOfScopeEvents.map(this.cleanupEvent)
-          } : {}),
+						  }
+						: {}),
 					events: this.view.events.map(this.cleanupEvent),
-          ...(this.isWeekView ? { week: ud.getWeek(this.startWeekOnSunday ? ud.addDays(startDate, 1) : startDate) } : {})
+					...(this.isWeekView
+						? {
+								week: ud.getWeek(this.startWeekOnSunday ? ud.addDays(startDate, 1) : startDate)
+						  }
+						: {})
 				}
 				this.$emit('view-change', params)
 			}
@@ -570,7 +588,7 @@ export default {
 				case 'day':
 					firstCellDate = ud[next ? 'addDays' : 'subtractDays'](startDate, 1)
 					const weekDay = firstCellDate.getDay() // 0 to 6 with Sunday at position 0.
-          const weekDayIndex = this.startWeekOnSunday ? weekDay : ((weekDay || 7) - 1)
+					const weekDayIndex = this.startWeekOnSunday ? weekDay : (weekDay || 7) - 1
 					const isDayHidden = this.weekDays[weekDayIndex].hide
 
 					// If the day to show on the day view is listed as hidden by hideWeekdays or hideWeekends,
@@ -582,14 +600,13 @@ export default {
 						let daysFromDate = 0
 
 						if (next) {
-              dayToShow = ([...daysWithIndex.slice(weekDayIndex), ...daysWithIndex]).find(day => {
+							dayToShow = [...daysWithIndex.slice(weekDayIndex), ...daysWithIndex].find((day) => {
 								daysFromDate++
 								return !day.hide
 							}).i // Returns 0 to 6 with Monday at position 0.
 							daysFromDate--
-            }
+						} else {
-            else {
+							dayToShow = [...daysWithIndex, ...daysWithIndex.slice(0, weekDayIndex)].reverse().find((day) => {
-              dayToShow = ([...daysWithIndex, ...daysWithIndex.slice(0, weekDayIndex)]).reverse().find(day => {
 								daysFromDate++
 								return !day.hide
 							}).i // Returns 0 to 6 with Monday at position 0.
@@ -624,12 +641,12 @@ export default {
 
 			// First remove the events that are not in view.
 			// Keep the unfiltered array of events for outOfScopeEvents below.
-      let filteredEvents = events.filter(e => ue.eventInRange(e, startDate, endDate))
+			let filteredEvents = events.filter((e) => ue.eventInRange(e, startDate, endDate))
 
 			// For each multiple-day event and only if needed, create its segments (= days) for rendering in the view.
 			// If we don't display the event on month view (eventsOnMonthView = false) then don't create segments.
 			if (!this.isYearsOrYearView && !(this.isMonthView && !this.eventsOnMonthView)) {
-        filteredEvents = filteredEvents.map(e => {
+				filteredEvents = filteredEvents.map((e) => {
 					return e.daysCount > 1 ? ue.createEventSegments(e, firstCellDate || startDate, lastCellDate || endDate) : e
 				})
 			}
@@ -639,11 +656,11 @@ export default {
 			if (this.isMonthView) {
 				// Save out of scope events into the view object separated from the array of in-scope events.
 				this.view.outOfScopeEvents = []
-        events.forEach(e => {
+				events.forEach((e) => {
 					if (ue.eventInRange(e, firstCellDate, startDate) || ue.eventInRange(e, endDate, lastCellDate)) {
 						// Only add events to the view.outOfScopeEvents array if not already in view.events
 						// (multiple-day events case).
-            if (!this.view.events.some(e2 => e2._eid === e._eid)) this.view.outOfScopeEvents.push(e)
+						if (!this.view.events.some((e2) => e2._eid === e._eid)) this.view.outOfScopeEvents.push(e)
 					}
 				})
 			}
@@ -687,7 +704,6 @@ export default {
 			e.preventDefault()
 
 			if (resizeAnEvent._eid) this.eventResizing(e)
-
 			else if (this.dragToCreateEvent && dragCreateAnEvent.start) this.eventDragCreation(e)
 		},
 
@@ -700,13 +716,7 @@ export default {
 		 * @param {Object} e the native DOM event object.
 		 */
 		onMouseUp(e) {
-      const {
+			const { focusAnEvent, resizeAnEvent, clickHoldAnEvent, clickHoldACell, dragCreateAnEvent } = this.domEvents
-        focusAnEvent,
-        resizeAnEvent,
-        clickHoldAnEvent,
-        clickHoldACell,
-        dragCreateAnEvent
-      } = this.domEvents
 			const { _eid: isClickHoldingEvent } = clickHoldAnEvent
 			const { _eid: wasResizing } = resizeAnEvent
 			let hasResized = false
@@ -723,7 +733,7 @@ export default {
 			// On event resize end, emit event if duration has changed.
 			if (wasResizing) {
 				const { originalEnd, originalEndTimeMinutes, endTimeMinutes } = resizeAnEvent
-        const event = this.view.events.find(e => e._eid === resizeAnEvent._eid)
+				const event = this.view.events.find((e) => e._eid === resizeAnEvent._eid)
 				// If end time is different than original, consider as resized.
 				hasResized = endTimeMinutes && endTimeMinutes !== originalEndTimeMinutes
 
@@ -731,7 +741,7 @@ export default {
 				// So compare timestamps instead of only endTimeMinutes.
 				if (event && event.end.getTime() !== originalEnd.getTime()) {
 					// Update the modified event in the mutable events array.
-          const mutableEvent = this.mutableEvents.find(e => e._eid === resizeAnEvent._eid)
+					const mutableEvent = this.mutableEvents.find((e) => e._eid === resizeAnEvent._eid)
 					mutableEvent.endTimeMinutes = event.endTimeMinutes
 					mutableEvent.end = event.end
 
@@ -741,7 +751,11 @@ export default {
 						end: originalEnd,
 						endTimeMinutes: event.originalEndTimeMinutes
 					}
-          this.$emit('event-duration-change', { event: cleanEvent, oldDate: resizeAnEvent.originalEnd, originalEvent })
+					this.$emit('event-duration-change', {
+						event: cleanEvent,
+						oldDate: resizeAnEvent.originalEnd,
+						originalEvent
+					})
 					this.$emit('event-change', { event: cleanEvent, originalEvent })
 				}
 
@@ -755,9 +769,7 @@ export default {
 				resizeAnEvent.endTimeMinutes = null
 				resizeAnEvent.startCell = null
 				resizeAnEvent.endCell = null
-      }
+			} else if (dragCreateStarted) {
-
-      else if (dragCreateStarted) {
 				// The drag create might be started but not completed due to threshold never reached.
 				if (dragCreatedEvent) {
 					this.emitWithEvent('event-drag-create', dragCreatedEvent)
@@ -790,9 +802,9 @@ export default {
 			// and if not dragging handle or deleting event.
 			const eventClickHandler = typeof this.onEventClick === 'function'
 			if (eventClicked && !hasResized && !isClickHoldingEvent && !dragCreatedEvent && eventClickHandler) {
-        let event = this.view.events.find(e => e._eid === focusAnEvent._eid)
+				let event = this.view.events.find((e) => e._eid === focusAnEvent._eid)
 				// If not found, the event may be in the outOfScope array.
-        if (!event && this.isMonthView) event = this.view.outOfScopeEvents.find(e => e._eid === focusAnEvent._eid)
+				if (!event && this.isMonthView) event = this.view.outOfScopeEvents.find((e) => e._eid === focusAnEvent._eid)
 
 				return event && this.onEventClick(event, e)
 			}
@@ -814,7 +826,9 @@ export default {
 		 */
 		eventResizing(e) {
 			const { resizeAnEvent } = this.domEvents
-      const event = this.view.events.find(e => e._eid === resizeAnEvent._eid) || { segments: {} }
+			const event = this.view.events.find((e) => e._eid === resizeAnEvent._eid) || {
+				segments: {}
+			}
 			const { minutes, cursorCoords } = this.minutesAtCursor(e)
 			const segment = event.segments && event.segments[resizeAnEvent.segment]
 
@@ -828,7 +842,7 @@ export default {
 
 			// On resize, snap to time (e.g. 0, 15, 30, 45) if the option is on.
 			if (this.snapToTime) {
-        const plusHalfSnapTime = (event.endTimeMinutes + this.snapToTime / 2)
+				const plusHalfSnapTime = event.endTimeMinutes + this.snapToTime / 2
 				event.endTimeMinutes = plusHalfSnapTime - (plusHalfSnapTime % this.snapToTime)
 			}
 
@@ -864,7 +878,11 @@ export default {
 			}
 
 			// Emit event while resizing, so it has to be fast.
-      this.$emit('event-resizing', { _eid: event._eid, end: event.end, endTimeMinutes: event.endTimeMinutes })
+			this.$emit('event-resizing', {
+				_eid: event._eid,
+				end: event.end,
+				endTimeMinutes: event.endTimeMinutes
+			})
 		},
 
 		/**
@@ -876,7 +894,10 @@ export default {
 			const { dragCreateAnEvent } = this.domEvents
 			const { start, startCursorY, split } = dragCreateAnEvent
 			const timeAtCursor = new Date(start)
-      const { minutes, cursorCoords: { y } } = this.minutesAtCursor(e)
+			const {
+				minutes,
+				cursorCoords: { y }
+			} = this.minutesAtCursor(e)
 
 			// Don't show anything until the threshold is reached.
 			if (!dragCreateAnEvent.event && Math.abs(startCursorY - y) < this.dragToCreateThreshold) return
@@ -927,7 +948,7 @@ export default {
 		 */
 		unfocusEvent() {
 			const { focusAnEvent, clickHoldAnEvent } = this.domEvents
-      const event = this.view.events.find(e => e._eid === (focusAnEvent._eid || clickHoldAnEvent._eid))
+			const event = this.view.events.find((e) => e._eid === (focusAnEvent._eid || clickHoldAnEvent._eid))
 			focusAnEvent._eid = null // Cancel event focus.
 			clickHoldAnEvent._eid = null // Hide delete button.
 
@@ -943,7 +964,7 @@ export default {
 		cancelDelete() {
 			const { clickHoldAnEvent } = this.domEvents
 			if (clickHoldAnEvent._eid) {
-        const event = this.view.events.find(e => e._eid === clickHoldAnEvent._eid)
+				const event = this.view.events.find((e) => e._eid === clickHoldAnEvent._eid)
 				if (event) event.deleting = false
 
 				clickHoldAnEvent._eid = null
@@ -967,7 +988,10 @@ export default {
 			const cleanEvent = this.cleanupEvent(event)
 
 			this.$emit('event-title-change', { event: cleanEvent, oldTitle })
-      this.$emit('event-change', { event: cleanEvent, originalEvent: { ...cleanEvent, title: oldTitle } })
+			this.$emit('event-change', {
+				event: cleanEvent,
+				originalEvent: { ...cleanEvent, title: oldTitle }
+			})
 		},
 
 		/**
@@ -986,7 +1010,7 @@ export default {
 			// For each event of the `events` prop, prepare the event for vue-cal:
 			// Populate missing keys: start, startDate, startTimeMinutes, end, endTimeMinutes, daysCount.
 			// Lots of these variables may look redundant but are here for performance as a cached result of calculation. :)
-      this.events.forEach(event => {
+			this.events.forEach((event) => {
 				// `event.start` accepts a Date object, or a formatted string, but always convert to Date.
 				const start = typeof event.start === 'string' ? ud.stringToDate(event.start) : event.start
 				const startDateF = ud.formatDateLite(start)
@@ -998,8 +1022,7 @@ export default {
 				if (typeof event.end === 'string' && event.end.includes('24:00')) {
 					end = new Date(event.end.replace(' 24:00', ''))
 					end.setHours(23, 59, 59, 0) // Sets to the same day at 23.59.59.
-        }
+				} else end = typeof event.end === 'string' ? ud.stringToDate(event.end) : event.end
-        else end = typeof event.end === 'string' ? ud.stringToDate(event.end) : event.end
 				let endDateF = ud.formatDateLite(end)
 				let endTimeMinutes = ud.dateToMinutes(end)
 
@@ -1008,8 +1031,7 @@ export default {
 					// This also applies on timeless events, all-day events & multiple-day events.
 					if (!this.time || (typeof event.end === 'string' && event.end.length === 10)) {
 						end.setHours(23, 59, 59, 0) // Sets to the same day at 23.59.59.
-          }
+					} else end.setSeconds(end.getSeconds() - 1) // Sets to the previous day at 23.59.59.
-          else end.setSeconds(end.getSeconds() - 1) // Sets to the previous day at 23.59.59.
 					endDateF = ud.formatDateLite(end)
 					endTimeMinutes = minutesInADay
 				}
@@ -1067,11 +1089,10 @@ export default {
 
 			// Delete vue-cal specific props instead of returning a set of props so user
 			// can place whatever they want inside an event and see it returned.
-      const discardProps = [
+			const discardProps = ['segments', 'deletable', 'deleting', 'titleEditable', 'resizable', 'resizing', 'draggable', 'dragging', 'draggingStatic', 'focused']
-        'segments', 'deletable', 'deleting', 'titleEditable', 'resizable', 'resizing',
+			discardProps.forEach((prop) => {
-        'draggable', 'dragging', 'draggingStatic', 'focused'
+				if (prop in event) delete event[prop]
-      ]
+			})
-      discardProps.forEach(prop => { if (prop in event) delete event[prop] })
 
 			if (!event.repeat) delete event.repeat // If empty we don't need it.
 
@@ -1138,8 +1159,7 @@ export default {
 
 			if (currentWeekNumber > 52) {
 				return ud.getWeek(ud.addDays(this.view.firstCellDate, 7 * weekFromFirstCell + modifier))
-      }
+			} else return currentWeekNumber
-      else return currentWeekNumber
 		},
 
 		/**
@@ -1196,7 +1216,7 @@ export default {
 		 * @return {Boolean} true if there are events, false otherwise.
 		 */
 		cellOrSplitHasEvents(events, split = null) {
-      return events.length && ((!split && events.length) || (split && events.some(e => e.split === split.id)))
+			return events.length && ((!split && events.length) || (split && events.some((e) => e.split === split.id)))
 		}
 	},
 
@@ -1237,7 +1257,9 @@ export default {
 			window.addEventListener(hasTouch ? 'touchend' : 'mouseup', this.onMouseUp)
 		}
 		if (resize || drag || (create && this.dragToCreateEvent)) {
-      window.addEventListener(hasTouch ? 'touchmove' : 'mousemove', this.onMouseMove, { passive: false })
+			window.addEventListener(hasTouch ? 'touchmove' : 'mousemove', this.onMouseMove, {
+				passive: false
+			})
 		}
 
 		if (title) window.addEventListener('keyup', this.onKeyUp)
@@ -1261,7 +1283,11 @@ export default {
 			endDate: this.view.endDate,
 			...(this.isMonthView ? { firstCellDate: this.view.firstCellDate, lastCellDate: this.view.lastCellDate } : {}),
 			events: this.view.events.map(this.cleanupEvent),
-      ...(this.isWeekView ? { week: ud.getWeek(this.startWeekOnSunday ? ud.addDays(startDate, 1) : startDate) } : {})
+			...(this.isWeekView
+				? {
+						week: ud.getWeek(this.startWeekOnSunday ? ud.addDays(startDate, 1) : startDate)
+				  }
+				: {})
 		}
 
 		this.$emit('ready', params)
@@ -1270,7 +1296,9 @@ export default {
 
 	beforeUnmount() {
 		const hasTouch = 'ontouchstart' in window
-    window.removeEventListener(hasTouch ? 'touchmove' : 'mousemove', this.onMouseMove, { passive: false })
+		window.removeEventListener(hasTouch ? 'touchmove' : 'mousemove', this.onMouseMove, {
+			passive: false
+		})
 		window.removeEventListener(hasTouch ? 'touchend' : 'mouseup', this.onMouseUp)
 		window.removeEventListener('keyup', this.onKeyUp)
 
@@ -1313,7 +1341,7 @@ export default {
 			return this.validateView(this.activeView)
 		},
 		enabledViews() {
-      return Object.keys(this.views).filter(view => this.views[view].enabled)
+			return Object.keys(this.views).filter((view) => this.views[view].enabled)
 		},
 		hasTimeColumn() {
 			return this.time && this.isWeekOrDayView
@@ -1345,10 +1373,10 @@ export default {
 		},
 		// Filter out the day splits that are hidden.
 		daySplits() {
-      return (
+			return (this.splitDays.filter((item) => !item.hide) || []).map((item, i) => ({
-        (this.splitDays.filter(item => !item.hide) || [])
+				...item,
-          .map((item, i) => ({ ...item, id: item.id || (i + 1) })) // Make sure there's always an id.
+				id: item.id || i + 1
-      )
+			})) // Make sure there's always an id.
 		},
 		// Whether the current view has days splits.
 		hasSplits() {
@@ -1409,16 +1437,19 @@ export default {
 			return (
 				this.isMonthView ||
 				// hasSplits check is important here in case the user toggles the splits but keep minSplitWidth.
-        (this.isWeekView && !this.minCellWidth && !(this.hasSplits && this.minSplitWidth)))
+				(this.isWeekView && !this.minCellWidth && !(this.hasSplits && this.minSplitWidth))
+			)
 		},
 		months() {
-      return this.texts.months.map(month => ({ label: month }))
+			return this.texts.months.map((month) => ({ label: month }))
 		},
 		// Validate and fill up the special hours object once for all at root level and not in cell.
 		specialDayHours() {
 			if (!this.specialHours || !Object.keys(this.specialHours).length) return {}
 
-      return Array(7).fill('').map((cell, i) => {
+			return Array(7)
+				.fill('')
+				.map((cell, i) => {
 					let day = this.specialHours[i + 1] || []
 					if (!Array.isArray(day)) day = [day]
 					cell = []
@@ -1557,11 +1588,10 @@ export default {
 					})
 
 					if (this.hideWeekends || this.hideWeekdays.length) {
-            cells = cells.filter(cell => {
+						cells = cells.filter((cell) => {
 							const day = cell.startDate.getDay() || 7 // Put Sunday at position 7 instead of 0.
 
-              return !((this.hideWeekends && day >= 6) ||
+							return !((this.hideWeekends && day >= 6) || (this.hideWeekdays.length && this.hideWeekdays.includes(day)))
-              (this.hideWeekdays.length && this.hideWeekdays.includes(day)))
 						})
 					}
 					break
@@ -1571,7 +1601,8 @@ export default {
 					const firstDayOfWeek = this.view.startDate
 					const weekDays = this.weekDays
 
-          cells = weekDays.map((cell, i) => {
+					cells = weekDays
+						.map((cell, i) => {
 							const startDate = ud.addDays(firstDayOfWeek, this.startWeekOnSunday ? i - 1 : i)
 							const endDate = new Date(startDate)
 							endDate.setHours(23, 59, 59, 0) // End at 23:59:59.
@@ -1585,7 +1616,8 @@ export default {
 								today: !todayFound && ud.isToday(startDate) && !todayFound++,
 								specialHours: this.specialDayHours[dayOfWeek] || []
 							}
-          }).filter((cell, i) => !weekDays[i].hide)
+						})
+						.filter((cell, i) => !weekDays[i].hide)
 					break
 				}
 				case 'day': {
@@ -1594,13 +1626,15 @@ export default {
 					endDate.setHours(23, 59, 59, 0) // End at 23:59:59.
 					const dayOfWeek = (startDate.getDay() || 7) - 1 // Day of the week from 0 to 6 with 6 = Sunday.
 
-          cells = [{
+					cells = [
+						{
 							startDate,
 							formattedDate: ud.formatDateLite(startDate),
 							endDate,
 							today: ud.isToday(startDate),
 							specialHours: this.specialDayHours[dayOfWeek] || []
-          }]
+						}
+					]
 					break
 				}
 			}

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

@@ -1,6 +1,7 @@
 <template>
 	<div>
 		<A-task-filter @weekChange="getWeekData" />
+
 		<W-loadable :content="timelineData" class="w-loadable" empty-message="Nepodarilo sa nacitat data!">
 			<Z-timeline :calData="timelineData" :calConfig="config" @eventMoved="onEventMoved" />
 		</W-loadable>