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

Refactors event element handling with web components

Browse source 
Introduces web components for event elements, separating timed and all-day events into distinct components for better organization and reusability.

This change also simplifies event rendering and drag-and-drop operations by leveraging the properties and lifecycle methods of web components.
This commit is contained in:
Janus C. H. Knudsen 2025-10-04 15:35:09 +02:00
parent 1a47214831
commit a9d6d14c93
6 changed files with 253 additions and 274 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -321,7 +321,7 @@ swp-allday-column {
}
/* All-day events in containers */
swp-allday-container swp-event {
swp-allday-container swp-allday-event {
height: 22px !important; /* Fixed height for consistent stacking */
position: relative !important;
width: auto !important;
@ -353,7 +353,7 @@ swp-allday-container swp-event {
}
/* Overflow indicator styling */
swp-allday-container swp-event.max-event-indicator {
swp-allday-container swp-allday-event.max-event-indicator {
background: #e0e0e0 !important;
color: #666 !important;
border: 1px dashed #999 !important;
@ -364,13 +364,13 @@ swp-allday-container swp-event.max-event-indicator {
justify-content: center;
}
swp-allday-container swp-event.max-event-indicator:hover {
swp-allday-container swp-allday-event.max-event-indicator:hover {
background: #d0d0d0 !important;
color: #333 !important;
opacity: 1;
}
swp-allday-container swp-event.max-event-indicator span {
swp-allday-container swp-allday-event.max-event-indicator span {
display: block;
width: 100%;
text-align: center;
@ -378,23 +378,23 @@ swp-allday-container swp-event.max-event-indicator span {
font-weight: normal;
}
swp-allday-container swp-event.max-event-overflow-show {
swp-allday-container swp-allday-event.max-event-overflow-show {
opacity: 1;
transition: opacity 0.3s ease-in-out;
}
swp-allday-container swp-event.max-event-overflow-hide {
swp-allday-container swp-allday-event.max-event-overflow-hide {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
/* Hide time element for all-day styled events */
swp-allday-container swp-event swp-event-time{
swp-allday-container swp-allday-event swp-event-time{
display: none;
}
/* Adjust title display for all-day styled events */
swp-allday-container swp-event swp-event-title {
swp-allday-container swp-allday-event swp-event-title {
display: block;
font-size: 12px;
line-height: 18px;