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

Improves click handling on calendar elements

Browse source 
Removes `pointer-events: none` from various calendar elements.
This ensures that the elements are correctly interactive,
allowing the user to click on them as intended.
This commit is contained in:
Janus C. H. Knudsen 2025-10-07 17:36:03 +02:00
parent 3982e2f25f
commit e2cf4d1e04
5 changed files with 0 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

1
wwwroot/css/calendar-components-css.css
View file

@ -136,7 +136,6 @@ swp-search-container {
swp-search-icon { swp-search-icon {
position: absolute; position: absolute;
left: 12px; left: 12px;
pointer-events: none;
color: var(--color-text-secondary); color: var(--color-text-secondary);
svg { svg {

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

@ -55,7 +55,6 @@ swp-day-columns swp-event {
&.dragging { &.dragging {
position: absolute; position: absolute;
z-index: 999999; z-index: 999999;
pointer-events: none;
opacity: 0.8; opacity: 0.8;
left: 2px; left: 2px;
right: 2px; right: 2px;
@ -80,7 +79,6 @@ swp-resize-indicator {
height: 8px; height: 8px;
background: #6b7280; background: #6b7280;
border-radius: 4px; border-radius: 4px;
pointer-events: none;
z-index: 30; z-index: 30;
opacity: 0; opacity: 0;
animation: fadeIn 0.2s ease forwards; animation: fadeIn 0.2s ease forwards;
@ -198,7 +196,6 @@ swp-event-preview {
background: rgba(33, 150, 243, 0.1); background: rgba(33, 150, 243, 0.1);
border: 2px dashed var(--color-primary); border: 2px dashed var(--color-primary);
border-radius: 4px; border-radius: 4px;
pointer-events: none;
/* Position via CSS variables */ /* Position via CSS variables */
top: calc(var(--preview-start) * var(--minute-height)); top: calc(var(--preview-start) * var(--minute-height));

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

@ -155,7 +155,6 @@ swp-hour-marker::before {
/* Full viewport width minus time-axis width */ /* Full viewport width minus time-axis width */
height: 1px; height: 1px;
background: var(--color-hour-line); background: var(--color-hour-line);
pointer-events: none;
z-index: 2; z-index: 2;
/* Ensure it appears above other elements */ /* Ensure it appears above other elements */
} }
@ -175,7 +174,6 @@ swp-time-grid::after {
transparent calc(var(--hour-height) - 1px), transparent calc(var(--hour-height) - 1px),
var(--color-hour-line) calc(var(--hour-height) - 1px), var(--color-hour-line) calc(var(--hour-height) - 1px),
var(--color-hour-line) var(--hour-height)); var(--color-hour-line) var(--hour-height));
pointer-events: none;
z-index: 1; z-index: 1;
} }
@ -240,7 +238,6 @@ swp-calendar-header::-webkit-scrollbar-track {
swp-day-header { swp-day-header {
grid-row: 1; grid-row: 1;
/* Explicitly place day headers in row 1 */ /* Explicitly place day headers in row 1 */
pointer-events: auto;
/* Ensure header clicks work despite parent scrollbar */ /* Ensure header clicks work despite parent scrollbar */
text-align: center; text-align: center;
border-right: 1px solid var(--color-grid-line); border-right: 1px solid var(--color-grid-line);
@ -330,7 +327,6 @@ swp-allday-column {
position: relative; position: relative;
opacity: 0; opacity: 0;
/* Invisible but functional */ /* Invisible but functional */
pointer-events: auto;
/* Enable mouse events */ /* Enable mouse events */
background: transparent; background: transparent;
z-index: 1; z-index: 1;
@ -479,7 +475,6 @@ swp-time-grid::before {
right: 0; right: 0;
background: transparent; background: transparent;
min-width: calc(var(--grid-columns, 7) * var(--day-column-min-width)); min-width: calc(var(--grid-columns, 7) * var(--day-column-min-width));
pointer-events: none;
display: none; display: none;
/* Disabled - using per-column overlays instead */ /* Disabled - using per-column overlays instead */
} }
@ -493,7 +488,6 @@ swp-grid-lines {
bottom: 0; bottom: 0;
min-width: calc(var(--grid-columns, 7) * var(--day-column-min-width)); min-width: calc(var(--grid-columns, 7) * var(--day-column-min-width));
/* Dynamic width */ /* Dynamic width */
pointer-events: none;
z-index: var(--z-grid); z-index: var(--z-grid);
background-image: repeating-linear-gradient(to bottom, background-image: repeating-linear-gradient(to bottom,
transparent, transparent,
@ -529,7 +523,6 @@ swp-day-column::before {
left: 0; left: 0;
right: 0; right: 0;
background: var(--color-non-work-hours); background: var(--color-non-work-hours);
pointer-events: none;
z-index: 2; z-index: 2;
/* Before work period - from day start to work start */ /* Before work period - from day start to work start */
@ -545,7 +538,6 @@ swp-day-column::after {
left: 0; left: 0;
right: 0; right: 0;
background: var(--color-non-work-hours); background: var(--color-non-work-hours);
pointer-events: none;
z-index: 2; z-index: 2;
/* After work period - from work end to day end */ /* After work period - from work end to day end */
@ -585,12 +577,10 @@ swp-events-layer {
inset: 0; inset: 0;
display: block; display: block;
z-index: var(--z-event); z-index: var(--z-event);
pointer-events: none;
/* Allow clicks to pass through to day column */ /* Allow clicks to pass through to day column */
} }
swp-day-columns swp-event { swp-day-columns swp-event {
pointer-events: auto;
} }
/* Current time indicator */ /* Current time indicator */
@ -600,7 +590,6 @@ swp-current-time-indicator {
right: 0; right: 0;
height: 2px; height: 2px;
background: var(--color-current-time); background: var(--color-current-time);
pointer-events: none;
z-index: var(--z-current-time); z-index: var(--z-current-time);
/* Time label */ /* Time label */

1
wwwroot/css/calendar-month-css.css
View file

@ -281,7 +281,6 @@ swp-calendar[data-view="month"] swp-calendar-container {
/* Loading state for month view */ /* Loading state for month view */
swp-calendar[data-view="month"][data-loading="true"] .month-grid { swp-calendar[data-view="month"][data-loading="true"] .month-grid {
opacity: 0.5; opacity: 0.5;
pointer-events: none;
} }
/* Month view navigation animation support */ /* Month view navigation animation support */

1
wwwroot/css/calendar-popup-css.css
View file

@ -158,7 +158,6 @@ swp-snap-indicator {
right: 0; right: 0;
height: 2px; height: 2px;
background: var(--color-primary); background: var(--color-primary);
pointer-events: none;
opacity: 0; opacity: 0;
transition: opacity var(--transition-fast); transition: opacity var(--transition-fast);
z-index: var(--z-drag-ghost); z-index: var(--z-drag-ghost);