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

feature/#69-calendar-view #81

Merged
jkeffects merged 2 commits from #69-calendar-view into develop 2025-04-14 07:18:02 +00:00
Conversation 0 Commits 2 Files changed 6 +19 -5
2 changed files with 19 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 6d45325543 - Show all commits

17
src/components/CustomCalendar.vue
View file

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

7
src/views/public/calendar/Calendar.vue
View file

@ -12,7 +12,12 @@
</template> </template>
<template #diffMain> <template #diffMain>
<div class="flex flex-col w-full h-full gap-2 justify-between px-7 overflow-hidden"> <div class="flex flex-col w-full h-full gap-2 justify-between px-7 overflow-hidden">
<CustomCalendar :items="formattedItems" :allow-interaction="false" @event-select="eventClick" /> <CustomCalendar
:items="formattedItems"
:allow-interaction="false"
:small-styling="true"
@event-select="eventClick"
/>
</div> </div>
</template> </template>
</MainTemplate> </MainTemplate>