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

Improves all-day event layout calculation

Browse source 
Refactors all-day event layout calculation to use the header elements directly.

This change improves the accuracy of event positioning
and fixes potential issues with date handling.
This commit is contained in:
Janus C. H. Knudsen 2025-10-01 21:47:05 +02:00
parent d7867d4a9f
commit 4e5077364e
2 changed files with 7 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/managers/AllDayManager.ts
View file

@ -127,14 +127,14 @@ export class AllDayManager {
eventBus.on('header:ready', (event: Event) => { eventBus.on('header:ready', (event: Event) => {
let headerReadyEventPayload = (event as CustomEvent<HeaderReadyEventPayload>).detail; let headerReadyEventPayload = (event as CustomEvent<HeaderReadyEventPayload>).detail;
var startDate = headerReadyEventPayload.headerElements.startDate; let startDate = new Date(headerReadyEventPayload.headerElements.at(0)!.date);
var endDate = headerReadyEventPayload.headerElements.endDate; let endDate = new Date(headerReadyEventPayload.headerElements.at(-1)!.date);
var events: CalendarEvent[] = this.eventManager.getEventsForPeriod(startDate, endDate); var events: CalendarEvent[] = this.eventManager.getEventsForPeriod(startDate, endDate);
// Filter for all-day events // Filter for all-day events
const allDayEvents = events.filter(event => event.allDay); const allDayEvents = events.filter(event => event.allDay);
var eventLayouts = this.calculateAllDayEventsLayout(allDayEvents, headerReadyEventPayload.headerElements) let eventLayouts = this.calculateAllDayEventsLayout(allDayEvents, headerReadyEventPayload.headerElements)
this.allDayEventRenderer.renderAllDayEventsForPeriod(eventLayouts); this.allDayEventRenderer.renderAllDayEventsForPeriod(eventLayouts);
this.checkAndAnimateAllDayHeight(); this.checkAndAnimateAllDayHeight();
@ -304,14 +304,14 @@ export class AllDayManager {
* Calculate layout for ALL all-day events using AllDayLayoutEngine * Calculate layout for ALL all-day events using AllDayLayoutEngine
* This is the correct method that processes all events together for proper overlap detection * This is the correct method that processes all events together for proper overlap detection
*/ */
private calculateAllDayEventsLayout(events: CalendarEvent[], weekDates: ColumnBounds[]): EventLayout[] { private calculateAllDayEventsLayout(events: CalendarEvent[], dayHeaders: ColumnBounds[]): EventLayout[] {
// Store current state // Store current state
this.currentAllDayEvents = events; this.currentAllDayEvents = events;
this.currentWeekDates = weekDates; this.currentWeekDates = dayHeaders;
// Initialize layout engine with provided week dates // Initialize layout engine with provided week dates
var layoutEngine = new AllDayLayoutEngine(weekDates); let layoutEngine = new AllDayLayoutEngine(dayHeaders.map(column => column.date));
// Calculate layout for all events together - AllDayLayoutEngine handles CalendarEvents directly // Calculate layout for all events together - AllDayLayoutEngine handles CalendarEvents directly
return layoutEngine.calculateLayout(events); return layoutEngine.calculateLayout(events);

6
src/managers/HeaderManager.ts
View file

@ -5,8 +5,6 @@ import { CoreEvents } from '../constants/CoreEvents';
import { HeaderRenderContext } from '../renderers/HeaderRenderer'; import { HeaderRenderContext } from '../renderers/HeaderRenderer';
import { ResourceCalendarData } from '../types/CalendarTypes'; import { ResourceCalendarData } from '../types/CalendarTypes';
import { DragMouseEnterHeaderEventPayload, DragMouseLeaveHeaderEventPayload, HeaderReadyEventPayload } from '../types/EventTypes'; import { DragMouseEnterHeaderEventPayload, DragMouseLeaveHeaderEventPayload, HeaderReadyEventPayload } from '../types/EventTypes';
import { DateCalculator } from '../utils/DateCalculator';
import { PositionUtils } from '../utils/PositionUtils';
import { ColumnDetectionUtils } from '../utils/ColumnDetectionUtils'; import { ColumnDetectionUtils } from '../utils/ColumnDetectionUtils';
/** /**
@ -138,10 +136,6 @@ export class HeaderManager {
// Setup event listeners on the new content // Setup event listeners on the new content
this.setupHeaderDragListeners(); this.setupHeaderDragListeners();
// Calculate period from current date
const weekStart = DateCalculator.getISOWeekStart(currentDate);
const weekEnd = DateCalculator.addDays(weekStart, 6);
// Notify other managers that header is ready with period data // Notify other managers that header is ready with period data
const payload: HeaderReadyEventPayload = { const payload: HeaderReadyEventPayload = {
headerElements: ColumnDetectionUtils.getHeaderColumns(), headerElements: ColumnDetectionUtils.getHeaderColumns(),