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

Scroll the week to view the second row visible (showing also the previous week) rather than centered, for better UX.

Browse Source
This commit is contained in:
Leo Vasanko
2025-09-25 08:35:46 -06:00
parent 159bbf816d
commit 86a1a4d772
2 changed files with 11 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/CalendarView.vue
View File

@@ -197,13 +197,13 @@ const {
getWeekIndex, getWeekIndex,
getFirstDayForVirtualWeek, getFirstDayForVirtualWeek,
handleHeaderYearChange, handleHeaderYearChange,
scrollToWeekCentered, scrollToWeek,
} = vwm } = vwm
function showDay(input) { function showDay(input) {
const dateStr = input instanceof Date ? toLocalString(input, DEFAULT_TZ) : String(input) const dateStr = input instanceof Date ? toLocalString(input, DEFAULT_TZ) : String(input)
const weekIndex = getWeekIndex(fromLocalString(dateStr, DEFAULT_TZ)) const weekIndex = getWeekIndex(fromLocalString(dateStr, DEFAULT_TZ))
scrollToWeekCentered(weekIndex, 'nav', true) scrollToWeek(weekIndex, 'nav', true)
const diff = Math.abs(weekIndex - centerVisibleWeek.value) const diff = Math.abs(weekIndex - centerVisibleWeek.value)
const delay = Math.min(800, diff * 40) const delay = Math.min(800, diff * 40)
setTimeout(() => { setTimeout(() => {
@@ -228,10 +228,6 @@ const centerVisibleDateStr = computed(() => {
} }
}) })
// createWeek logic moved to virtualWeeks plugin
// goToToday now provided by manager
function clearSelection() { function clearSelection() {
selection.value = { startDate: null, dayCount: 0 } selection.value = { startDate: null, dayCount: 0 }
} }

18
src/plugins/virtualWeeks.js
View File

@@ -287,20 +287,20 @@ export function createVirtualWeekManager({
function goToToday() { function goToToday() {
const todayDate = new Date(calendarStore.now) const todayDate = new Date(calendarStore.now)
const targetWeekIndex = getWeekIndex(todayDate) const targetWeekIndex = getWeekIndex(todayDate)
scrollToWeekCentered(targetWeekIndex, 'go-to-today', true) scrollToWeek(targetWeekIndex, 'go-to-today', true)
} }
function scrollToWeekCentered(weekIndex, reason = 'center-scroll', smooth = true) { function scrollToWeek(weekIndex, reason = 'scroll', smooth = true) {
if (weekIndex == null || !isFinite(weekIndex)) return if (weekIndex == null || !isFinite(weekIndex)) return
const maxScroll = Math.max(0, contentHeight.value - viewportHeight.value) const maxScroll = Math.max(0, contentHeight.value - viewportHeight.value)
const baseTop = (weekIndex - minVirtualWeek.value) * rowHeight.value // Scroll so that the top of the viewport aligns with the top of the previous week,
// Center: subtract half viewport minus half row height // making the target week the second visible week row
let newScrollTop = baseTop - (viewportHeight.value / 2 - rowHeight.value / 2) const newScrollTop = (weekIndex - 1 - minVirtualWeek.value) * rowHeight.value
newScrollTop = Math.max(0, Math.min(newScrollTop, maxScroll)) const clampedScrollTop = Math.max(0, Math.min(newScrollTop, maxScroll))
if (smooth && viewport.value && typeof viewport.value.scrollTo === 'function') { if (smooth && viewport.value && typeof viewport.value.scrollTo === 'function') {
viewport.value.scrollTo({ top: newScrollTop, behavior: 'smooth' }) viewport.value.scrollTo({ top: clampedScrollTop, behavior: 'smooth' })
} else if (setScrollTopFn) { } else if (setScrollTopFn) {
setScrollTopFn(newScrollTop, reason) setScrollTopFn(clampedScrollTop, reason)
scheduleWindowUpdate(reason) scheduleWindowUpdate(reason)
} }
} }
@@ -322,7 +322,7 @@ export function createVirtualWeekManager({
getWeekIndex, getWeekIndex,
getFirstDayForVirtualWeek, getFirstDayForVirtualWeek,
goToToday, goToToday,
scrollToWeekCentered, scrollToWeek,
handleHeaderYearChange, handleHeaderYearChange,
attachScroll, attachScroll,
} }