keep calendar event data while resizing event

This commit is contained in:
Gregor Vostrak
2026-03-03 15:00:46 +01:00
parent 452acca942
commit 02f6436fd0
2 changed files with 23 additions and 2 deletions

View File

@@ -51,7 +51,7 @@ const formattedDuration = computed(() =>
<div v-if="clientName" class="opacity-85">
{{ clientName }}
</div>
<div class="opacity-90">
<div class="opacity-90" data-duration>
{{ formattedDuration }}
</div>
</div>

View File

@@ -38,6 +38,21 @@ export function useVisualSnap({
return { mirror, harness };
}
/**
* Copy the Vue-rendered event content from the original event into the
* FC mirror element (which only gets FC's default time-only rendering).
*/
function copyEventContentToMirror(calendarEl: HTMLElement, mirror: HTMLElement) {
const originalEvent = calendarEl.querySelector(
'.fc-event-resizing:not(.fc-event-mirror), .fc-event-dragging:not(.fc-event-mirror)'
) as HTMLElement | null;
if (!originalEvent) return;
const originalMain = originalEvent.querySelector('.fc-event-main') as HTMLElement | null;
const mirrorMain = mirror.querySelector('.fc-event-main') as HTMLElement | null;
if (!originalMain || !mirrorMain) return;
mirrorMain.innerHTML = originalMain.innerHTML;
}
function updateMirrorDurationLabel(
mirror: HTMLElement,
snappedTop: number,
@@ -46,7 +61,7 @@ export function useVisualSnap({
) {
const snappedDurationMin = Math.round((snappedEnd - snappedTop) / snapPx) * snapMinutes();
const durationText = formatDuration(snappedDurationMin * 60);
const durationEl = mirror.querySelector('.fc-event-main')?.querySelector('div:last-child');
const durationEl = mirror.querySelector('[data-duration]');
if (durationEl) {
durationEl.textContent = durationText;
}
@@ -115,11 +130,17 @@ export function useVisualSnap({
let initialTop: number | null = null;
let initialEnd: number | null = null;
let resizeEdge: 'top' | 'bottom' | null = null;
let contentCopied = false;
startLoop((calendarEl, snapPx) => {
const { mirror, harness } = findMirrorHarness(calendarEl);
if (!harness) return;
if (mirror && !contentCopied) {
copyEventContentToMirror(calendarEl, mirror);
contentCopied = true;
}
const top = parseFloat(harness.style.top) || 0;
const endPos = -(parseFloat(harness.style.bottom) || 0);