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

Improves all-day drag-and-drop conversion

Browse source 
Refactors drag-to-all-day functionality to apply CSS styling and reposition the existing drag clone within the all-day container, rather than creating a new event element.

Centralizes all-day container creation in HeaderManager. Introduces `drag:mouseleave-header` to handle transitions from all-day back to timed events.

Ensures consistent styling and robust cleanup of drag clones for a smoother user experience.
This commit is contained in:
Janus C. H. Knudsen 2025-09-21 21:30:51 +02:00
parent 2cdbc8f1a3
commit c682c30e23
6 changed files with 181 additions and 121 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -299,8 +299,19 @@ swp-allday-column {
}
/* All-day events in containers */
swp-allday-container swp-event {
height: 22px; /* Fixed height for consistent stacking */
swp-allday-container swp-event,
swp-event.all-day-style {
height: 22px !important; /* Fixed height for consistent stacking */
position: relative !important;
width: auto !important;
left: auto !important;
right: auto !important;
top: auto !important;
padding: 2px 4px;
margin-bottom: 2px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
background: #ff9800; /* Default orange background */
display: flex;
position: relative;
@ -317,10 +328,25 @@ swp-allday-container swp-event {
border-left: 3px solid rgba(0, 0, 0, 0.2);
}
swp-allday-container swp-event:last-child {
swp-allday-container swp-event:last-child,
swp-event.all-day-style:last-child {
margin-bottom: 0;
}
/* Hide time element for all-day styled events */
swp-allday-container swp-event swp-event-time,
swp-event.all-day-style swp-event-time {
display: none;
}
/* Adjust title display for all-day styled events */
swp-allday-container swp-event swp-event-title,
swp-event.all-day-style swp-event-title {
display: block;
font-size: 12px;
line-height: 18px;
}
/* Scrollable content */
swp-scrollable-content {
overflow-y: auto;