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

Improves calendar event rendering and data

Browse source 
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.
This commit is contained in:
Janus Knudsen 2025-08-03 21:23:24 +02:00
parent 28ed131b9e
commit 5a686da7f5
8 changed files with 74 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/core/CalendarConfig.ts
View file

@ -27,8 +27,8 @@ export class CalendarConfig {
firstDayOfWeek: 1, // 0 = Sunday, 1 = Monday firstDayOfWeek: 1, // 0 = Sunday, 1 = Monday
// Time settings // Time settings
dayStartHour: 0, // Calendar starts at midnight dayStartHour: 0, // Calendar starts at midnight (default)
dayEndHour: 24, // Calendar ends at midnight (24 hours) dayEndHour: 24, // Calendar ends at midnight (default)
workStartHour: 8, // Work hours start workStartHour: 8, // Work hours start
workEndHour: 17, // Work hours end workEndHour: 17, // Work hours end
snapInterval: 15, // Minutes: 5, 10, 15, 30, 60 snapInterval: 15, // Minutes: 5, 10, 15, 30, 60

89
src/managers/EventManager.ts
View file

@ -33,23 +33,23 @@ export class EventManager {
private loadMockData(): void { private loadMockData(): void {
// Mock events for current week (July 27 - August 2, 2025) // Mock events for current week (July 27 - August 2, 2025)
this.events = [ this.events = [
// Sunday July 27, 2025 // Sunday August 3, 2025
{ {
id: '1', id: '1',
title: 'Weekend Planning', title: 'Weekend Planning',
start: '2025-07-27T10:00:00', start: '2025-08-03T10:00:00',
end: '2025-07-27T11:00:00', end: '2025-08-03T11:00:00',
type: 'work', type: 'work',
allDay: false, allDay: false,
syncStatus: 'synced', syncStatus: 'synced',
metadata: { duration: 60 } metadata: { duration: 60 }
}, },
// Monday July 28, 2025 // Monday August 4, 2025
{ {
id: '2', id: '2',
title: 'Team Standup', title: 'Team Standup',
start: '2025-07-28T09:00:00', start: '2025-08-04T09:00:00',
end: '2025-07-28T09:30:00', end: '2025-08-04T09:30:00',
type: 'meeting', type: 'meeting',
allDay: false, allDay: false,
syncStatus: 'synced', syncStatus: 'synced',
@ -58,19 +58,19 @@ export class EventManager {
{ {
id: '3', id: '3',
title: 'Project Kickoff', title: 'Project Kickoff',
start: '2025-07-28T14:00:00', start: '2025-08-04T14:00:00',
end: '2025-07-28T15:30:00', end: '2025-08-04T15:30:00',
type: 'meeting', type: 'meeting',
allDay: false, allDay: false,
syncStatus: 'synced', syncStatus: 'synced',
metadata: { duration: 90 } metadata: { duration: 90 }
}, },
// Tuesday July 29, 2025 // Tuesday August 5, 2025
{ {
id: '4', id: '4',
title: 'Deep Work Session', title: 'Deep Work Session',
start: '2025-07-29T10:00:00', start: '2025-08-05T10:00:00',
end: '2025-07-29T12:00:00', end: '2025-08-05T12:00:00',
type: 'work', type: 'work',
allDay: false, allDay: false,
syncStatus: 'synced', syncStatus: 'synced',
@ -79,30 +79,30 @@ export class EventManager {
{ {
id: '5', id: '5',
title: 'Lunch Meeting', title: 'Lunch Meeting',
start: '2025-07-29T12:30:00', start: '2025-08-05T12:30:00',
end: '2025-07-29T13:30:00', end: '2025-08-05T13:30:00',
type: 'meal', type: 'meal',
allDay: false, allDay: false,
syncStatus: 'synced', syncStatus: 'synced',
metadata: { duration: 60 } metadata: { duration: 60 }
}, },
// Wednesday July 30, 2025 // Wednesday August 6, 2025
{ {
id: '6', id: '6',
title: 'Client Review', title: 'Client Review',
start: '2025-07-30T15:00:00', start: '2025-08-06T15:00:00',
end: '2025-07-30T16:00:00', end: '2025-08-06T16:00:00',
type: 'meeting', type: 'meeting',
allDay: false, allDay: false,
syncStatus: 'synced', syncStatus: 'synced',
metadata: { duration: 60 } metadata: { duration: 60 }
}, },
// Thursday July 31, 2025 // Thursday August 7, 2025
{ {
id: '7', id: '7',
title: 'Sprint Planning', title: 'Sprint Planning',
start: '2025-07-31T09:00:00', start: '2025-08-07T09:00:00',
end: '2025-07-31T10:30:00', end: '2025-08-07T10:30:00',
type: 'meeting', type: 'meeting',
allDay: false, allDay: false,
syncStatus: 'synced', syncStatus: 'synced',
@ -111,19 +111,19 @@ export class EventManager {
{ {
id: '8', id: '8',
title: 'Code Review', title: 'Code Review',
start: '2025-07-31T14:00:00', start: '2025-08-07T14:00:00',
end: '2025-07-31T15:00:00', end: '2025-08-07T15:00:00',
type: 'work', type: 'work',
allDay: false, allDay: false,
syncStatus: 'synced', syncStatus: 'synced',
metadata: { duration: 60 } metadata: { duration: 60 }
}, },
// Friday August 1, 2025 // Friday August 8, 2025
{ {
id: '9', id: '9',
title: 'Team Standup', title: 'Team Standup',
start: '2025-08-01T09:00:00', start: '2025-08-08T09:00:00',
end: '2025-08-01T09:30:00', end: '2025-08-08T09:30:00',
type: 'meeting', type: 'meeting',
allDay: false, allDay: false,
syncStatus: 'synced', syncStatus: 'synced',
@ -132,19 +132,50 @@ export class EventManager {
{ {
id: '10', id: '10',
title: 'Client Meeting', title: 'Client Meeting',
start: '2025-08-01T14:00:00', start: '2025-08-08T14:00:00',
end: '2025-08-01T15:30:00', end: '2025-08-08T15:30:00',
type: 'meeting', type: 'meeting',
allDay: false, allDay: false,
syncStatus: 'synced', syncStatus: 'synced',
metadata: { duration: 90 } metadata: { duration: 90 }
}, },
// Saturday August 2, 2025 // Saturday August 9, 2025
{ {
id: '11', id: '11',
title: 'Weekend Project', title: 'Weekend Project',
start: '2025-08-02T10:00:00', start: '2025-08-09T10:00:00',
end: '2025-08-02T12: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', type: 'work',
allDay: false, allDay: false,
syncStatus: 'synced', syncStatus: 'synced',

4
src/managers/EventRenderer.ts
View file

@ -133,8 +133,8 @@ export class EventRenderer {
// Calculate position based on time // Calculate position based on time
const position = this.calculateEventPosition(event); const position = this.calculateEventPosition(event);
eventElement.style.position = 'absolute'; eventElement.style.position = 'absolute';
eventElement.style.top = `${position.top}px`; eventElement.style.top = `${position.top + 1}px`;
eventElement.style.height = `${position.height}px`; eventElement.style.height = `${position.height - 1}px`;
eventElement.style.left = '2px'; eventElement.style.left = '2px';
eventElement.style.right = '2px'; eventElement.style.right = '2px';
eventElement.style.zIndex = '10'; eventElement.style.zIndex = '10';

3
wwwroot/css/calendar-base-css.css
View file

@ -16,7 +16,7 @@
--day-column-min-width: 250px; --day-column-min-width: 250px;
--week-days: 7; --week-days: 7;
/* Time boundaries */ /* Time boundaries - Default fallback values */
--day-start-hour: 0; --day-start-hour: 0;
--day-end-hour: 24; --day-end-hour: 24;
--work-start-hour: 8; --work-start-hour: 8;
@ -32,6 +32,7 @@
/* Grid colors */ /* Grid colors */
--color-grid-line: #e0e0e0; --color-grid-line: #e0e0e0;
--color-grid-line-light: rgba(0, 0, 0, 0.05); --color-grid-line-light: rgba(0, 0, 0, 0.05);
--color-hour-line: #b0b0b0;
--color-work-hours: rgba(0, 100, 0, 0.06); --color-work-hours: rgba(0, 100, 0, 0.06);
--color-current-time: #ff0000; --color-current-time: #ff0000;

2
wwwroot/css/calendar-events-css.css
View file

@ -37,7 +37,7 @@ swp-event {
swp-event:hover { swp-event:hover {
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
transform: scale(1.02); filter: brightness(0.95);
z-index: 20; z-index: 20;
} }

8
wwwroot/css/calendar-layout-css.css
View file

@ -103,7 +103,7 @@ swp-time-axis {
left: 0; left: 0;
z-index: 3; /* Lower than header elements so it scrolls behind them */ z-index: 3; /* Lower than header elements so it scrolls behind them */
width: 60px; width: 60px;
overflow: hidden; overflow: visible;
height: 100%; height: 100%;
} }
@ -206,8 +206,8 @@ swp-hour-marker::after {
top: 0; top: 0;
left: 100%; left: 100%;
width: 100vw; width: 100vw;
height: 2px; height: 1px;
background: var(--color-grid-line); background: #d0d0d0;
pointer-events: none; pointer-events: none;
} }
@ -303,7 +303,7 @@ swp-time-grid::before {
/* Grid lines */ /* Grid lines */
swp-grid-lines { swp-grid-lines {
position: absolute; position: absolute;
top: 15px; top: 1px;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;

23
wwwroot/css/calendar.css
View file

@ -215,26 +215,7 @@ swp-time-axis {
z-index: 4; z-index: 4;
} }
swp-hour-marker { /* swp-hour-marker styles moved to calendar-layout-css.css */
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;
}
/* Week header */ /* Week header */
swp-week-header { swp-week-header {
@ -379,7 +360,7 @@ swp-event[data-type="work"] {
swp-event:hover { swp-event:hover {
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
transform: scale(1.02); filter: brightness(0.95);
z-index: 20; z-index: 20;
} }

2
wwwroot/index.html
View file

@ -15,7 +15,7 @@
</head> </head>
<body> <body>
<div class="calendar-wrapper"> <div class="calendar-wrapper">
<swp-calendar data-view="week" data-week-days="7" data-snap-interval="15"> <swp-calendar data-view="week" data-week-days="7" data-snap-interval="15" data-day-start-hour="6" data-day-end-hour="22" data-hour-height="80">
<!-- Navigation Bar --> <!-- Navigation Bar -->
<swp-calendar-nav> <swp-calendar-nav>
<swp-nav-group> <swp-nav-group>