diff --git a/src/components/calendar/CalendarTile.vue b/src/components/calendar/CalendarTile.vue index 785b76b..8b89abe 100644 --- a/src/components/calendar/CalendarTile.vue +++ b/src/components/calendar/CalendarTile.vue @@ -2,15 +2,21 @@ import { areDatesIdentical, type LeimDate } from '@/models/Date' import { useCalendar } from '@/stores/CalendarStore' import { useCalendarEvents } from '@/stores/EventStore' +import { useElementBounding } from '@vueuse/core' import { storeToRefs } from 'pinia' -import { computed } from 'vue' -import CalendarEvent from './CalendarEvent.vue' +import { computed, ref, type ComputedRef } from 'vue' + +import CalendarEventButton from './CalendarEvent.vue' +import type { CalendarEvent } from '@/models/Events' const props = defineProps<{ date: LeimDate faded?: boolean }>() +const calendarTile = ref() +const calendarEventsList = ref() + const { defaultDate, selectDate } = useCalendar() const { selectedDate } = storeToRefs(useCalendar()) const { currentEvents } = storeToRefs(useCalendarEvents()) @@ -28,10 +34,29 @@ const isDefaultDate = computed(() => { const isSelectedDate = computed(() => { return areDatesIdentical(props.date, selectedDate.value) }) + +// Get bounding elements for both tile and events list +const { height: tileHeight, top: tileTop } = useElementBounding(calendarTile) +const { top: tileListTop } = useElementBounding(calendarEventsList) + +// Compute the available number of events that can be displayed from refs heights +const numberOfEventsToFit: ComputedRef = computed(() => { + if (!eventsForTheDay.value.length) return 0 + + return Math.trunc((tileHeight.value - (tileListTop.value - tileTop.value)) / 40) +}) + +const eventsToDisplay: ComputedRef = computed(() => { + return [...eventsForTheDay.value].splice(0, numberOfEventsToFit.value) +}) +const eventsNotDisplayed = computed( + () => eventsForTheDay.value.length - eventsToDisplay.value.length +)