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

Refactors event rendering and display

Browse source 
Improves event rendering by introducing dedicated event
renderers and streamlining event display logic.

- Adds a base event renderer and specialized date and
  resource-based renderers to handle event display logic.
- Renders all-day events within a dedicated container in the
  calendar header.
- Removes the direct filtering of all-day events from the
  `GridManager`.
- Fixes an issue where the 'Summer Festival' event started on the
  wrong date.

The changes enhance the flexibility and maintainability of the
calendar, provide dedicated containers and styling for allday events and fix date issues related to certain events
This commit is contained in:
Janus Knudsen 2025-08-24 00:13:07 +02:00
parent 25522bfe17
commit 9c65143df2
11 changed files with 190 additions and 121 deletions
Download patch file Download diff file Expand all files Collapse all files

69
src/renderers/HeaderRenderer.ts
View file

@ -17,7 +17,6 @@ export interface HeaderRenderer {
export interface HeaderRenderContext {
currentWeek: Date;
config: CalendarConfig;
allDayEvents?: any[];
resourceData?: ResourceCalendarData | null;
}
@ -53,74 +52,6 @@ export class DateHeaderRenderer implements HeaderRenderer {
calendarHeader.appendChild(header);
});
// Render all-day events in row 2
this.renderAllDayEvents(calendarHeader, context);
}
private renderAllDayEvents(calendarHeader: HTMLElement, context: HeaderRenderContext): void {
const { currentWeek, config, allDayEvents = [] } = context;
const dates = this.dateCalculator.getWorkWeekDates(currentWeek);
const weekDays = config.getDateViewSettings().weekDays;
const daysToShow = dates.slice(0, weekDays);
// TEST: Add a simple test event for Monday (column 1)
const testEvent = document.createElement('swp-allday-event');
testEvent.textContent = 'TEST ALL-DAY EVENT';
testEvent.style.gridColumn = '1';
testEvent.style.gridRow = '2';
testEvent.style.backgroundColor = 'orange';
testEvent.style.color = 'white';
testEvent.style.padding = '4px';
testEvent.style.fontSize = '12px';
testEvent.style.fontWeight = 'bold';
calendarHeader.appendChild(testEvent);
console.log('🧪 Added test all-day event to row 2, column 1');
// Process each all-day event to calculate its span
allDayEvents.forEach(event => {
const startDate = new Date(event.start);
const endDate = new Date(event.end);
// Find start and end column indices
let startColumnIndex = -1;
let endColumnIndex = -1;
daysToShow.forEach((date, index) => {
const dateStr = this.dateCalculator.formatISODate(date);
const startDateStr = this.dateCalculator.formatISODate(startDate);
if (dateStr === startDateStr) {
startColumnIndex = index;
}
// For end date, we need to check if the event spans to this day
if (date <= endDate) {
endColumnIndex = index;
}
});
// Only render if the event starts within the visible week
if (startColumnIndex >= 0) {
// If end column is not found or is before start, default to single day
if (endColumnIndex < startColumnIndex) {
endColumnIndex = startColumnIndex;
}
const allDayEvent = document.createElement('swp-allday-event');
allDayEvent.textContent = event.title;
// Set grid column span: start column (1-based) to end column + 1 (1-based)
const gridColumnStart = startColumnIndex + 1;
const gridColumnEnd = endColumnIndex + 2;
allDayEvent.style.gridColumn = `${gridColumnStart} / ${gridColumnEnd}`;
// Color is now handled by CSS classes based on event type
allDayEvent.dataset.type = event.type || 'work';
calendarHeader.appendChild(allDayEvent);
}
});
}