Fix sizing issue + use better type declarations

This commit is contained in:
summersamara 2023-12-19 03:03:14 +01:00
parent 4ceee2efc7
commit 1e0db0d8c9

View file

@ -44,6 +44,7 @@ import { locale } from "@/utils/i18n";
import { computed, ref } from "vue"; import { computed, ref } from "vue";
import Clock from "vue-material-design-icons/ClockTimeTenOutline.vue"; import Clock from "vue-material-design-icons/ClockTimeTenOutline.vue";
import FullCalendar from "@fullcalendar/vue3"; import FullCalendar from "@fullcalendar/vue3";
import { EventSegment } from "@fullcalendar/core";
import dayGridPlugin from "@fullcalendar/daygrid"; import dayGridPlugin from "@fullcalendar/daygrid";
import iCalendarPlugin from "@fullcalendar/icalendar"; import iCalendarPlugin from "@fullcalendar/icalendar";
import interactionPlugin from "@fullcalendar/interaction"; import interactionPlugin from "@fullcalendar/interaction";
@ -55,7 +56,7 @@ const props = defineProps<{
const { t } = useI18n({ useScope: "global" }); const { t } = useI18n({ useScope: "global" });
const listOfEventsByDate = ref<{ events: object[]; date?: string }>({ const listOfEventsByDate = ref<{ events: EventSegment[]; date?: string }>({
events: [], events: [],
date: undefined, date: undefined,
}); });
@ -70,14 +71,14 @@ const calendarOptions = computed((): object => {
}, },
nextDayThreshold: "09:00:00", nextDayThreshold: "09:00:00",
dayMaxEventRows: 0, 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 }) => { moreLinkContent: (arg: { num: number; text: string }) => {
return "+" + arg.num.toString(); return "+" + arg.num.toString();
}, },
moreLinkClick: (info: { moreLinkClick: (info: {
date: Date; date: Date;
allSegs: object[]; allSegs: EventSegment[];
hiddenSegs: []; hiddenSegs: EventSegment[];
jsEvent: object; jsEvent: object;
}) => { }) => {
listOfEventsByDate.value = { listOfEventsByDate.value = {
@ -93,7 +94,7 @@ const calendarOptions = computed((): object => {
)[0] as undefined | HTMLElement; )[0] as undefined | HTMLElement;
moreLinkElement?.click(); moreLinkElement?.click();
}, },
contentHeight: 350, contentHeight: "auto",
eventClassNames: "line-clamp-3 bg-mbz-yellow dark:bg-mbz-purple", eventClassNames: "line-clamp-3 bg-mbz-yellow dark:bg-mbz-purple",
headerToolbar: { headerToolbar: {
left: "prev,next,today", left: "prev,next,today",
@ -124,6 +125,8 @@ const calendarOptions = computed((): object => {
.agenda-view .fc-daygrid-day-events { .agenda-view .fc-daygrid-day-events {
min-height: 1.1rem !important; min-height: 1.1rem !important;
margin-bottom: 0.2rem !important;
margin-left: 0.1rem !important;
} }
.clock-icon { .clock-icon {