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

Enables all-day event to timed event conversion

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

41
src/renderers/EventRenderer.ts
View file

@ -147,10 +147,10 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
this.handleConvertToTimed(eventId, targetColumn, targetY);
});
// Handle simple all-day duration adjustment (when leaving header)
eventBus.on('drag:adjust-allday-duration', (event) => {
const { eventId, durationMinutes } = (event as CustomEvent).detail;
this.handleAdjustAllDayDuration(eventId, durationMinutes);
// Handle all-day to timed conversion (when leaving header)
eventBus.on('drag:convert-allday-to-timed', (event) => {
const { eventId, originalElement } = (event as CustomEvent).detail;
this.handleConvertAllDayToTimed(eventId, originalElement);
});
// Handle navigation period change (when slide animation completes)
@ -780,30 +780,31 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
}
/**
* Handle simple all-day duration adjustment (when leaving header)
* Handle all-day to timed conversion using SwpEventElement factory
*/
private handleAdjustAllDayDuration(eventId: string, durationMinutes: number): void {
private handleConvertAllDayToTimed(eventId: string, originalElement: HTMLElement): void {
if (!this.draggedClone) return;
// Only adjust if it's an all-day event
// Only convert if it's an all-day event
if (this.draggedClone.tagName !== 'SWP-ALLDAY-EVENT') return;
// Simply adjust the duration and height - keep all other data intact
this.draggedClone.dataset.duration = durationMinutes.toString();
// Use SwpEventElement factory to create a proper timed event
const swpTimedEvent = SwpEventElement.fromAllDayElement(this.draggedClone);
const newTimedElement = swpTimedEvent.getElement();
// Calculate new height based on duration
const gridSettings = calendarConfig.getGridSettings();
const hourHeight = gridSettings.hourHeight;
const newHeight = (durationMinutes / 60) * hourHeight;
this.draggedClone.style.height = `${newHeight}px`;
// Apply drag styling to the new element
this.applyDragStyling(newTimedElement);
// Remove all-day specific styling to make it behave like a timed event
this.draggedClone.style.gridColumn = '';
this.draggedClone.style.gridRow = '';
this.draggedClone.dataset.allDay = "false";
// Get parent container
const parent = this.draggedClone.parentElement;
// Apply basic timed event positioning
this.applyDragStyling(this.draggedClone);
// Replace the all-day clone with the new timed event element
if (parent) {
parent.replaceChild(newTimedElement, this.draggedClone);
}
// Update our reference to the new element
this.draggedClone = newTimedElement;
}
/**