expand time-range beyond settings if event would be hidden

Author: firu11

src/components/timeline/CursorLine.vue

@@ -1,16 +1,23 @@
 <script setup lang="ts">
 import { settings } from '@/services/settings';
-import { timeInPercentOnTimeline } from '@/utils';
+
 import { DateTime } from 'luxon';
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 
+const props = defineProps<{
+  startHour: number;
+  endHour: number;
+}>();
+
 const hour = ref(DateTime.now().hour);
 const minute = ref(DateTime.now().minute);
 let interval: number;
 const today = DateTime.now();
 
 const topPos = computed(() => {
-  return `${timeInPercentOnTimeline(today.set({ hour: hour.value, minute: minute.value })) * 100}%`;
+  const currentHour = hour.value + minute.value / 60;
+  const position = (currentHour - props.startHour) / (props.endHour - props.startHour);
+  return `${Math.max(0, Math.min(1, position)) * 100}%`;
 });
 
 const timeFormat = computed(() => {

src/components/timeline/CursorToday.vue

@@ -1,15 +1,20 @@
 <script setup lang="ts">
-import { timeInPercentOnTimeline } from '@/utils';
 import { DateTime } from 'luxon';
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 
+const props = defineProps<{
+  startHour: number;
+  endHour: number;
+}>();
+
 const hour = ref(DateTime.now().hour);
 const minute = ref(DateTime.now().minute);
 let interval: number;
-const today = DateTime.now();
 
 const topPos = computed(() => {
-  return `${timeInPercentOnTimeline(today.set({ hour: hour.value, minute: minute.value })) * 100}%`;
+  const currentHour = hour.value + minute.value / 60;
+  const position = (currentHour - props.startHour) / (props.endHour - props.startHour);
+  return `${Math.max(0, Math.min(1, position)) * 100}%`;
 });
 
 function updateTime() {

src/components/timeline/DayTimeline.vue

@@ -40,6 +40,8 @@ const props = withDefaults(
   defineProps<{
     date: DateTime;
     events?: CalendarEvent[];
+    startHour: number;
+    endHour: number;
   }>(),
   {
     events: () => [],
@@ -93,9 +95,14 @@ const laidOutEvents = computed(function () {
   return layoutEvents(props.events);
 });
 
+const rangeStartHour = computed(() => props.startHour);
+const rangeEndHour = computed(() => props.endHour);
+
 const { drag, placeholderTop, placeholderHeight, placeholderSubtitle, dragStart } = useDraggingEvent(
   timelineRef,
   timelineDate,
+  rangeStartHour,
+  rangeEndHour,
 );
 
 watchEffect(function (cleanup) {
@@ -437,11 +444,13 @@ function layoutEvents(events: CalendarEvent[]): LaidOutEvent[] {
         v-for="event in laidOutEvents"
         :key="event.id"
         :event="event"
+        :start-hour="startHour"
+        :end-hour="endHour"
         :style="event.layoutStyle"
         @click="eventModal.open(event)"
       />
 
-      <CursorToday v-if="dateIsToday" />
+      <CursorToday v-if="dateIsToday" :start-hour="startHour" :end-hour="endHour" />
     </div>
   </div>
 </template>

src/components/timeline/TimelineEvent.vue

@@ -1,23 +1,24 @@
 <script setup lang="ts">
 import type { CalendarEvent } from '@/types/core';
 import BaseEvent from '@/components/timeline/BaseEvent.vue';
-import { numberOfHours, timeRangeFormat } from '@/utils';
-import { settings } from '@/services/settings';
+import { timeRangeFormat } from '@/utils';
 import { getTag } from '@/services/calendarCache';
 
 interface Props {
   event: CalendarEvent;
+  startHour: number;
+  endHour: number;
 }
 const props = defineProps<Props>();
 
 // Calculates the start and end positions for event.
 function getEventPosition(event: CalendarEvent): { start: number; end: number } {
   const eventStartHours = event.from.hour + event.from.minute / 60;
   const eventEndHours = event.to.hour + event.to.minute / 60;
-  const viewStart = settings.value.dayViewStartHour;
+  const numberOfHours = props.endHour - props.startHour;
 
-  const start = Math.max(0, (eventStartHours - viewStart) / numberOfHours());
-  const end = Math.min(1, (eventEndHours - viewStart) / numberOfHours());
+  const start = Math.max(0, (eventStartHours - props.startHour) / numberOfHours);
+  const end = Math.min(1, (eventEndHours - props.startHour) / numberOfHours);
 
   return { start, end };
 }

src/components/timeline/XDaysView.vue

@@ -42,16 +42,30 @@ const dates = computed(() => {
   });
 });
 
-const hoursOnGrid = computed(() => {
-  const start = settings.value.dayViewStartHour;
-  const end = settings.value.dayViewEndHour;
+const timelineRange = computed(() => {
+  const defaultStart = settings.value.dayViewStartHour;
+  const configuredEnd = settings.value.dayViewEndHour;
+  const defaultEnd = configuredEnd > defaultStart ? configuredEnd : configuredEnd + 24;
+
+  let startHour: number = defaultStart;
+  let endHour: number = defaultEnd;
+
+  for (const events of eventsTimeline.value) {
+    for (const event of events) {
+      startHour = Math.min(startHour, Math.floor(event.from.hour + event.from.minute / 60));
+      endHour = Math.max(endHour, Math.ceil(event.to.hour + event.to.minute / 60));
+    }
+  }
 
-  const result: string[] = [];
+  return { startHour, endHour };
+});
 
-  const totalHours = end > start ? end - start : 24 - start + end;
+const hoursOnGrid = computed(() => {
+  const { startHour, endHour } = timelineRange.value;
+  const result: string[] = [];
 
-  for (let i = 0; i < totalHours; i++) {
-    const current = (start + i) % 24;
+  for (let i = 0; i < endHour - startHour; i++) {
+    const current = (startHour + i) % 24;
 
     // resolve formats manually ig
     if (settings.value.timeFormat === 'h12') {
@@ -130,7 +144,7 @@ async function updateData() {
     </div>
 
     <div id="content">
-      <CursorLine />
+      <CursorLine :start-hour="timelineRange.startHour" :end-hour="timelineRange.endHour" />
 
       <div class="hour-lines">
         <div
@@ -141,7 +155,14 @@ async function updateData() {
         ></div>
       </div>
 
-      <DayTimeline v-for="(d, i) in dates" :key="d.toMillis()" :date="d" :events="eventsTimeline[i]" />
+      <DayTimeline
+        v-for="(d, i) in dates"
+        :key="d.toMillis()"
+        :date="d"
+        :events="eventsTimeline[i]"
+        :start-hour="timelineRange.startHour"
+        :end-hour="timelineRange.endHour"
+      />
     </div>
   </div>
 </template>

src/composables/useDraggingEvent.ts

@@ -3,11 +3,16 @@ import type { Ref } from 'vue';
 import type { CalendarEvent } from '@/types/core.ts';
 import { DateTime } from 'luxon';
 import { useMouse } from '@vueuse/core';
-import { numberOfHours, timeRangeFormat } from '@/utils';
+import { timeRangeFormat } from '@/utils';
 import { useEventModal } from '@/composables/modals/useEventModal';
 import { settings } from '@/services/settings';
 
-export function useDraggingEvent(timelineRef: Ref<HTMLElement | null>, date: Ref<DateTime>) {
+export function useDraggingEvent(
+  timelineRef: Ref<HTMLElement | null>,
+  date: Ref<DateTime>,
+  startHour: Ref<number>,
+  endHour: Ref<number>,
+) {
   const { y } = useMouse();
   const eventModal = useEventModal();
 
@@ -16,7 +21,7 @@ export function useDraggingEvent(timelineRef: Ref<HTMLElement | null>, date: Ref
 
   const snapToGridHeight = computed(() => {
     if (!timelineRef.value) return 0;
-    return timelineRef.value.clientHeight / numberOfHours() / (60 / settings.value.dragPrecisionMinutes);
+    return timelineRef.value.clientHeight / (endHour.value - startHour.value) / (60 / settings.value.dragPrecisionMinutes);
   });
 
   const maxY = computed(() => timelineRef.value?.clientHeight ?? 0);
@@ -59,11 +64,11 @@ export function useDraggingEvent(timelineRef: Ref<HTMLElement | null>, date: Ref
     const endTotalMinutes = (startSlots + durationSlots) * settings.value.dragPrecisionMinutes;
 
     const startTime = date.value
-      .set({ hour: settings.value.dayViewStartHour, minute: 0 })
+      .set({ hour: startHour.value, minute: 0 })
       .plus({ minutes: startTotalMinutes });
 
     const endTime = date.value
-      .set({ hour: settings.value.dayViewStartHour, minute: 0 })
+      .set({ hour: startHour.value, minute: 0 })
       .plus({ minutes: endTotalMinutes });
 
     return [startTime, endTime];

src/utils.ts

@@ -105,16 +105,6 @@ export function numberOfHours(): number {
   return (settings.value.dayViewEndHour - settings.value.dayViewStartHour + 24) % 24;
 }
 
-/**
- * Returns 0.0-1.0 for the datetime parameter based on settings.dayViewStartHour.
- */
-export function timeInPercentOnTimeline(datetime: DateTime): number {
-  const viewStart = settings.value.dayViewStartHour;
-  const startHours = datetime.hour + datetime.minute / 60;
-  const percent = Math.max(0, (startHours - viewStart) / numberOfHours());
-  return percent;
-}
-
 /**
  * Returns true/false whether event is wholeDay/allDay.
  */