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

Adds event description support in calendar UI

Browse source 
Extends event model to include optional description field

Enhances event rendering with:
- New description getter/setter in base event element
- Updated CSS grid layout for description display
- Dynamic description handling in event rendering
- Updated mock event data with descriptions

Improves visual information density and event context in calendar view
This commit is contained in:
Janus C. H. Knudsen 2025-11-12 21:17:20 +01:00
parent 03746afca4
commit 6583ed1063
4 changed files with 114 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -12,7 +12,14 @@ swp-day-columns swp-event {
right: 2px;
color: var(--color-text);
font-size: 12px;
padding: 2px 4px;
padding: 4px 6px;
/* CSS Grid layout for time, title, and description */
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr;
gap: 2px 4px;
align-items: start;
/* Event types */
&[data-type="meeting"] {
@ -137,16 +144,66 @@ swp-resize-handle::before {
}
swp-day-columns swp-event-time {
display: block;
grid-column: 1;
grid-row: 1;
font-size: 0.875rem;
font-weight: 500;
margin-bottom: 4px;
white-space: nowrap;
}
swp-day-columns swp-event-title {
grid-column: 2;
grid-row: 1;
font-size: 0.875rem;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
swp-day-columns swp-event-description {
grid-column: 1 / -1;
grid-row: 2;
display: block;
font-size: 0.875rem;
opacity: 0.8;
line-height: 1.3;
overflow: hidden;
word-wrap: break-word;
}
/* Hide description if event is too short (<60px) */
swp-day-columns swp-event[style*="height: 30px"] swp-event-description,
swp-day-columns swp-event[style*="height: 31px"] swp-event-description,
swp-day-columns swp-event[style*="height: 32px"] swp-event-description,
swp-day-columns swp-event[style*="height: 33px"] swp-event-description,
swp-day-columns swp-event[style*="height: 34px"] swp-event-description,
swp-day-columns swp-event[style*="height: 35px"] swp-event-description,
swp-day-columns swp-event[style*="height: 36px"] swp-event-description,
swp-day-columns swp-event[style*="height: 37px"] swp-event-description,
swp-day-columns swp-event[style*="height: 38px"] swp-event-description,
swp-day-columns swp-event[style*="height: 39px"] swp-event-description,
swp-day-columns swp-event[style*="height: 40px"] swp-event-description,
swp-day-columns swp-event[style*="height: 41px"] swp-event-description,
swp-day-columns swp-event[style*="height: 42px"] swp-event-description,
swp-day-columns swp-event[style*="height: 43px"] swp-event-description,
swp-day-columns swp-event[style*="height: 44px"] swp-event-description,
swp-day-columns swp-event[style*="height: 45px"] swp-event-description,
swp-day-columns swp-event[style*="height: 46px"] swp-event-description,
swp-day-columns swp-event[style*="height: 47px"] swp-event-description,
swp-day-columns swp-event[style*="height: 48px"] swp-event-description,
swp-day-columns swp-event[style*="height: 49px"] swp-event-description,
swp-day-columns swp-event[style*="height: 50px"] swp-event-description,
swp-day-columns swp-event[style*="height: 51px"] swp-event-description,
swp-day-columns swp-event[style*="height: 52px"] swp-event-description,
swp-day-columns swp-event[style*="height: 53px"] swp-event-description,
swp-day-columns swp-event[style*="height: 54px"] swp-event-description,
swp-day-columns swp-event[style*="height: 55px"] swp-event-description,
swp-day-columns swp-event[style*="height: 56px"] swp-event-description,
swp-day-columns swp-event[style*="height: 57px"] swp-event-description,
swp-day-columns swp-event[style*="height: 58px"] swp-event-description,
swp-day-columns swp-event[style*="height: 59px"] swp-event-description {
display: none;
}
/* Multi-day events */