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 @@
- +