quirinecker/dayplanner
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added calendar and implemented bridge between small and big calendar

Browse Source
This commit is contained in:
quirinecker
2025-05-11 21:13:56 +02:00
parent f8cb42962a
commit 555aca0a99
10 changed files with 77 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
web/components/ui/calendar/Calendar.vue
View File

@@ -3,9 +3,10 @@ import { computed, ref } from 'vue';
import CalendarHeader from './CalendarHeader.vue';
import CalendarCollumn from './CalendarCollumn.vue';
import moment, { type Moment } from 'moment';
import { Event } from '~/utils/event';
const events = defineModel<Event[]>('events', { required: true })
const date = ref(moment())
const date = defineModel<Moment>('date', { required: true })
const draggedEvent = ref<DraggedEvent | undefined>()
type Day = {
@@ -18,7 +19,7 @@ const week = computed(() => {
})
function pushEventWithCollisionUpdate(array: CollissionWrapper[], event: Event, collisions: CollissionWrapper[], collisionCount: number) {
array.push({event: event, collisions: collisionCount })
array.push({ event: event, collisions: collisionCount })
for (let collision of collisions) {
collision.collisions = collisionCount
@@ -105,8 +106,8 @@ function quickCreate(date: Moment, timespan: Timespan) {
<div class="calendar flex flex-row w-full flex-1 items-stretch">
<CalendarHeader :seperators="seperators" />
<CalendarCollumn v-for="day in days" :seperators="seperators" :day="day.date" :events="day.events" v-model:draggedEvent="draggedEvent"
@quick-create="quickCreate" />
<CalendarCollumn v-for="day in days" :seperators="seperators" :day="day.date" :events="day.events"
v-model:draggedEvent="draggedEvent" @quick-create="quickCreate" />
</div>
</div>

7
web/components/ui/calendar/CalendarCollumn.vue
View File

@@ -92,13 +92,13 @@ function dragDrop(_: DragEvent) {
<template>
<div class="flex flex-col h-full grow">
<div class="flex justify-center items-center flex-col bg-gray-600 h-18 text-white border-b-2 border-white">
<div class="flex justify-center items-center flex-col h-18 border-b-2 border-text">
<div>{{ props.day.format('dd').toUpperCase() }}</div>
<div>{{ props.day.date() }}</div>
</div>
<div id="col" ref="column" @mousedown="mousedown" @mouseup="mouseup" @mousemove="mouseover" @dragover="dragover"
@dragend="dragDrop" class="bg-gray-600 text-white relative flex flex-col grow items-center">
@dragend="dragDrop" class="relative flex flex-col grow items-center">
<CalendarSeperator v-for="sep in seperators" :seperator="sep">
<hr class="w-full">
</CalendarSeperator>
@@ -109,7 +109,8 @@ function dragDrop(_: DragEvent) {
<CalendarEvent v-for="event in column" :event="event" :columnIndex="index" @move="eventMove" />
</div>
<div v-if="draggedEvent !== undefined && draggedEvent.date.isSame(props.day)" class="absolute w-11/12 top-20 bg-black opacity-45 rounded-lg"
<div v-if="draggedEvent !== undefined && draggedEvent.date.isSame(props.day)"
class="absolute w-11/12 top-20 bg-black opacity-45 rounded-lg"
:style="{ height: `${draggedEvent.height}px`, top: `${draggedEvent.top}px` }"></div>
</div>
</div>

6
web/components/ui/calendar/CalendarHeader.vue
View File

@@ -10,10 +10,10 @@ defineProps<{
</script>
<template>
<div class="flex flex-col h-full grow">
<div class="flex justify-center items-center bg-gray-600 h-18 text-white border-b-white border-b-2">vue-calendar
<div class="flex flex-col h-full w-32">
<div class="flex justify-center items-center h-18 border-b-text border-b-2">vue-calendar
</div>
<div class="calendar-legend bg-gray-600 text-white relative flex flex-col grow justify-evenly">
<div class="calendar-legend relative flex flex-col grow justify-evenly">
<CalendarSeperator v-for="sep in seperators" :seperator="sep">
{{ sep.text }}
</CalendarSeperator>

3
web/components/ui/calendar/CalendarSeperator.vue
View File

@@ -12,7 +12,8 @@ const relativePositionOf = function (time: Moment) {
</script>
<template>
<div :style="{top: relativePositionOf(seperator.time)}" class="h-10 w-full flex justify-center items-center text-white border-white absolute -translate-y-1/2">
<div :style="{ top: relativePositionOf(seperator.time) }"
class="h-10 w-full flex justify-center items-center border-white absolute -translate-y-1/2">
<slot />
</div>
</template>