Initial commit

2025-12-21 09:59:39 -05:00
commit cc4e467cef
36 changed files with 7133 additions and 0 deletions
@@ -0,0 +1,96 @@
+<template>
+  <div class="calendar-view-container">
+    <EventViewerPopup
+      :event="hoveredEvent"
+      :position="popupPosition"
+      :visible="showPopup"
+      @click="$emit('event-click', $event)"
+    />
+    <MonthView
+      v-if="view === 'month'"
+      :current-date="currentDate"
+      :events="events"
+      :calendars="calendars"
+      @event-click="$emit('event-click', $event)"
+      @date-click="$emit('date-click', $event)"
+      @event-hover="handleEventHover"
+      @event-hover-end="hidePopup"
+    />
+    <DaysView
+      v-else-if="view === 'days'"
+      :current-date="currentDate"
+      :events="events"
+      :calendars="calendars"
+      @event-click="$emit('event-click', $event)"
+      @date-click="$emit('date-click', $event)"
+      @event-hover="handleEventHover"
+      @event-hover-end="hidePopup"
+    />
+    <AgendaView
+      v-else-if="view === 'agenda'"
+      :events="events"
+      :calendars="calendars"
+      @event-click="$emit('event-click', $event)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import MonthView from './MonthView.vue';
+import DaysView from './DaysView.vue';
+import AgendaView from './AgendaView.vue';
+import EventViewerPopup from './EventViewerPopup.vue';
+
+defineProps<{
+  view: 'days' | 'month' | 'agenda';
+  currentDate: Date;
+  events: any[];
+  calendars: any[];
+}>();
+
+defineEmits<{
+  'event-click': [event: any];
+  'date-click': [date: Date];
+}>();
+
+// Popup state
+const hoveredEvent = ref<any>(null);
+const popupPosition = ref({ x: 0, y: 0 });
+const showPopup = ref(false);
+let hideTimeout: NodeJS.Timeout | null = null;
+
+function handleEventHover(data: { event: MouseEvent; entity: any }) {
+  if (hideTimeout) {
+    clearTimeout(hideTimeout);
+    hideTimeout = null;
+  }
+  hoveredEvent.value = data.entity;
+  popupPosition.value = {
+    x: data.event.clientX,
+    y: data.event.clientY
+  };
+  showPopup.value = true;
+}
+
+function hidePopup() {
+  hideTimeout = setTimeout(() => {
+    showPopup.value = false;
+    hoveredEvent.value = null;
+  }, 200);
+}
+</script>
+
+<style scoped>
+.calendar-view-container {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.calendar-view-container > * {
+  flex: 1;
+  min-height: 0;
+}
+</style>