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

Refactors date calculations into DateCalculator

Browse source 
Centralizes date calculation logic into a dedicated DateCalculator
class for improved maintainability and testability.

Removes redundant date calculation methods from CalendarManager,
ColumnRenderer, HeaderRenderer and NavigationRenderer, and utilizes
the DateCalculator for these calculations.

Updates components to use DateCalculator for consistent date
handling, including week start determination, date formatting,
and "is today" checks.
This commit is contained in:
Janus Knudsen 2025-08-18 23:42:03 +02:00
parent 2f854b2c64
commit 18f7953db4
5 changed files with 233 additions and 124 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/renderers/ColumnRenderer.ts
View file

@ -2,6 +2,7 @@
import { CalendarConfig } from '../core/CalendarConfig';
import { ResourceCalendarData } from '../types/CalendarTypes';
import { DateCalculator } from '../utils/DateCalculator';
/**
* Interface for column rendering strategies
@ -23,10 +24,15 @@ export interface ColumnRenderContext {
* Date-based column renderer (original functionality)
*/
export class DateColumnRenderer implements ColumnRenderer {
private dateCalculator: DateCalculator;
render(columnContainer: HTMLElement, context: ColumnRenderContext): void {
const { currentWeek, config } = context;
const dates = this.getWeekDates(currentWeek, config);
// Initialize date calculator
this.dateCalculator = new DateCalculator(config);
const dates = this.dateCalculator.getWorkWeekDates(currentWeek);
const dateSettings = config.getDateViewSettings();
const daysToShow = dates.slice(0, dateSettings.weekDays);
@ -34,7 +40,7 @@ export class DateColumnRenderer implements ColumnRenderer {
daysToShow.forEach((date) => {
const column = document.createElement('swp-day-column');
(column as any).dataset.date = this.formatDate(date);
(column as any).dataset.date = this.dateCalculator.formatISODate(date);
const eventsLayer = document.createElement('swp-events-layer');
column.appendChild(eventsLayer);
@ -43,26 +49,6 @@ export class DateColumnRenderer implements ColumnRenderer {
});
}
private getWeekDates(weekStart: Date, config: CalendarConfig): Date[] {
const dates: Date[] = [];
const workWeekSettings = config.getWorkWeekSettings();
// Calculate dates based on actual work days (e.g., [1,2,3,4] for Mon-Thu)
workWeekSettings.workDays.forEach(dayOfWeek => {
const date = new Date(weekStart);
// Set to the start of the week (Sunday = 0)
date.setDate(weekStart.getDate() - weekStart.getDay());
// Add the specific day of week
date.setDate(date.getDate() + dayOfWeek);
dates.push(date);
});
return dates;
}
private formatDate(date: Date): string {
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
}
}
/**

43
src/renderers/HeaderRenderer.ts
View file

@ -2,6 +2,7 @@
import { CalendarConfig } from '../core/CalendarConfig';
import { ResourceCalendarData } from '../types/CalendarTypes';
import { DateCalculator } from '../utils/DateCalculator';
/**
* Interface for header rendering strategies
@ -24,17 +25,22 @@ export interface HeaderRenderContext {
* Date-based header renderer (original functionality)
*/
export class DateHeaderRenderer implements HeaderRenderer {
private dateCalculator: DateCalculator;
render(calendarHeader: HTMLElement, context: HeaderRenderContext): void {
const { currentWeek, config, allDayEvents = [] } = context;
const dates = this.getWeekDates(currentWeek, config);
// Initialize date calculator with config
this.dateCalculator = new DateCalculator(config);
const dates = this.dateCalculator.getWorkWeekDates(currentWeek);
const weekDays = config.get('weekDays');
const daysToShow = dates.slice(0, weekDays);
const workWeekSettings = config.getWorkWeekSettings();
daysToShow.forEach((date, index) => {
const header = document.createElement('swp-day-header');
if (this.isToday(date)) {
if (this.dateCalculator.isToday(date)) {
(header as any).dataset.today = 'true';
}
@ -42,7 +48,7 @@ export class DateHeaderRenderer implements HeaderRenderer {
<swp-day-name>${workWeekSettings.dayNames[index]}</swp-day-name>
<swp-day-date>${date.getDate()}</swp-day-date>
`;
(header as any).dataset.date = this.formatDate(date);
(header as any).dataset.date = this.dateCalculator.formatISODate(date);
calendarHeader.appendChild(header);
});
@ -54,7 +60,7 @@ export class DateHeaderRenderer implements HeaderRenderer {
private renderAllDayEvents(calendarHeader: HTMLElement, context: HeaderRenderContext): void {
const { currentWeek, config, allDayEvents = [] } = context;
const dates = this.getWeekDates(currentWeek, config);
const dates = this.dateCalculator.getWorkWeekDates(currentWeek);
const weekDays = config.get('weekDays');
const daysToShow = dates.slice(0, weekDays);
@ -68,8 +74,8 @@ export class DateHeaderRenderer implements HeaderRenderer {
let endColumnIndex = -1;
daysToShow.forEach((date, index) => {
const dateStr = this.formatDate(date);
const startDateStr = this.formatDate(startDate);
const dateStr = this.dateCalculator.formatISODate(date);
const startDateStr = this.dateCalculator.formatISODate(startDate);
if (dateStr === startDateStr) {
startColumnIndex = index;
@ -102,31 +108,6 @@ export class DateHeaderRenderer implements HeaderRenderer {
});
}
private getWeekDates(weekStart: Date, config: CalendarConfig): Date[] {
const dates: Date[] = [];
const workWeekSettings = config.getWorkWeekSettings();
// Calculate dates based on actual work days (e.g., [1,2,3,4] for Mon-Thu)
workWeekSettings.workDays.forEach(dayOfWeek => {
const date = new Date(weekStart);
// Set to the start of the week (Sunday = 0)
date.setDate(weekStart.getDate() - weekStart.getDay());
// Add the specific day of week
date.setDate(date.getDate() + dayOfWeek);
dates.push(date);
});
return dates;
}
private isToday(date: Date): boolean {
const today = new Date();
return date.toDateString() === today.toDateString();
}
private formatDate(date: Date): string {
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
}
}

43
src/renderers/NavigationRenderer.ts
View file

@ -2,6 +2,7 @@ import { IEventBus } from '../types/CalendarTypes';
import { EventTypes } from '../constants/EventTypes';
import { DateUtils } from '../utils/DateUtils';
import { CalendarConfig } from '../core/CalendarConfig';
import { DateCalculator } from '../utils/DateCalculator';
/**
* NavigationRenderer - Handles DOM rendering for navigation containers
@ -10,10 +11,12 @@ import { CalendarConfig } from '../core/CalendarConfig';
export class NavigationRenderer {
private eventBus: IEventBus;
private config: CalendarConfig;
private dateCalculator: DateCalculator;
constructor(eventBus: IEventBus, config: CalendarConfig) {
this.eventBus = eventBus;
this.config = config;
this.dateCalculator = new DateCalculator(config);
this.setupEventListeners();
}
@ -99,17 +102,14 @@ export class NavigationRenderer {
header.innerHTML = '';
dayColumns.innerHTML = '';
// Render headers for target week
// Get dates using DateCalculator
const dates = this.dateCalculator.getWorkWeekDates(weekStart);
const workWeekSettings = this.config.getWorkWeekSettings();
workWeekSettings.workDays.forEach((dayOfWeek, i) => {
const date = new Date(weekStart);
// Set to the start of the week (Sunday = 0)
date.setDate(weekStart.getDate() - weekStart.getDay());
// Add the specific day of week
date.setDate(date.getDate() + dayOfWeek);
// Render headers for target week
dates.forEach((date, i) => {
const headerElement = document.createElement('swp-day-header');
if (this.isToday(date)) {
if (this.dateCalculator.isToday(date)) {
headerElement.dataset.today = 'true';
}
@ -117,20 +117,15 @@ export class NavigationRenderer {
<swp-day-name>${workWeekSettings.dayNames[i]}</swp-day-name>
<swp-day-date>${date.getDate()}</swp-day-date>
`;
headerElement.dataset.date = this.formatDate(date);
headerElement.dataset.date = this.dateCalculator.formatISODate(date);
header.appendChild(headerElement);
});
// Render day columns for target week
workWeekSettings.workDays.forEach(dayOfWeek => {
dates.forEach(date => {
const column = document.createElement('swp-day-column');
const date = new Date(weekStart);
// Set to the start of the week (Sunday = 0)
date.setDate(weekStart.getDate() - weekStart.getDay());
// Add the specific day of week
date.setDate(date.getDate() + dayOfWeek);
column.dataset.date = this.formatDate(date);
column.dataset.date = this.dateCalculator.formatISODate(date);
const eventsLayer = document.createElement('swp-events-layer');
column.appendChild(eventsLayer);
@ -139,18 +134,4 @@ export class NavigationRenderer {
});
}
/**
* Utility method to format date
*/
private formatDate(date: Date): string {
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
}
/**
* Check if date is today
*/
private isToday(date: Date): boolean {
const today = new Date();
return date.toDateString() === today.toDateString();
}
}