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

Adds drag column change event handling

Browse source 
Introduces support for moving events between columns during drag
Tracks column changes and updates event positioning dynamically
Enables smooth cross-column event dragging experience
This commit is contained in:
Janus C. H. Knudsen 2025-12-10 17:18:37 +01:00
parent 159b023f60
commit 8b95f2735f
4 changed files with 79 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

35
src/v2/features/event/EventRenderer.ts
View file

@ -1,8 +1,10 @@
import { ICalendarEvent } from '../../types/CalendarTypes';
import { ICalendarEvent, IEventBus } from '../../types/CalendarTypes';
import { EventService } from '../../storage/events/EventService';
import { DateService } from '../../core/DateService';
import { IGridConfig } from '../../core/IGridConfig';
import { calculateEventPosition } from '../../utils/PositionUtils';
import { CoreEvents } from '../../constants/CoreEvents';
import { IDragColumnChangePayload } from '../../types/DragTypes';
/**
* EventRenderer - Renders calendar events to the DOM
@ -16,8 +18,35 @@ export class EventRenderer {
constructor(
private eventService: EventService,
private dateService: DateService,
private gridConfig: IGridConfig
) {}
private gridConfig: IGridConfig,
private eventBus: IEventBus
) {
this.setupDragListeners();
}
/**
* Setup listeners for drag-drop events
*/
private setupDragListeners(): void {
this.eventBus.on(CoreEvents.EVENT_DRAG_COLUMN_CHANGE, (e) => {
const payload = (e as CustomEvent<IDragColumnChangePayload>).detail;
this.handleColumnChange(payload);
});
}
/**
* Handle event moving to a new column during drag
*/
private handleColumnChange(payload: IDragColumnChangePayload): void {
const eventsLayer = payload.newColumn.querySelector('swp-events-layer');
if (!eventsLayer) return;
// Move element to new column
eventsLayer.appendChild(payload.element);
// Preserve Y position
payload.element.style.top = `${payload.currentY}px`;
}
/**
* Render events for visible dates into day columns