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

Moves event styling to CSS

Browse source 
Refactors event rendering to leverage CSS for styling.

This change simplifies the event renderer by removing styling logic from the Typescript code and placing it in the CSS file.  This improves maintainability and allows for easier customization of event appearance. Hover effects are also moved to CSS for consistency.
This commit is contained in:
Janus Knudsen 2025-08-05 19:12:13 +02:00
parent df4506238e
commit 3d3577045e
2 changed files with 10 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/managers/EventRenderer.ts
View file

@ -136,18 +136,9 @@ export class EventRenderer {
eventElement.style.position = 'absolute'; eventElement.style.position = 'absolute';
eventElement.style.top = `${position.top + 1}px`; eventElement.style.top = `${position.top + 1}px`;
eventElement.style.height = `${position.height - 1}px`; eventElement.style.height = `${position.height - 1}px`;
eventElement.style.left = '2px';
eventElement.style.right = '2px';
eventElement.style.zIndex = '10';
// Style the event element // Only set positioning and color - rest is in CSS
eventElement.style.backgroundColor = event.metadata?.color || '#3498db'; eventElement.style.backgroundColor = event.metadata?.color || '#3498db';
eventElement.style.color = 'white';
eventElement.style.fontSize = '12px';
eventElement.style.padding = '2px 4px';
eventElement.style.borderRadius = '3px';
eventElement.style.overflow = 'hidden';
eventElement.style.cursor = 'pointer';
// Format time for display // Format time for display
const startTime = this.formatTime(event.start); const startTime = this.formatTime(event.start);
@ -214,13 +205,7 @@ export class EventRenderer {
}); });
// Hover effects are handled by CSS // Hover effects are handled by CSS
eventElement.addEventListener('mouseenter', () => { // Hover effects are now handled by CSS
eventElement.style.zIndex = '20';
});
eventElement.addEventListener('mouseleave', () => {
eventElement.style.zIndex = '10';
});
} }
private clearEvents(): void { private clearEvents(): void {

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

@ -3,14 +3,16 @@
/* Event base styles */ /* Event base styles */
swp-event { swp-event {
position: absolute; position: absolute;
border-radius: 4px; border-radius: 3px;
overflow: hidden; overflow: hidden;
cursor: move; cursor: pointer;
transition: box-shadow 150ms ease, transform 150ms ease; transition: box-shadow 150ms ease, transform 150ms ease;
z-index: 10; z-index: 10;
left: 1px; left: 2px;
right: 1px; right: 2px;
padding: 8px; color: white;
font-size: 12px;
padding: 2px 4px;
/* Event types */ /* Event types */
&[data-type="meeting"] { &[data-type="meeting"] {
@ -45,7 +47,6 @@ swp-event-time {
display: block; display: block;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500; font-weight: 500;
opacity: 0.8;
margin-bottom: 4px; margin-bottom: 4px;
} }