LeoVasanko/calendar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move calendarweeks etc. in DOM after the month name bar, to make them render on top of it and not under.

Browse Source
This commit is contained in:
Leo Vasanko
2025-09-25 10:17:22 -06:00
parent 3c5cad0afe
commit cb60c589e3
1 changed files with 24 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/CalendarView.vue
View File

@@ -541,26 +541,6 @@ window.addEventListener('resize', () => {
/>
<div class="calendar-container">
<div class="calendar-viewport" ref="viewport" :style="viewportBlurStyle">
<div class="calendar-content" :style="{ height: contentHeight + 'px' }">
<div
class="weeks-wrapper"
:style="{
transform: `translateY(${visibleWeeks.length ? visibleWeeks[0].top : 0}px)`,
}"
>
<CalendarWeek
v-for="week in visibleWeeks"
:key="week.virtualWeek"
:week="week"
:dragging="isDragging"
@day-mousedown="handleDayMouseDown"
@day-mouseenter="handleDayMouseEnter"
@day-mouseup="handleDayMouseUp"
@day-touchstart="handleDayTouchStart"
@event-click="handleEventClick"
/>
</div>
</div>
<div class="month-column-area" :style="{ height: contentHeight + 'px' }">
<div class="month-labels-container" :style="{ height: '100%' }">
<div
@@ -588,6 +568,26 @@ window.addEventListener('resize', () => {
</div>
</div>
</div>
<div class="calendar-content" :style="{ height: contentHeight + 'px' }">
<div
class="weeks-wrapper"
:style="{
transform: `translateY(${visibleWeeks.length ? visibleWeeks[0].top : 0}px)`,
}"
>
<CalendarWeek
v-for="week in visibleWeeks"
:key="week.virtualWeek"
:week="week"
:dragging="isDragging"
@day-mousedown="handleDayMouseDown"
@day-mouseenter="handleDayMouseEnter"
@day-mouseup="handleDayMouseUp"
@day-touchstart="handleDayTouchStart"
@event-click="handleEventClick"
/>
</div>
</div>
</div>
<!-- Jogwheel overlay captures drag + wheel over month name column -->
<Jogwheel
@@ -650,6 +650,8 @@ header h1 {
.calendar-content {
position: relative;
width: 100%;
grid-column: 1;
grid-row: 1;
}
.weeks-wrapper {
@@ -662,6 +664,8 @@ header h1 {
.month-column-area {
position: relative;
cursor: ns-resize;
grid-column: 2;
grid-row: 1;
}
.month-labels-container {
@@ -687,7 +691,6 @@ header h1 {
display: flex;
align-items: center;
justify-content: center;
z-index: 5;
overflow: hidden;
cursor: ns-resize;
user-select: none;