From 5a686da7f598a4a6d16a2d43a6fbbf513d41ada2 Mon Sep 17 00:00:00 2001 From: Janus Knudsen Date: Sun, 3 Aug 2025 21:23:24 +0200 Subject: [PATCH] Improves calendar event rendering and data Updates mock event data to reflect a more recent week and includes events spanning early/late hours. Enhances event rendering by adjusting the top and height styles for better visual appearance. Refactors CSS to improve grid line display and event hover effects, and moves hour marker styles to a more appropriate CSS file. Provides default fallback values for time boundaries using CSS variables. --- src/core/CalendarConfig.ts | 4 +- src/managers/EventManager.ts | 89 +++++++++++++++++++---------- src/managers/EventRenderer.ts | 4 +- wwwroot/css/calendar-base-css.css | 3 +- wwwroot/css/calendar-events-css.css | 2 +- wwwroot/css/calendar-layout-css.css | 8 +-- wwwroot/css/calendar.css | 23 +------- wwwroot/index.html | 2 +- 8 files changed, 74 insertions(+), 61 deletions(-) diff --git a/src/core/CalendarConfig.ts b/src/core/CalendarConfig.ts index 114246c..ab2278f 100644 --- a/src/core/CalendarConfig.ts +++ b/src/core/CalendarConfig.ts @@ -27,8 +27,8 @@ export class CalendarConfig { firstDayOfWeek: 1, // 0 = Sunday, 1 = Monday // Time settings - dayStartHour: 0, // Calendar starts at midnight - dayEndHour: 24, // Calendar ends at midnight (24 hours) + dayStartHour: 0, // Calendar starts at midnight (default) + dayEndHour: 24, // Calendar ends at midnight (default) workStartHour: 8, // Work hours start workEndHour: 17, // Work hours end snapInterval: 15, // Minutes: 5, 10, 15, 30, 60 diff --git a/src/managers/EventManager.ts b/src/managers/EventManager.ts index 592fe16..d38ebf0 100644 --- a/src/managers/EventManager.ts +++ b/src/managers/EventManager.ts @@ -33,23 +33,23 @@ export class EventManager { private loadMockData(): void { // Mock events for current week (July 27 - August 2, 2025) this.events = [ - // Sunday July 27, 2025 + // Sunday August 3, 2025 { id: '1', title: 'Weekend Planning', - start: '2025-07-27T10:00:00', - end: '2025-07-27T11:00:00', + start: '2025-08-03T10:00:00', + end: '2025-08-03T11:00:00', type: 'work', allDay: false, syncStatus: 'synced', metadata: { duration: 60 } }, - // Monday July 28, 2025 + // Monday August 4, 2025 { id: '2', title: 'Team Standup', - start: '2025-07-28T09:00:00', - end: '2025-07-28T09:30:00', + start: '2025-08-04T09:00:00', + end: '2025-08-04T09:30:00', type: 'meeting', allDay: false, syncStatus: 'synced', @@ -58,19 +58,19 @@ export class EventManager { { id: '3', title: 'Project Kickoff', - start: '2025-07-28T14:00:00', - end: '2025-07-28T15:30:00', + start: '2025-08-04T14:00:00', + end: '2025-08-04T15:30:00', type: 'meeting', allDay: false, syncStatus: 'synced', metadata: { duration: 90 } }, - // Tuesday July 29, 2025 + // Tuesday August 5, 2025 { id: '4', title: 'Deep Work Session', - start: '2025-07-29T10:00:00', - end: '2025-07-29T12:00:00', + start: '2025-08-05T10:00:00', + end: '2025-08-05T12:00:00', type: 'work', allDay: false, syncStatus: 'synced', @@ -79,30 +79,30 @@ export class EventManager { { id: '5', title: 'Lunch Meeting', - start: '2025-07-29T12:30:00', - end: '2025-07-29T13:30:00', + start: '2025-08-05T12:30:00', + end: '2025-08-05T13:30:00', type: 'meal', allDay: false, syncStatus: 'synced', metadata: { duration: 60 } }, - // Wednesday July 30, 2025 + // Wednesday August 6, 2025 { id: '6', title: 'Client Review', - start: '2025-07-30T15:00:00', - end: '2025-07-30T16:00:00', + start: '2025-08-06T15:00:00', + end: '2025-08-06T16:00:00', type: 'meeting', allDay: false, syncStatus: 'synced', metadata: { duration: 60 } }, - // Thursday July 31, 2025 + // Thursday August 7, 2025 { id: '7', title: 'Sprint Planning', - start: '2025-07-31T09:00:00', - end: '2025-07-31T10:30:00', + start: '2025-08-07T09:00:00', + end: '2025-08-07T10:30:00', type: 'meeting', allDay: false, syncStatus: 'synced', @@ -111,19 +111,19 @@ export class EventManager { { id: '8', title: 'Code Review', - start: '2025-07-31T14:00:00', - end: '2025-07-31T15:00:00', + start: '2025-08-07T14:00:00', + end: '2025-08-07T15:00:00', type: 'work', allDay: false, syncStatus: 'synced', metadata: { duration: 60 } }, - // Friday August 1, 2025 + // Friday August 8, 2025 { id: '9', title: 'Team Standup', - start: '2025-08-01T09:00:00', - end: '2025-08-01T09:30:00', + start: '2025-08-08T09:00:00', + end: '2025-08-08T09:30:00', type: 'meeting', allDay: false, syncStatus: 'synced', @@ -132,19 +132,50 @@ export class EventManager { { id: '10', title: 'Client Meeting', - start: '2025-08-01T14:00:00', - end: '2025-08-01T15:30:00', + start: '2025-08-08T14:00:00', + end: '2025-08-08T15:30:00', type: 'meeting', allDay: false, syncStatus: 'synced', metadata: { duration: 90 } }, - // Saturday August 2, 2025 + // Saturday August 9, 2025 { id: '11', title: 'Weekend Project', - start: '2025-08-02T10:00:00', - end: '2025-08-02T12:00:00', + start: '2025-08-09T10:00:00', + end: '2025-08-09T12:00:00', + type: 'work', + allDay: false, + syncStatus: 'synced', + metadata: { duration: 120 } + }, + // Test events for early/late hours + { + id: '12', + title: 'Early Morning Workout', + start: '2025-08-05T06:00:00', + end: '2025-08-05T07:00:00', + type: 'work', + allDay: false, + syncStatus: 'synced', + metadata: { duration: 60 } + }, + { + id: '13', + title: 'Late Evening Call', + start: '2025-08-06T21:00:00', + end: '2025-08-06T22:00:00', + type: 'meeting', + allDay: false, + syncStatus: 'synced', + metadata: { duration: 60 } + }, + { + id: '14', + title: 'Midnight Deployment', + start: '2025-08-07T23:00:00', + end: '2025-08-08T01:00:00', type: 'work', allDay: false, syncStatus: 'synced', diff --git a/src/managers/EventRenderer.ts b/src/managers/EventRenderer.ts index 61ca05b..f977cd4 100644 --- a/src/managers/EventRenderer.ts +++ b/src/managers/EventRenderer.ts @@ -133,8 +133,8 @@ export class EventRenderer { // Calculate position based on time const position = this.calculateEventPosition(event); eventElement.style.position = 'absolute'; - eventElement.style.top = `${position.top}px`; - eventElement.style.height = `${position.height}px`; + eventElement.style.top = `${position.top + 1}px`; + eventElement.style.height = `${position.height - 1}px`; eventElement.style.left = '2px'; eventElement.style.right = '2px'; eventElement.style.zIndex = '10'; diff --git a/wwwroot/css/calendar-base-css.css b/wwwroot/css/calendar-base-css.css index 1e4bc1f..f468beb 100644 --- a/wwwroot/css/calendar-base-css.css +++ b/wwwroot/css/calendar-base-css.css @@ -16,7 +16,7 @@ --day-column-min-width: 250px; --week-days: 7; - /* Time boundaries */ + /* Time boundaries - Default fallback values */ --day-start-hour: 0; --day-end-hour: 24; --work-start-hour: 8; @@ -32,6 +32,7 @@ /* Grid colors */ --color-grid-line: #e0e0e0; --color-grid-line-light: rgba(0, 0, 0, 0.05); + --color-hour-line: #b0b0b0; --color-work-hours: rgba(0, 100, 0, 0.06); --color-current-time: #ff0000; diff --git a/wwwroot/css/calendar-events-css.css b/wwwroot/css/calendar-events-css.css index b663a1a..ef0472f 100644 --- a/wwwroot/css/calendar-events-css.css +++ b/wwwroot/css/calendar-events-css.css @@ -37,7 +37,7 @@ swp-event { swp-event:hover { box-shadow: var(--shadow-md); - transform: scale(1.02); + filter: brightness(0.95); z-index: 20; } diff --git a/wwwroot/css/calendar-layout-css.css b/wwwroot/css/calendar-layout-css.css index 0417420..713dfc1 100644 --- a/wwwroot/css/calendar-layout-css.css +++ b/wwwroot/css/calendar-layout-css.css @@ -103,7 +103,7 @@ swp-time-axis { left: 0; z-index: 3; /* Lower than header elements so it scrolls behind them */ width: 60px; - overflow: hidden; + overflow: visible; height: 100%; } @@ -206,8 +206,8 @@ swp-hour-marker::after { top: 0; left: 100%; width: 100vw; - height: 2px; - background: var(--color-grid-line); + height: 1px; + background: #d0d0d0; pointer-events: none; } @@ -303,7 +303,7 @@ swp-time-grid::before { /* Grid lines */ swp-grid-lines { position: absolute; - top: 15px; + top: 1px; left: 0; right: 0; bottom: 0; diff --git a/wwwroot/css/calendar.css b/wwwroot/css/calendar.css index 796cfb8..7bcd48d 100644 --- a/wwwroot/css/calendar.css +++ b/wwwroot/css/calendar.css @@ -215,26 +215,7 @@ swp-time-axis { z-index: 4; } -swp-hour-marker { - height: var(--hour-height); - padding: 0 8px 8px 8px; - font-size: 0.75rem; - color: var(--color-text-secondary); - display: flex; - align-items: flex-start; - position: relative; -} - -swp-hour-marker::after { - content: ''; - position: absolute; - top: 0; - left: 100%; - width: 100vw; - height: 1px; - background: var(--color-grid-line); - pointer-events: none; -} +/* swp-hour-marker styles moved to calendar-layout-css.css */ /* Week header */ swp-week-header { @@ -379,7 +360,7 @@ swp-event[data-type="work"] { swp-event:hover { box-shadow: var(--shadow-md); - transform: scale(1.02); + filter: brightness(0.95); z-index: 20; } diff --git a/wwwroot/index.html b/wwwroot/index.html index aec4a17..9c55577 100644 --- a/wwwroot/index.html +++ b/wwwroot/index.html @@ -15,7 +15,7 @@
- +