Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updates event dates using 1970 reference

Browse source 
Modifies event rendering to correctly handle dates that use a 1970 reference point during drag and drop operations.

This ensures that events maintain their correct date when moved between columns, resolving an issue where dragged events would revert to the 1970 reference date.
This commit is contained in:
Janus Knudsen 2025-09-10 00:33:39 +02:00
parent d205ccb0b6
commit 17b9b563a4
1 changed files with 48 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

100
src/renderers/EventRenderer.ts
View file

@ -238,6 +238,17 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
const cachedDuration = parseInt(clone.dataset.originalDuration || '60'); const cachedDuration = parseInt(clone.dataset.originalDuration || '60');
const endTotalMinutes = snappedStartMinutes + cachedDuration; const endTotalMinutes = snappedStartMinutes + cachedDuration;
// Update dataset with reference date for performance
const referenceDate = new Date('1970-01-01T00:00:00');
const startDate = new Date(referenceDate);
startDate.setMinutes(startDate.getMinutes() + snappedStartMinutes);
const endDate = new Date(referenceDate);
endDate.setMinutes(endDate.getMinutes() + endTotalMinutes);
clone.dataset.start = startDate.toISOString();
clone.dataset.end = endDate.toISOString();
// Update display // Update display
const timeElement = clone.querySelector('swp-event-time'); const timeElement = clone.querySelector('swp-event-time');
if (timeElement) { if (timeElement) {
@ -433,7 +444,7 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
// Behold z-index hvis det er et stacked event // Behold z-index hvis det er et stacked event
// Update dataset with new times after successful drop // Update dataset with new times after successful drop
const newEvent = this.elementToCalendarEventWithNewPosition(this.draggedClone, finalColumn); const newEvent = this.elementToCalendarEvent(this.draggedClone);
if (newEvent) { if (newEvent) {
this.draggedClone.dataset.start = newEvent.start.toISOString(); this.draggedClone.dataset.start = newEvent.start.toISOString();
this.draggedClone.dataset.end = newEvent.end.toISOString(); this.draggedClone.dataset.end = newEvent.end.toISOString();
@ -490,7 +501,7 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
if (!eventsLayer) return; if (!eventsLayer) return;
// Convert dropped element to CalendarEvent with new position // Convert dropped element to CalendarEvent with new position
const droppedEvent = this.elementToCalendarEventWithNewPosition(droppedElement, targetColumn); const droppedEvent = this.elementToCalendarEvent(droppedElement);
if (!droppedEvent) return; if (!droppedEvent) return;
// Get existing events in the column (excluding the dropped element) // Get existing events in the column (excluding the dropped element)
@ -568,41 +579,52 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
} }
} }
/** /**
* Convert DOM element to CalendarEvent using its NEW position after drag * Convert DOM element to CalendarEvent - handles both normal and 1970 reference dates
*/ */
private elementToCalendarEventWithNewPosition(element: HTMLElement, targetColumn: string): CalendarEvent | null { private elementToCalendarEvent(element: HTMLElement): CalendarEvent | null {
const eventId = element.dataset.eventId; const eventId = element.dataset.eventId;
const title = element.dataset.title; const title = element.dataset.title;
const type = element.dataset.type; const type = element.dataset.type;
const originalDuration = element.dataset.originalDuration; const start = element.dataset.start;
const end = element.dataset.end;
if (!eventId || !title || !type) { if (!eventId || !title || !type || !start || !end) {
return null; return null;
} }
// Calculate new start/end times based on current position let startDate = new Date(start);
const currentTop = parseInt(element.style.top) || 0; let endDate = new Date(end);
const durationMinutes = originalDuration ? parseInt(originalDuration) : 60;
// Convert position to time // Check if we have 1970 reference date (from drag operations)
const gridSettings = calendarConfig.getGridSettings(); if (startDate.getFullYear() === 1970) {
const hourHeight = gridSettings.hourHeight; // Find the parent column to get the actual date
const dayStartHour = gridSettings.dayStartHour; const columnElement = element.closest('swp-day-column') as HTMLElement;
if (columnElement && columnElement.dataset.date) {
const columnDate = new Date(columnElement.dataset.date + 'T00:00:00');
// Calculate minutes from grid start // Keep the time portion from the 1970 dates, but use the column's date
const minutesFromGridStart = (currentTop / hourHeight) * 60; startDate = new Date(
const actualStartMinutes = (dayStartHour * 60) + minutesFromGridStart; columnDate.getFullYear(),
const actualEndMinutes = actualStartMinutes + durationMinutes; columnDate.getMonth(),
columnDate.getDate(),
startDate.getHours(),
startDate.getMinutes()
);
// Create ISO date strings for the target column endDate = new Date(
const targetDate = new Date(targetColumn + 'T00:00:00'); columnDate.getFullYear(),
const startDate = new Date(targetDate); columnDate.getMonth(),
startDate.setMinutes(startDate.getMinutes() + actualStartMinutes); columnDate.getDate(),
endDate.getHours(),
const endDate = new Date(targetDate); endDate.getMinutes()
endDate.setMinutes(endDate.getMinutes() + actualEndMinutes); );
}
}
const duration = element.dataset.duration;
return { return {
id: eventId, id: eventId,
title: title, title: title,
@ -611,36 +633,6 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
type: type, type: type,
allDay: false, allDay: false,
syncStatus: 'synced', syncStatus: 'synced',
metadata: {
duration: durationMinutes
}
};
}
/**
* Convert DOM element to CalendarEvent for overlap detection
*/
private elementToCalendarEvent(element: HTMLElement): CalendarEvent | null {
const eventId = element.dataset.eventId;
const title = element.dataset.title;
const start = element.dataset.start;
const end = element.dataset.end;
const type = element.dataset.type;
const duration = element.dataset.duration;
if (!eventId || !title || !start || !end || !type) {
return null;
}
return {
id: eventId,
title: title,
start: new Date(start),
end: new Date(end),
type: type,
allDay: false,
syncStatus: 'synced', // Default to synced for existing events
metadata: { metadata: {
duration: duration ? parseInt(duration) : 60 duration: duration ? parseInt(duration) : 60
} }