From 1e0db0d8c97161892af1d0f0147baf456f6e98a9 Mon Sep 17 00:00:00 2001 From: summersamara Date: Tue, 19 Dec 2023 03:03:14 +0100 Subject: [PATCH] Fix sizing issue + use better type declarations --- src/components/FullCalendar/ICSAgenda.vue | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/components/FullCalendar/ICSAgenda.vue b/src/components/FullCalendar/ICSAgenda.vue index 923680811..0a1583f39 100644 --- a/src/components/FullCalendar/ICSAgenda.vue +++ b/src/components/FullCalendar/ICSAgenda.vue @@ -44,6 +44,7 @@ import { locale } from "@/utils/i18n"; import { computed, ref } from "vue"; import Clock from "vue-material-design-icons/ClockTimeTenOutline.vue"; import FullCalendar from "@fullcalendar/vue3"; +import { EventSegment } from "@fullcalendar/core"; import dayGridPlugin from "@fullcalendar/daygrid"; import iCalendarPlugin from "@fullcalendar/icalendar"; import interactionPlugin from "@fullcalendar/interaction"; @@ -55,7 +56,7 @@ const props = defineProps<{ const { t } = useI18n({ useScope: "global" }); -const listOfEventsByDate = ref<{ events: object[]; date?: string }>({ +const listOfEventsByDate = ref<{ events: EventSegment[]; date?: string }>({ events: [], date: undefined, }); @@ -70,14 +71,14 @@ const calendarOptions = computed((): object => { }, nextDayThreshold: "09:00:00", dayMaxEventRows: 0, - moreLinkClassNames: "bg-mbz-yellow dark:bg-mbz-purple dark:text-white p-2", + moreLinkClassNames: "bg-mbz-yellow dark:bg-mbz-purple dark:text-white", moreLinkContent: (arg: { num: number; text: string }) => { return "+" + arg.num.toString(); }, moreLinkClick: (info: { date: Date; - allSegs: object[]; - hiddenSegs: []; + allSegs: EventSegment[]; + hiddenSegs: EventSegment[]; jsEvent: object; }) => { listOfEventsByDate.value = { @@ -93,7 +94,7 @@ const calendarOptions = computed((): object => { )[0] as undefined | HTMLElement; moreLinkElement?.click(); }, - contentHeight: 350, + contentHeight: "auto", eventClassNames: "line-clamp-3 bg-mbz-yellow dark:bg-mbz-purple", headerToolbar: { left: "prev,next,today", @@ -124,6 +125,8 @@ const calendarOptions = computed((): object => { .agenda-view .fc-daygrid-day-events { min-height: 1.1rem !important; + margin-bottom: 0.2rem !important; + margin-left: 0.1rem !important; } .clock-icon {