Enables all-day event to timed event conversion

Introduces the ability to convert all-day events to timed events by dragging them out of the header.

Leverages a factory method to create timed events from all-day elements, ensuring proper data conversion and styling.

Improves user experience by allowing more flexible event scheduling.
This commit is contained in:
Janus Knudsen 2025-09-10 23:57:48 +02:00
parent e9298934c6
commit 163314353b
3 changed files with 72 additions and 39 deletions

View file

@ -115,6 +115,51 @@ export class SwpEventElement extends BaseEventElement {
public static fromCalendarEvent(event: CalendarEvent): SwpEventElement {
return new SwpEventElement(event);
}
/**
* Factory method to convert an all-day HTML element to a timed SwpEventElement
*/
public static fromAllDayElement(allDayElement: HTMLElement): SwpEventElement {
// Extract data from all-day element's dataset
const eventId = allDayElement.dataset.eventId || '';
const title = allDayElement.dataset.title || allDayElement.textContent || 'Untitled';
const type = allDayElement.dataset.type || 'work';
const startStr = allDayElement.dataset.start;
const endStr = allDayElement.dataset.end;
const durationStr = allDayElement.dataset.duration;
if (!startStr || !endStr) {
throw new Error('All-day element missing start/end dates');
}
// Parse dates and set reasonable 1-hour duration for timed event
const originalStart = new Date(startStr);
const duration = durationStr ? parseInt(durationStr) : 60; // Default 1 hour
// For conversion, use current time or a reasonable default (9 AM)
const now = new Date();
const startDate = new Date(originalStart);
startDate.setHours(now.getHours() || 9, now.getMinutes() || 0, 0, 0);
const endDate = new Date(startDate);
endDate.setMinutes(endDate.getMinutes() + duration);
// Create CalendarEvent object
const calendarEvent: CalendarEvent = {
id: eventId,
title: title,
start: startDate,
end: endDate,
type: type,
allDay: false,
syncStatus: 'synced',
metadata: {
duration: duration.toString()
}
};
return new SwpEventElement(calendarEvent);
}
}
/**