feat: visible date range

Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>

src/components/CalendarView.vue

@@ -15,6 +15,7 @@
       @date-click="$emit('date-click', $event)"
       @event-hover="handleEventHover"
       @event-hover-end="hidePopup"
+      @update:current-date="$emit('update:current-date', $event)"
     />
     <DaysView
       v-else-if="view === 'days'"
@@ -27,6 +28,7 @@
       @event-hover="handleEventHover"
       @event-hover-end="hidePopup"
       @update:span="$emit('update:days-span', $event)"
+      @update:current-date="$emit('update:current-date', $event)"
     />
     <AgendaView
       v-else-if="view === 'agenda'"
@@ -36,21 +38,24 @@
       :initial-span="initialAgendaViewSpan"
       @event-click="$emit('event-click', $event)"
       @update:span="$emit('update:agenda-span', $event)"
+      @update:current-date="$emit('update:current-date', $event)"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import MonthView from './MonthView.vue';
 import DaysView from './DaysView.vue';
 import AgendaView from './AgendaView.vue';
 import EventViewerPopup from './EventViewerPopup.vue';
-import type { AgendaViewSpan, DaysViewSpan } from '@/types/spans';
+import { spanToDays, type AgendaViewSpan, type DaysViewSpan } from '@/types/spans';
 import type { EntityObject } from '@ChronoManager/models/entity';
 import type { CollectionObject } from '@ChronoManager/models/collection';
+import type { VisibleDateRange } from '@/types';
+import { daysVisibleRange, monthGridVisibleRange } from '@/utils/dateRanges';
 
-defineProps<{
+const props = defineProps<{
   view: 'days' | 'month' | 'agenda';
   currentDate: Date;
   events: EntityObject[];
@@ -59,13 +64,31 @@ defineProps<{
   initialAgendaViewSpan?: AgendaViewSpan;
 }>();
 
-defineEmits<{
+const emit = defineEmits<{
   'event-click': [event: EntityObject];
   'date-click': [date: Date];
   'update:days-span': [span: DaysViewSpan];
   'update:agenda-span': [span: AgendaViewSpan];
+  'update:current-date': [date: Date];
+  'update:visible-range': [range: VisibleDateRange];
 }>();
 
+const visibleRange = computed(() => {
+  if (props.view === 'month') {
+    return monthGridVisibleRange(props.currentDate);
+  }
+
+  const span = props.view === 'agenda'
+    ? props.initialAgendaViewSpan ?? '1w'
+    : props.initialDaysSpan ?? '7d';
+
+  return daysVisibleRange(props.currentDate, spanToDays(span));
+});
+
+watch(visibleRange, range => {
+  emit('update:visible-range', range);
+}, { immediate: true });
+
 // Popup state
 const hoveredEvent = ref<EntityObject | null>(null);
 const popupPosition = ref({ x: 0, y: 0 });