Ehrenamt/ff-admin
2
0
Fork 0
Code Issues 13 Pull requests Projects Releases 27 Packages Wiki Activity Actions

add styling option for wide calendar view

Browse source
This commit is contained in:
Julian Krauser 2025-04-14 09:17:32 +02:00
parent 1296331796
commit 6d45325543
2 changed files with 19 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/components/CustomCalendar.vue
View file

@ -1,7 +1,10 @@
<template>
<div class="flex flex-col w-full h-full gap-2 justify-between overflow-hidden">
<div class="flex flex-row gap-2 max-xl:flex-wrap justify-between max-sm:justify-center">
<div class="flex flex-row max-xl:order-2">
<div
class="flex flex-row gap-2 justify-between max-sm:justify-center"
:class="smallStyling ? 'max-lg:flex-wrap' : 'max-xl:flex-wrap'"
>
<div class="flex flex-row" :class="smallStyling ? 'max-lg:order-2' : 'max-xl:order-2'">
<button
:primary="view == 'dayGridMonth'"
:primary-outline="view != 'dayGridMonth'"
@ -27,8 +30,10 @@
Liste
</button>
</div>
<p class="text-3xl w-full max-xl:order-1 text-center">{{ currentTitle }}</p>
<div class="flex flex-row max-xl:order-3">
<p class="text-3xl w-full text-center" :class="smallStyling ? 'max-lg:order-1' : 'max-xl:order-1'">
{{ currentTitle }}
</p>
<div class="flex flex-row" :class="smallStyling ? 'max-lg:order-3' : 'max-xl:order-3'">
<button primary-outline class="rounded-r-none!" @click="navigateView('prev')">
<ChevronLeftIcon />
</button>
@ -83,6 +88,10 @@ export default defineComponent({
type: Boolean,
default: true,
},
smallStyling: {
type: Boolean,
default: false,
},
},
emits: {
dateSelect: ({ start, end, allDay }: { start: string; end: string; allDay: boolean }) => {