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

Centralizes time formatting with timezone support

Browse source 
Addresses inconsistent time formatting and lack of timezone
handling throughout the application by introducing a
`TimeFormatter` utility.

This class centralizes time formatting logic, providing
timezone conversion (defaults to Europe/Copenhagen) and
support for both 12-hour and 24-hour formats, configurable
via `CalendarConfig`.

It also updates event rendering to utilize the new
`TimeFormatter` for consistent time displays.
This commit is contained in:
Janus Knudsen 2025-09-12 22:21:56 +02:00
parent c07d83d86f
commit 8b96376d1f
7 changed files with 489 additions and 199 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/elements/SwpEventElement.ts
View file

@ -1,5 +1,6 @@
import { CalendarEvent } from '../types/CalendarTypes';
import { calendarConfig } from '../core/CalendarConfig';
import { TimeFormatter } from '../utils/TimeFormatter';
/**
* Abstract base class for event DOM elements
@ -39,14 +40,10 @@ export abstract class BaseEventElement {
}
/**
* Format time for display
* Format time for display using TimeFormatter
*/
protected formatTime(date: Date): string {
const hours = date.getHours();
const minutes = date.getMinutes();
const period = hours >= 12 ? 'PM' : 'AM';
const displayHours = hours > 12 ? hours - 12 : (hours === 0 ? 12 : hours);
return `${displayHours}:${minutes.toString().padStart(2, '0')} ${period}`;
return TimeFormatter.formatTime(date);
}
/**
@ -87,12 +84,11 @@ export class SwpEventElement extends BaseEventElement {
* Create inner HTML structure
*/
private createInnerStructure(): void {
const startTime = this.formatTime(this.event.start);
const endTime = this.formatTime(this.event.end);
const timeRange = TimeFormatter.formatTimeRange(this.event.start, this.event.end);
const durationMinutes = (this.event.end.getTime() - this.event.start.getTime()) / (1000 * 60);
this.element.innerHTML = `
<swp-event-time data-duration="${durationMinutes}">${startTime} - ${endTime}</swp-event-time>
<swp-event-time data-duration="${durationMinutes}">${timeRange}</swp-event-time>
<swp-event-title>${this.event.title}</swp-event-title>
`;
}