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

Implements custom scroll and event logging

Browse source 
Adds custom scroll management for the calendar week view, replacing native scrollbars with a custom handle.

Introduces categorized event logging with console grouping and styling, enhancing debug output. It also allows configuring logging for specific event categories.
This commit is contained in:
Janus Knudsen 2025-07-29 00:52:01 +02:00
parent 001443ce11
commit 9f6d4333cb
7 changed files with 606 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,12 +1,26 @@
/* styles/layout.css - POC Structure Implementation */
/* Main calendar container */
/* Calendar wrapper container - full viewport */
.calendar-wrapper {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
box-sizing: border-box;
overflow: hidden;
}
/* Main calendar container - full height */
swp-calendar {
display: flex;
flex-direction: column;
height: 100vh;
width: 100%;
background: var(--color-background);
position: relative;
overflow: hidden;
}
/* Navigation bar layout */
@ -25,16 +39,37 @@ swp-calendar-nav {
swp-calendar-container {
flex: 1;
display: grid;
grid-template-columns: 60px 1fr;
grid-template-rows: 1fr;
grid-template-columns: 60px 1fr 20px;
grid-template-rows: auto 1fr;
overflow: hidden;
position: relative;
}
/* Header spacer for time axis alignment */
swp-header-spacer {
grid-column: 1;
grid-row: 1;
height: 80px; /* Same as week header height */
background: var(--color-surface);
border-right: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
/* Right header spacer */
swp-right-header-spacer {
grid-column: 3;
grid-row: 1;
height: 80px; /* Same as week header height */
background: var(--color-surface);
border-left: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
/* Week container for sliding */
swp-week-container {
grid-column: 2;
grid-row: 1 / 3;
display: grid;
grid-template-rows: auto 1fr;
position: relative;
@ -45,13 +80,49 @@ swp-week-container {
/* Time axis */
swp-time-axis {
grid-column: 1;
grid-row: 1;
grid-row: 2;
background: var(--color-surface);
border-right: 1px solid var(--color-border);
position: sticky;
left: 0;
z-index: 4;
padding-top: 80px; /* Match header height */
width: 60px;
display: flex;
flex-direction: column;
}
/* Right column */
swp-right-column {
grid-column: 3;
grid-row: 2;
background: #f0f0f0;
border-left: 2px solid #333;
position: relative;
z-index: 4;
width: 20px;
overflow: hidden;
}
/* Scroll handle */
swp-scroll-handle {
position: absolute;
top: 0;
left: 2px;
width: 16px;
height: 40px;
background: #666;
border-radius: 8px;
cursor: grab;
transition: background-color 0.2s ease;
z-index: 5;
}
swp-scroll-handle:hover {
background: #333;
}
swp-scroll-handle.dragging {
background: #007bff;
}
swp-hour-marker {
@ -134,12 +205,13 @@ swp-scrollable-content {
scroll-behavior: smooth;
position: relative;
display: grid;
/* Height will be set dynamically by ScrollManager via ResizeObserver */
}
/* Time grid */
swp-time-grid {
position: relative;
height: calc(12 * var(--hour-height));
height: calc((var(--day-end-hour) - var(--day-start-hour)) * var(--hour-height));
}
swp-time-grid::before {

88
wwwroot/index.html
View file

@ -13,51 +13,53 @@
<link rel="stylesheet" href="css/calendar-popup-css.css">
</head>
<body>
<swp-calendar data-view="week" data-week-days="7" data-snap-interval="15">
<!-- Navigation Bar -->
<swp-calendar-nav>
<swp-nav-group>
<swp-nav-button data-action="prev">←</swp-nav-button>
<swp-nav-button data-action="next">→</swp-nav-button>
<swp-nav-button data-action="today">Today</swp-nav-button>
</swp-nav-group>
<div class="calendar-wrapper">
<swp-calendar data-view="week" data-week-days="7" data-snap-interval="15">
<!-- Navigation Bar -->
<swp-calendar-nav>
<swp-nav-group>
<swp-nav-button data-action="prev">←</swp-nav-button>
<swp-nav-button data-action="next">→</swp-nav-button>
<swp-nav-button data-action="today">Today</swp-nav-button>
</swp-nav-group>
<swp-week-info>
<swp-week-number>Week 3</swp-week-number>
<swp-date-range>Jan 15 - Jan 21, 2024</swp-date-range>
</swp-week-info>
<swp-search-container>
<swp-search-icon>
<svg width="16" height="16" viewBox="0 0 16 16">
<circle cx="6" cy="6" r="5" stroke="currentColor" fill="none" stroke-width="1.5"/>
<path d="M10 10l4 4" stroke="currentColor" stroke-width="1.5"/>
</svg>
</swp-search-icon>
<input type="search" placeholder="Search events..." />
<swp-search-clear hidden>
<svg width="14" height="14" viewBox="0 0 16 16">
<path d="M5 5l6 6M11 5l-6 6" stroke="currentColor" stroke-width="2"/>
</svg>
</swp-search-clear>
</swp-search-container>
<swp-view-selector>
<swp-view-button data-view="day">Day</swp-view-button>
<swp-view-button data-view="week" data-active="true">Week</swp-view-button>
<swp-view-button data-view="month" disabled>Month</swp-view-button>
</swp-view-selector>
</swp-calendar-nav>
<swp-week-info>
<swp-week-number>Week 3</swp-week-number>
<swp-date-range>Jan 15 - Jan 21, 2024</swp-date-range>
</swp-week-info>
<!-- Calendar Grid Container -->
<swp-calendar-container>
<!-- Headers and time slots will be generated dynamically by JavaScript -->
</swp-calendar-container>
<swp-search-container>
<swp-search-icon>
<svg width="16" height="16" viewBox="0 0 16 16">
<circle cx="6" cy="6" r="5" stroke="currentColor" fill="none" stroke-width="1.5"/>
<path d="M10 10l4 4" stroke="currentColor" stroke-width="1.5"/>
</svg>
</swp-search-icon>
<input type="search" placeholder="Search events..." />
<swp-search-clear hidden>
<svg width="14" height="14" viewBox="0 0 16 16">
<path d="M5 5l6 6M11 5l-6 6" stroke="currentColor" stroke-width="2"/>
</svg>
</swp-search-clear>
</swp-search-container>
<swp-view-selector>
<swp-view-button data-view="day">Day</swp-view-button>
<swp-view-button data-view="week" data-active="true">Week</swp-view-button>
<swp-view-button data-view="month" disabled>Month</swp-view-button>
</swp-view-selector>
</swp-calendar-nav>
<!-- Calendar Grid Container -->
<swp-calendar-container>
<!-- Headers and time slots will be generated dynamically by JavaScript -->
</swp-calendar-container>
<swp-loading-overlay hidden>
<swp-spinner></swp-spinner>
</swp-loading-overlay>
</swp-calendar>
<swp-loading-overlay hidden>
<swp-spinner></swp-spinner>
</swp-loading-overlay>
</swp-calendar>
</div>
<!-- JavaScript Bundle -->
<script type="module" src="js/calendar.js"></script>