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

Adds work hours management with day-specific overrides

Browse source 
Introduces work hours management with weekly default and date-specific overrides to support per-column scheduling.

Calculates and applies non-work hour overlays to columns.
This allows users to visualize working and non-working times.

Adjusts event rendering to prevent overlap with horizontal timelines.
This commit is contained in:
Janus Knudsen 2025-08-22 22:57:35 +02:00
parent 18c12cd3e6
commit a3ed03ff44
5 changed files with 252 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

4
wwwroot/css/calendar-base-css.css
View file

@ -35,7 +35,7 @@
--color-grid-line: #e0e0e0;
--color-grid-line-light: rgba(0, 0, 0, 0.05);
--color-hour-line: rgba(0, 0, 0, 0.2);
--color-work-hours: rgba(242, 242, 242, 1);
--color-work-hours: rgba(255, 255, 255, 0.9);
--color-current-time: #ff0000;
/* Event colors - Updated with month-view-expanded.html color scheme */
@ -53,6 +53,8 @@
/* UI colors */
--color-background: #ffffff;
--color-surface: #f5f5f5;
--color-event-grid: #ffffff;
--color-non-work-hours: #ff980038;
--color-text: #333333;
--color-text-secondary: #666666;
--color-border: #e0e0e0;

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

@ -111,7 +111,7 @@ swp-hour-marker {
swp-hour-marker::before {
content: '';
position: absolute;
top: -1px;
top: 0px;
left: 50px;
width: calc(100vw - 60px); /* Full viewport width minus time-axis width */
height: 1px;
@ -180,7 +180,6 @@ swp-calendar-header::-webkit-scrollbar-track {
swp-day-header {
padding: 12px;
pointer-events: auto; /* Ensure header clicks work despite parent scrollbar */
text-align: center;
border-right: 1px solid var(--color-grid-line);
@ -189,6 +188,7 @@ swp-day-header {
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: 7px;
}
swp-day-header:last-child {
@ -239,23 +239,25 @@ swp-resource-name {
swp-day-name {
display: block;
font-weight: 500;
font-size: 0.875rem;
font-size: 12px;
color: var(--color-text-secondary);
}
swp-day-date {
display: block;
font-size: 1.25rem;
font-size: 20px;
font-weight: 600;
margin-top: 4px;
height: 41px;
}
swp-day-header[data-today="true"] swp-day-date {
color: var(--color-primary);
background: rgba(33, 150, 243, 0.1);
border-radius: 50%;
width: 36px;
height: 36px;
width: 41px;
height: 41px;
display: flex;
align-items: center;
justify-content: center;
@ -333,16 +335,18 @@ swp-time-grid {
height: calc((var(--day-end-hour) - var(--day-start-hour)) * var(--hour-height));
}
/* Global work hours overlay - now disabled, replaced by per-column overlays */
swp-time-grid::before {
content: '';
position: absolute;
top: calc((var(--work-start-hour) - var(--day-start-hour)) * var(--hour-height));
height: calc((var(--work-end-hour) - var(--work-start-hour)) * var(--hour-height));
top: 0;
height: 0;
left: 0;
right: 0;
background: var(--color-work-hours);
background: transparent;
min-width: calc(var(--grid-columns, 7) * var(--day-column-min-width));
pointer-events: none;
display: none; /* Disabled - using per-column overlays instead */
}
/* Grid lines */
@ -379,6 +383,50 @@ swp-day-column {
position: relative;
border-right: 1px solid var(--color-grid-line);
min-width: var(--day-column-min-width);
background: var(--color-event-grid);
}
/* Per-column non-work hours overlays */
/* Before work overlay */
swp-day-column::before {
content: '';
position: absolute;
left: 0;
right: 0;
background: var(--color-non-work-hours);
pointer-events: none;
z-index: 2;
/* Before work period - from day start to work start */
top: 0;
height: var(--before-work-height, 0px);
opacity: 0.3;
}
/* After work overlay */
swp-day-column::after {
content: '';
position: absolute;
left: 0;
right: 0;
background: var(--color-non-work-hours);
pointer-events: none;
z-index: 2;
/* After work period - from work end to day end */
top: var(--after-work-top, 100%);
bottom: 0;
opacity: 0.3;
}
/* Full day overlay when day is off */
swp-day-column[data-work-hours="off"] {
background: var(--color-non-work-hours);
}
swp-day-column[data-work-hours="off"]::before,
swp-day-column[data-work-hours="off"]::after {
display: none;
}
swp-day-column:last-child {
@ -390,6 +438,7 @@ swp-resource-column {
position: relative;
border-right: 1px solid var(--color-grid-line);
min-width: var(--day-column-min-width);
background: var(--color-event-grid);
}
swp-resource-column:last-child {