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

Refactor calendar UI and time range configuration

Browse source 
Updates time axis and calendar to focus on 6-18 hour range
Modifies CSS to support nested selectors and time range configuration
Enhances DateService to support flexible week date generation
This commit is contained in:
Janus C. H. Knudsen 2025-12-07 21:54:12 +01:00
parent e2c79c067f
commit 899c600e44
3 changed files with 83 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/v2/core/DateService.ts
View file

@ -12,9 +12,9 @@ export class DateService {
return new Intl.DateTimeFormat(this.config.locale, { weekday: format }).format(date); return new Intl.DateTimeFormat(this.config.locale, { weekday: format }).format(date);
} }
getWeekDates(offset = 0): string[] { getWeekDates(offset = 0, days = 7): string[] {
const monday = dayjs().startOf('week').add(1, 'day').add(offset, 'week'); const monday = dayjs().startOf('week').add(1, 'day').add(offset, 'week');
return Array.from({ length: 7 }, (_, i) => return Array.from({ length: days }, (_, i) =>
monday.add(i, 'day').format('YYYY-MM-DD') monday.add(i, 'day').format('YYYY-MM-DD')
); );
} }

4
src/v2/demo/DemoApp.ts
View file

@ -50,8 +50,8 @@ export class DemoApp {
} }
}; };
// Render time axis // Render time axis (06:00 - 18:00)
this.timeAxisRenderer.render(document.getElementById('time-axis') as HTMLElement); this.timeAxisRenderer.render(document.getElementById('time-axis') as HTMLElement, 6, 18);
// Init scroll synkronisering // Init scroll synkronisering
this.scrollManager.init(this.container); this.scrollManager.init(this.container);

159
wwwroot/css/calendar-v2.css
View file

@ -3,8 +3,8 @@
--time-axis-width: 60px; --time-axis-width: 60px;
--grid-columns: 7; --grid-columns: 7;
--day-column-min-width: 200px; --day-column-min-width: 200px;
--day-start-hour: 0; --day-start-hour: 6;
--day-end-hour: 24; --day-end-hour: 18;
--color-border: #e0e0e0; --color-border: #e0e0e0;
--color-surface: #fff; --color-surface: #fff;
--color-text-secondary: #666; --color-text-secondary: #666;
@ -48,23 +48,23 @@ swp-nav-button {
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
background: var(--color-surface); background: var(--color-surface);
}
swp-nav-button:hover { background: #f0f0f0; } &:hover { background: #f0f0f0; }
}
swp-week-info { swp-week-info {
margin-left: auto; margin-left: auto;
text-align: right; text-align: right;
}
swp-week-number { swp-week-number {
font-weight: 600; font-weight: 600;
display: block; display: block;
} }
swp-date-range { swp-date-range {
font-size: 12px; font-size: 12px;
color: var(--color-text-secondary); color: var(--color-text-secondary);
}
} }
/* Container */ /* Container */
@ -108,16 +108,16 @@ swp-hour-marker {
color: var(--color-text-secondary); color: var(--color-text-secondary);
text-align: right; text-align: right;
position: relative; position: relative;
}
swp-hour-marker::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;
top: -1px; top: -1px;
right: 0; right: 0;
width: 5px; width: 5px;
height: 1px; height: 1px;
background: var(--color-hour-line); background: var(--color-hour-line);
}
} }
/* Grid container */ /* Grid container */
@ -141,20 +141,18 @@ swp-content-viewport {
swp-header-track { swp-header-track {
display: flex; display: flex;
> swp-calendar-header { flex: 0 0 100%; }
} }
swp-content-track { swp-content-track {
display: flex; display: flex;
height: 100%; height: 100%;
}
swp-header-track > swp-calendar-header { > swp-scrollable-content {
flex: 0 0 100%; flex: 0 0 100%;
} height: 100%;
}
swp-content-track > swp-scrollable-content {
flex: 0 0 100%;
height: 100%;
} }
/* Header */ /* Header */
@ -166,25 +164,24 @@ swp-calendar-header {
background: var(--color-surface); background: var(--color-surface);
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
&::-webkit-scrollbar { background: transparent; }
&::-webkit-scrollbar-thumb { background: transparent; }
&[data-levels="date"] > swp-day-header { grid-row: 1; }
&[data-levels="resource date"] {
> swp-resource-header { grid-row: 1; }
> swp-day-header { grid-row: 2; }
}
&[data-levels="team resource date"] {
> swp-team-header { grid-row: 1; }
> swp-resource-header { grid-row: 2; }
> swp-day-header { grid-row: 3; }
}
} }
swp-calendar-header::-webkit-scrollbar {
background: transparent;
}
swp-calendar-header::-webkit-scrollbar-thumb {
background: transparent;
}
swp-calendar-header[data-levels="date"] > swp-day-header { grid-row: 1; }
swp-calendar-header[data-levels="resource date"] > swp-resource-header { grid-row: 1; }
swp-calendar-header[data-levels="resource date"] > swp-day-header { grid-row: 2; }
swp-calendar-header[data-levels="team resource date"] > swp-team-header { grid-row: 1; }
swp-calendar-header[data-levels="team resource date"] > swp-resource-header { grid-row: 2; }
swp-calendar-header[data-levels="team resource date"] > swp-day-header { grid-row: 3; }
swp-day-header, swp-day-header,
swp-resource-header, swp-resource-header,
swp-team-header { swp-team-header {
@ -205,17 +202,19 @@ swp-resource-header {
font-size: 13px; font-size: 13px;
} }
swp-day-name { swp-day-header {
display: block; swp-day-name {
font-size: 11px; display: block;
color: var(--color-text-secondary); font-size: 11px;
text-transform: uppercase; color: var(--color-text-secondary);
} text-transform: uppercase;
}
swp-day-date { swp-day-date {
display: block; display: block;
font-size: 24px; font-size: 24px;
font-weight: 300; font-weight: 300;
}
} }
/* Scrollable content */ /* Scrollable content */
@ -229,22 +228,22 @@ swp-time-grid {
position: relative; position: relative;
min-height: calc((var(--day-end-hour) - var(--day-start-hour)) * var(--hour-height)); min-height: calc((var(--day-end-hour) - var(--day-start-hour)) * var(--hour-height));
min-width: calc(var(--grid-columns) * var(--day-column-min-width)); min-width: calc(var(--grid-columns) * var(--day-column-min-width));
}
/* Timelinjer via ::after */ /* Timelinjer */
swp-time-grid::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;
inset: 0; inset: 0;
z-index: 2; z-index: 2;
background-image: repeating-linear-gradient( background-image: repeating-linear-gradient(
to bottom, to bottom,
transparent, transparent,
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; pointer-events: none;
}
} }
/* Kvarterlinjer - 3 linjer per time (15, 30, 45 min), ikke ved timegrænsen */ /* Kvarterlinjer - 3 linjer per time (15, 30, 45 min), ikke ved timegrænsen */
@ -299,15 +298,15 @@ swp-event {
padding: 4px 6px; padding: 4px 6px;
font-size: 12px; font-size: 12px;
overflow: hidden; overflow: hidden;
}
swp-event-time { swp-event-time {
display: block; display: block;
font-size: 10px; font-size: 10px;
opacity: 0.9; opacity: 0.9;
} }
swp-event-title { swp-event-title {
display: block; display: block;
font-weight: 500; font-weight: 500;
}
} }