Fix sizing issue + use better type declarations
This commit is contained in:
parent
4ceee2efc7
commit
1e0db0d8c9
|
@ -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 {
|
||||||
|
|
Loading…
Reference in a new issue