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

Compare commits

base: LeoVasanko:4e816a2cdef86789a3bf53d5b6c1b393caaf9f26
Branches Tags
LeoVasanko:main
LeoVasanko:v0.2.0
LeoVasanko:v0.1.0
..
compare: LeoVasanko:d8b4639ecd17c35c1a1b796cc49137a116d767cf
Branches Tags
LeoVasanko:main
LeoVasanko:v0.2.0
LeoVasanko:v0.1.0

No commits in common. "4e816a2cdef86789a3bf53d5b6c1b393caaf9f26" and "d8b4639ecd17c35c1a1b796cc49137a116d767cf" have entirely different histories.
4e816a2cde ... d8b4639ecd

10 changed files with 535 additions and 702 deletions
Show Stats Expand all files Collapse all files

306
src/components/CalendarView.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { ref, onMounted, onBeforeUnmount, computed, watch, nextTick } from 'vue' import { ref, onMounted, onBeforeUnmount, computed, watch } from 'vue'
import { useCalendarStore } from '@/stores/CalendarStore' import { useCalendarStore } from '@/stores/CalendarStore'
import CalendarHeader from '@/components/CalendarHeader.vue' import CalendarHeader from '@/components/CalendarHeader.vue'
import CalendarWeek from '@/components/CalendarWeek.vue' import CalendarWeek from '@/components/CalendarWeek.vue'
@ -397,154 +397,6 @@ const handleEventClick = (payload) => {
openEditEventDialog(payload) openEditEventDialog(payload)
} }
// ------------------------------
// Event Search (Ctrl/Cmd+F)
// ------------------------------
const searchOpen = ref(false)
const searchQuery = ref('')
const searchResults = ref([]) // [{ id, title, startDate }]
const searchIndex = ref(0)
const searchInputRef = ref(null)
function isEditableElement(el) {
if (!el) return false
const tag = el.tagName
if (tag === 'INPUT' || tag === 'TEXTAREA' || el.isContentEditable) return true
return false
}
function buildSearchResults() {
const q = searchQuery.value.trim().toLowerCase()
if (!q) {
searchResults.value = []
searchIndex.value = 0
return
}
const out = []
for (const ev of calendarStore.events.values()) {
const title = (ev.title || '').trim()
if (!title) continue
if (title.toLowerCase().includes(q)) {
out.push({ id: ev.id, title: title, startDate: ev.startDate })
}
}
out.sort((a, b) => (a.startDate < b.startDate ? -1 : a.startDate > b.startDate ? 1 : 0))
searchResults.value = out
if (searchIndex.value >= out.length) searchIndex.value = 0
}
watch(searchQuery, buildSearchResults)
watch(
() => calendarStore.eventsMutation,
() => {
if (searchOpen.value && searchQuery.value.trim()) buildSearchResults()
},
)
function openSearch(prefill = '') {
searchOpen.value = true
if (prefill) searchQuery.value = prefill
nextTick(() => {
if (searchInputRef.value) {
searchInputRef.value.focus()
searchInputRef.value.select()
}
})
buildSearchResults()
}
function closeSearch() {
searchOpen.value = false
}
function navigateSearch(delta) {
const n = searchResults.value.length
if (!n) return
searchIndex.value = (searchIndex.value + delta + n) % n
scrollToCurrentResult()
}
function scrollToCurrentResult() {
const cur = searchResults.value[searchIndex.value]
if (!cur) return
// Scroll so week containing event is near top (offset 2 weeks for context)
try {
const dateObj = fromLocalString(cur.startDate, DEFAULT_TZ)
const weekIndex = getWeekIndex(dateObj)
const offsetWeeks = 2
const targetScrollWeek = Math.max(minVirtualWeek.value, weekIndex - offsetWeeks)
const newScrollTop = (targetScrollWeek - minVirtualWeek.value) * rowHeight.value
setScrollTop(newScrollTop, 'search-jump')
scheduleWindowUpdate('search-jump')
} catch {}
}
function activateCurrentResult() {
scrollToCurrentResult()
}
function handleGlobalFind(e) {
if (!(e.ctrlKey || e.metaKey)) return
const k = e.key
if (k === 'f' || k === 'F') {
if (isEditableElement(e.target)) return
e.preventDefault()
if (!searchOpen.value) openSearch('')
else {
// If already open, select input text for quick overwrite
nextTick(() => {
if (searchInputRef.value) {
searchInputRef.value.focus()
searchInputRef.value.select()
}
})
}
}
// While open: Enter confirms current selection & closes dialog
if (searchOpen.value && (k === 'Enter' || k === 'Return')) {
e.preventDefault()
activateCurrentResult()
closeSearch()
}
}
function handleSearchKeydown(e) {
if (!searchOpen.value) return
if (e.key === 'Escape') {
e.preventDefault()
closeSearch()
} else if (e.key === 'ArrowDown') {
e.preventDefault()
navigateSearch(1)
} else if (e.key === 'ArrowUp') {
e.preventDefault()
navigateSearch(-1)
} else if (e.key === 'Enter') {
// Enter inside input: activate current and close
e.preventDefault()
activateCurrentResult()
closeSearch()
}
}
onMounted(() => {
document.addEventListener('keydown', handleGlobalFind, { passive: false })
})
onBeforeUnmount(() => {
document.removeEventListener('keydown', handleGlobalFind)
})
// Ensure focus when (re)opening via reactive watch (catches programmatic toggles too)
watch(
() => searchOpen.value,
(v) => {
if (v) {
nextTick(() => {
if (searchInputRef.value) {
searchInputRef.value.focus()
searchInputRef.value.select()
}
})
}
},
)
// Heuristic: rotate month label (180deg) only for predominantly Latin text. // Heuristic: rotate month label (180deg) only for predominantly Latin text.
// We explicitly avoid locale detection; rely solely on characters present. // We explicitly avoid locale detection; rely solely on characters present.
// Disable rotation if any CJK Unified Ideograph or Compatibility Ideograph appears. // Disable rotation if any CJK Unified Ideograph or Compatibility Ideograph appears.
@ -605,22 +457,27 @@ window.addEventListener('resize', () => {
/> />
<div class="calendar-container"> <div class="calendar-container">
<div class="calendar-viewport" ref="viewport"> <div class="calendar-viewport" ref="viewport">
<div class="calendar-content" :style="{ height: contentHeight + 'px' }"> <!-- Main calendar content (weeks and days) -->
<CalendarWeek <div class="main-calendar-area">
v-for="week in visibleWeeks" <div class="calendar-content" :style="{ height: contentHeight + 'px' }">
:key="week.virtualWeek" <CalendarWeek
:week="week" v-for="week in visibleWeeks"
:dragging="isDragging" :key="week.virtualWeek"
:style="{ top: week.top + 'px' }" :week="week"
@day-mousedown="handleDayMouseDown" :dragging="isDragging"
@day-mouseenter="handleDayMouseEnter" :style="{ top: week.top + 'px' }"
@day-mouseup="handleDayMouseUp" @day-mousedown="handleDayMouseDown"
@day-touchstart="handleDayTouchStart" @day-mouseenter="handleDayMouseEnter"
@event-click="handleEventClick" @day-mouseup="handleDayMouseUp"
/> @day-touchstart="handleDayTouchStart"
@event-click="handleEventClick"
/>
</div>
</div> </div>
<div class="month-column-area" :style="{ height: contentHeight + 'px' }"> <!-- Month column area -->
<div class="month-labels-container" :style="{ height: '100%' }"> <div class="month-column-area">
<!-- Month labels -->
<div class="month-labels-container" :style="{ height: contentHeight + 'px' }">
<template v-for="monthWeek in visibleWeeks" :key="monthWeek.virtualWeek + '-month'"> <template v-for="monthWeek in visibleWeeks" :key="monthWeek.virtualWeek + '-month'">
<div <div
v-if="monthWeek && monthWeek.monthLabel" v-if="monthWeek && monthWeek.monthLabel"
@ -644,33 +501,6 @@ window.addEventListener('resize', () => {
</div> </div>
</div> </div>
<EventDialog ref="eventDialogRef" :selection="{ startDate: null, dayCount: 0 }" /> <EventDialog ref="eventDialogRef" :selection="{ startDate: null, dayCount: 0 }" />
<!-- Event Search Overlay -->
<div v-if="searchOpen" class="event-search" @keydown.capture="handleSearchKeydown">
<div class="search-row">
<input
ref="searchInputRef"
v-model="searchQuery"
type="text"
placeholder="Search events..."
aria-label="Search events"
autofocus
/>
<button type="button" @click="closeSearch" title="Close (Esc)">✕</button>
</div>
<ul class="results" v-if="searchResults.length">
<li
v-for="(r, i) in searchResults"
:key="r.id"
:class="{ active: i === searchIndex }"
@click="((searchIndex = i), activateCurrentResult(), closeSearch())"
>
<span class="title">{{ r.title }}</span>
<span class="date">{{ r.startDate }}</span>
</li>
</ul>
<div v-else class="no-results">{{ searchQuery ? 'No matches' : 'Type to search' }}</div>
<div class="hint">Enter to go, Esc to close, ↑/↓ to browse</div>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -719,6 +549,11 @@ header h1 {
grid-template-columns: 1fr var(--month-w); grid-template-columns: 1fr var(--month-w);
} }
.main-calendar-area {
position: relative;
overflow: hidden;
}
.calendar-content { .calendar-content {
position: relative; position: relative;
width: 100%; width: 100%;
@ -772,93 +607,4 @@ header h1 {
height: var(--row-h); height: var(--row-h);
pointer-events: none; pointer-events: none;
} }
/* Search overlay */
.event-search {
position: fixed;
top: 0.75rem;
inset-inline-end: 0.75rem;
z-index: 1200;
background: color-mix(in srgb, var(--panel) 90%, transparent);
backdrop-filter: blur(0.75em);
-webkit-backdrop-filter: blur(0.75em);
color: var(--ink);
padding: 0.75rem 0.75rem 0.6rem 0.75rem;
border-radius: 0.6rem;
width: min(28rem, 80vw);
box-shadow: 0 0.5em 1.25em rgba(0, 0, 0, 0.35);
border: 1px solid color-mix(in srgb, var(--muted) 40%, transparent);
font-size: 0.9rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.event-search .search-row {
display: flex;
gap: 0.4rem;
}
.event-search input[type='text'] {
flex: 1;
padding: 0.45rem 0.6rem;
border-radius: 0.4rem;
border: 1px solid color-mix(in srgb, var(--muted) 40%, transparent);
background: color-mix(in srgb, var(--panel) 85%, transparent);
color: inherit;
}
.event-search button {
background: color-mix(in srgb, var(--accent, #4b7) 70%, transparent);
color: var(--ink, #111);
border: 0;
border-radius: 0.4rem;
padding: 0.45rem 0.6rem;
cursor: pointer;
}
.event-search button:disabled {
opacity: 0.4;
cursor: default;
}
.event-search .results {
list-style: none;
margin: 0;
padding: 0;
max-height: 14rem;
overflow: auto;
border: 1px solid color-mix(in srgb, var(--muted) 30%, transparent);
border-radius: 0.4rem;
}
.event-search .results li {
display: flex;
justify-content: space-between;
gap: 0.75rem;
padding: 0.4rem 0.55rem;
cursor: pointer;
font-size: 0.85rem;
line-height: 1.2;
}
.event-search .results li.active {
background: color-mix(in srgb, var(--accent, #4b7) 45%, transparent);
color: var(--ink, #111);
font-weight: 600;
}
.event-search .results li:hover:not(.active) {
background: color-mix(in srgb, var(--panel) 70%, transparent);
}
.event-search .results .title {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.event-search .results .date {
opacity: 0.6;
font-family: monospace;
}
.event-search .no-results {
padding: 0.25rem 0.1rem;
opacity: 0.7;
}
.event-search .hint {
opacity: 0.55;
font-size: 0.7rem;
}
</style> </style>

52
src/components/EventDialog.vue
View File

@ -12,7 +12,6 @@ import {
formatDateLong, formatDateLong,
DEFAULT_TZ, DEFAULT_TZ,
} from '@/utils/date' } from '@/utils/date'
import { getDate as getOccurrenceDate } from '@/utils/events'
import { addDays, addMonths } from 'date-fns' import { addDays, addMonths } from 'date-fns'
const props = defineProps({ const props = defineProps({
@ -302,18 +301,48 @@ function openEditDialog(payload) {
if (!payload) return if (!payload) return
const baseId = payload.id const baseId = payload.id
let n = payload.n || 0 let occurrenceIndex = payload.occurrenceIndex || 0
let weekday = null let weekday = null
let occurrenceDate = null let occurrenceDate = null
const event = calendarStore.getEventById(baseId) const event = calendarStore.getEventById(baseId)
if (!event) return if (!event) return
if (event.recur && n >= 0) { if (event.recur) {
const occStr = getOccurrenceDate(event, n, DEFAULT_TZ) if (event.recur.freq === 'weeks' && occurrenceIndex >= 0) {
if (occStr) { const pattern = event.recur.weekdays || []
occurrenceDate = fromLocalString(occStr, DEFAULT_TZ) const baseStart = fromLocalString(event.startDate, DEFAULT_TZ)
weekday = occurrenceDate.getDay() const baseEnd = new Date(fromLocalString(event.startDate, DEFAULT_TZ))
baseEnd.setDate(baseEnd.getDate() + (event.days || 1) - 1)
if (occurrenceIndex === 0) {
occurrenceDate = baseStart
weekday = baseStart.getDay()
} else {
const interval = event.recur.interval || 1
const WEEK_MS = 7 * 86400000
const baseBlockStart = getMondayOfISOWeek(baseStart)
function isAligned(d) {
const blk = getMondayOfISOWeek(d)
const diff = Math.floor((blk - baseBlockStart) / WEEK_MS)
return diff % interval === 0
}
let cur = addDays(baseEnd, 1)
let found = 0
let safety = 0
while (found < occurrenceIndex && safety < 20000) {
if (pattern[cur.getDay()] && isAligned(cur)) {
found++
if (found === occurrenceIndex) break
}
cur = addDays(cur, 1)
safety++
}
occurrenceDate = cur
weekday = cur.getDay()
}
} else if (event.recur.freq === 'months' && occurrenceIndex >= 0) {
const baseDate = fromLocalString(event.startDate, DEFAULT_TZ)
occurrenceDate = addMonths(baseDate, occurrenceIndex)
} }
} }
dialogMode.value = 'edit' dialogMode.value = 'edit'
@ -343,10 +372,10 @@ function openEditDialog(payload) {
eventSaved.value = false eventSaved.value = false
if (event.recur) { if (event.recur) {
if (event.recur.freq === 'weeks' && n >= 0) { if (event.recur.freq === 'weeks' && occurrenceIndex >= 0) {
occurrenceContext.value = { baseId, occurrenceIndex: n, weekday, occurrenceDate } occurrenceContext.value = { baseId, occurrenceIndex, weekday, occurrenceDate }
} else if (event.recur.freq === 'months' && n > 0) { } else if (event.recur.freq === 'months' && occurrenceIndex > 0) {
occurrenceContext.value = { baseId, occurrenceIndex: n, weekday: null, occurrenceDate } occurrenceContext.value = { baseId, occurrenceIndex, weekday: null, occurrenceDate }
} }
} }
// anchor to base event start date // anchor to base event start date
@ -626,7 +655,6 @@ const recurrenceSummary = computed(() => {
v-model="recurrenceWeekdays" v-model="recurrenceWeekdays"
:fallback="fallbackWeekdays" :fallback="fallbackWeekdays"
:first-day="calendarStore.config.first_day" :first-day="calendarStore.config.first_day"
:weekend="calendarStore.weekend"
/> />
</div> </div>
</div> </div>

307
src/components/EventOverlay.vue
View File

@ -1,41 +1,34 @@
<template> <template>
<div class="week-overlay" :style="{ gridColumn: '1 / -1' }" ref="weekOverlayRef"> <div class="week-overlay">
<div <div
v-for="seg in eventSegments" v-for="span in eventSpans"
:key="'seg-' + seg.startIdx + '-' + seg.endIdx" :key="span.id"
:class="['segment-grid', { compress: isSegmentCompressed(seg) }]" class="event-span"
:style="segmentStyle(seg)" dir="auto"
:class="[`event-color-${span.colorId}`]"
:data-id="span.id"
:data-n="span._recurrenceIndex != null ? span._recurrenceIndex : 0"
:style="{
gridColumn: `${span.startIdx + 1} / ${span.endIdx + 2}`,
gridRow: `${span.row}`,
}"
@click="handleEventClick(span)"
@pointerdown="handleEventPointerDown(span, $event)"
> >
<span class="event-title">{{ span.title }}</span>
<div <div
v-for="span in seg.events" class="resize-handle left"
:key="span.id + '-' + (span.n != null ? span.n : 0)" @pointerdown="handleResizePointerDown(span, 'resize-left', $event)"
class="event-span" ></div>
dir="auto" <div
:class="[`event-color-${span.colorId}`]" class="resize-handle right"
:data-id="span.id" @pointerdown="handleResizePointerDown(span, 'resize-right', $event)"
:data-n="span.n != null ? span.n : 0" ></div>
:style="{
gridColumn: `${span.startIdxRel + 1} / ${span.endIdxRel + 2}`,
gridRow: `${span.row}`,
}"
@click="handleEventClick(span)"
@pointerdown="handleEventPointerDown(span, $event)"
>
<span class="event-title">{{ span.title }}</span>
<div
class="resize-handle left"
@pointerdown="handleResizePointerDown(span, 'resize-left', $event)"
></div>
<div
class="resize-handle right"
@pointerdown="handleResizePointerDown(span, 'resize-right', $event)"
></div>
</div>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { computed, ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue' import { computed, ref } from 'vue'
import { useCalendarStore } from '@/stores/CalendarStore' import { useCalendarStore } from '@/stores/CalendarStore'
import { daysInclusive, addDaysStr } from '@/utils/date' import { daysInclusive, addDaysStr } from '@/utils/date'
@ -48,139 +41,68 @@ const store = useCalendarStore()
// Drag state // Drag state
const dragState = ref(null) const dragState = ref(null)
const justDragged = ref(false) const justDragged = ref(false)
const weekOverlayRef = ref(null)
const segmentCompression = ref({}) // key -> boolean
// Build event segments: each segment is a contiguous day range with at least one bridging event between any adjacent days within it. // Consolidate already-provided day.events into contiguous spans (no recurrence generation)
const eventSegments = computed(() => { const eventSpans = computed(() => {
// Construct spans across the week const weekEvents = new Map()
const spanMap = new Map() props.week.days.forEach((day, dayIndex) => {
props.week.days.forEach((day, di) => {
day.events.forEach((ev) => { day.events.forEach((ev) => {
const key = ev.id + '|' + (ev.n ?? 0) const key = ev.id
if (!spanMap.has(key)) spanMap.set(key, { ...ev, startIdx: di, endIdx: di }) if (!weekEvents.has(key)) {
else spanMap.get(key).endIdx = Math.max(spanMap.get(key).endIdx, di) weekEvents.set(key, { ...ev, startIdx: dayIndex, endIdx: dayIndex })
} else {
const ref = weekEvents.get(key)
ref.endIdx = Math.max(ref.endIdx, dayIndex)
}
}) })
}) })
const spans = Array.from(spanMap.values()) const arr = Array.from(weekEvents.values())
// Derive span start/end date strings from week day indices (removes need for per-day stored endDate) arr.sort((a, b) => {
spans.forEach((sp) => { const spanA = a.endIdx - a.startIdx
sp.startDate = props.week.days[sp.startIdx].date const spanB = b.endIdx - b.startIdx
sp.endDate = props.week.days[sp.endIdx].date if (spanA !== spanB) return spanB - spanA
})
// Sort so longer multi-day first, then earlier, then id for stability
spans.sort((a, b) => {
const la = a.endIdx - a.startIdx
const lb = b.endIdx - b.startIdx
if (la !== lb) return lb - la
if (a.startIdx !== b.startIdx) return a.startIdx - b.startIdx if (a.startIdx !== b.startIdx) return a.startIdx - b.startIdx
const ca = a.colorId != null ? a.colorId : 0 // For one-day events that are otherwise equal, sort by color (0 first)
const cb = b.colorId != null ? b.colorId : 0 if (spanA === 0 && spanB === 0 && a.startIdx === b.startIdx) {
if (ca !== cb) return ca - cb const colorA = a.colorId || 0
const colorB = b.colorId || 0
if (colorA !== colorB) return colorA - colorB
}
return String(a.id).localeCompare(String(b.id)) return String(a.id).localeCompare(String(b.id))
}) })
// Identify breaks // Assign non-overlapping rows
const breaks = [] const rowsLastEnd = []
for (let d = 0; d < 6; d++) { arr.forEach((ev) => {
const bridged = spans.some((sp) => sp.startIdx <= d && sp.endIdx >= d + 1) let row = 0
if (!bridged) breaks.push(d) while (row < rowsLastEnd.length && !(ev.startIdx > rowsLastEnd[row])) row++
} if (row === rowsLastEnd.length) rowsLastEnd.push(-1)
const rawSegments = [] rowsLastEnd[row] = ev.endIdx
let segStart = 0 ev.row = row + 1
for (const b of breaks) {
rawSegments.push([segStart, b])
segStart = b + 1
}
rawSegments.push([segStart, 6])
const segments = rawSegments.map(([s, e]) => {
const evs = spans.filter((sp) => sp.startIdx >= s && sp.endIdx <= e)
// Row packing in this segment (gap fill)
const rows = [] // each row: intervals
function fits(row, a, b) {
return row.every((iv) => b < iv.start || a > iv.end)
}
function addInterval(row, a, b) {
let inserted = false
for (let i = 0; i < row.length; i++) {
if (b < row[i].start) {
row.splice(i, 0, { start: a, end: b })
inserted = true
break
}
}
if (!inserted) row.push({ start: a, end: b })
}
evs.forEach((ev) => {
let placed = false
for (let r = 0; r < rows.length; r++) {
if (fits(rows[r], ev.startIdx, ev.endIdx)) {
addInterval(rows[r], ev.startIdx, ev.endIdx)
ev.row = r + 1
placed = true
break
}
}
if (!placed) {
rows.push([{ start: ev.startIdx, end: ev.endIdx }])
ev.row = rows.length
}
ev.startIdxRel = ev.startIdx - s
ev.endIdxRel = ev.endIdx - s
})
return { startIdx: s, endIdx: e, events: evs, rowsCount: rows.length }
}) })
return segments return arr
})
function segmentStyle(seg) {
return { gridColumn: `${seg.startIdx + 1} / ${seg.endIdx + 2}` }
}
function segmentKey(seg) {
return seg.startIdx + '-' + seg.endIdx
}
function isSegmentCompressed(seg) {
return !!segmentCompression.value[segmentKey(seg)]
}
function recomputeCompression() {
const el = weekOverlayRef.value
if (!el) return
const available = el.clientHeight || 0
if (!available) return
const cs = getComputedStyle(el)
const fontSize = parseFloat(cs.fontSize) || 16
const baseRowPx = fontSize * 1.5 // desired row height (matches CSS 1.5em)
const marginTop = 0 // already applied outside height
const usable = Math.max(0, available - marginTop)
const nextMap = {}
for (const seg of eventSegments.value) {
const desired = (seg.rowsCount || 1) * baseRowPx
nextMap[segmentKey(seg)] = desired > usable
}
segmentCompression.value = nextMap
}
watch(eventSegments, () => nextTick(() => recomputeCompression()))
onMounted(() => {
nextTick(() => recomputeCompression())
window.addEventListener('resize', recomputeCompression)
})
onBeforeUnmount(() => {
window.removeEventListener('resize', recomputeCompression)
}) })
function handleEventClick(span) { function handleEventClick(span) {
if (justDragged.value) return if (justDragged.value) return
emit('event-click', { id: span.id, n: span.n != null ? span.n : 0 }) // Emit composite payload: base id (without virtual marker), instance id, occurrence index (data-n)
const idStr = span.id
const hasVirtualMarker = typeof idStr === 'string' && idStr.includes('_v_')
const baseId = hasVirtualMarker ? idStr.slice(0, idStr.lastIndexOf('_v_')) : idStr
emit('event-click', {
id: baseId,
instanceId: span.id,
occurrenceIndex: span._recurrenceIndex != null ? span._recurrenceIndex : 0,
})
} }
function handleEventPointerDown(span, event) { function handleEventPointerDown(span, event) {
if (event.target.classList.contains('resize-handle')) return if (event.target.classList.contains('resize-handle')) return
event.stopPropagation() event.stopPropagation()
const baseId = span.id const idStr = span.id
const hasVirtualMarker = typeof idStr === 'string' && idStr.includes('_v_')
const baseId = hasVirtualMarker ? idStr.slice(0, idStr.lastIndexOf('_v_')) : idStr
const isVirtual = hasVirtualMarker
// Determine which day within the span was grabbed so we maintain relative position
let anchorDate = span.startDate let anchorDate = span.startDate
try { try {
const spanDays = daysInclusive(span.startDate, span.endDate) const spanDays = daysInclusive(span.startDate, span.endDate)
@ -195,11 +117,14 @@ function handleEventPointerDown(span, event) {
if (dayIndex >= spanDays) dayIndex = spanDays - 1 if (dayIndex >= spanDays) dayIndex = spanDays - 1
anchorDate = addDaysStr(span.startDate, dayIndex) anchorDate = addDaysStr(span.startDate, dayIndex)
} }
} catch (e) {} } catch (e) {
// Fallback to startDate if any calculation fails
}
startLocalDrag( startLocalDrag(
{ {
id: baseId, id: baseId,
originalId: span.id, originalId: span.id,
isVirtual,
mode: 'move', mode: 'move',
pointerStartX: event.clientX, pointerStartX: event.clientX,
pointerStartY: event.clientY, pointerStartY: event.clientY,
@ -213,11 +138,15 @@ function handleEventPointerDown(span, event) {
function handleResizePointerDown(span, mode, event) { function handleResizePointerDown(span, mode, event) {
event.stopPropagation() event.stopPropagation()
const baseId = span.id const idStr = span.id
const hasVirtualMarker = typeof idStr === 'string' && idStr.includes('_v_')
const baseId = hasVirtualMarker ? idStr.slice(0, idStr.lastIndexOf('_v_')) : idStr
const isVirtual = hasVirtualMarker
startLocalDrag( startLocalDrag(
{ {
id: baseId, id: baseId,
originalId: span.id, originalId: span.id,
isVirtual,
mode, mode,
pointerStartX: event.clientX, pointerStartX: event.clientX,
pointerStartY: event.clientY, pointerStartY: event.clientY,
@ -239,6 +168,7 @@ function startLocalDrag(init, evt) {
else anchorOffset = daysInclusive(init.startDate, init.anchorDate) - 1 else anchorOffset = daysInclusive(init.startDate, init.anchorDate) - 1
} }
// Capture original repeating pattern & weekday (for weekly repeats) so we can rotate relative to original
let originalWeekday = null let originalWeekday = null
let originalPattern = null let originalPattern = null
if (init.mode === 'move') { if (init.mode === 'move') {
@ -265,11 +195,13 @@ function startLocalDrag(init, evt) {
tentativeEnd: init.endDate, tentativeEnd: init.endDate,
originalWeekday, originalWeekday,
originalPattern, originalPattern,
realizedId: null, realizedId: null, // for virtual occurrence converted to real during drag
} }
// Begin compound history session (single snapshot after drag completes)
store.$history?.beginCompound() store.$history?.beginCompound()
// Capture pointer events globally
if (evt.currentTarget && evt.pointerId !== undefined) { if (evt.currentTarget && evt.pointerId !== undefined) {
try { try {
evt.currentTarget.setPointerCapture(evt.pointerId) evt.currentTarget.setPointerCapture(evt.pointerId)
@ -278,6 +210,7 @@ function startLocalDrag(init, evt) {
} }
} }
// Prevent default for mouse/pen to avoid text selection. For touch we skip so the user can still scroll.
if (!(evt.pointerType === 'touch')) { if (!(evt.pointerType === 'touch')) {
evt.preventDefault() evt.preventDefault()
} }
@ -289,15 +222,19 @@ function startLocalDrag(init, evt) {
// Determine date under pointer: traverse DOM to find day cell carrying data-date attribute // Determine date under pointer: traverse DOM to find day cell carrying data-date attribute
function getDateUnderPointer(x, y, el) { function getDateUnderPointer(x, y, el) {
for (let cur = el; cur; cur = cur.parentElement) let cur = el
if (cur.dataset?.date) return { date: cur.dataset.date } while (cur) {
const overlayEl = weekOverlayRef.value if (cur.dataset && cur.dataset.date) {
const container = overlayEl?.parentElement // .days-grid return { date: cur.dataset.date }
if (container) {
for (const d of container.querySelectorAll('[data-date]')) {
const { left, right, top, bottom } = d.getBoundingClientRect()
if (y >= top && y <= bottom && x >= left && x <= right) return { date: d.dataset.date }
} }
cur = cur.parentElement
}
// Fallback: elementFromPoint scan
const probe = document.elementFromPoint(x, y)
let p = probe
while (p) {
if (p.dataset && p.dataset.date) return { date: p.dataset.date }
p = p.parentElement
} }
return null return null
} }
@ -314,6 +251,7 @@ function onDragPointerMove(e) {
const hitEl = document.elementFromPoint(e.clientX, e.clientY) const hitEl = document.elementFromPoint(e.clientX, e.clientY)
const hit = getDateUnderPointer(e.clientX, e.clientY, hitEl) const hit = getDateUnderPointer(e.clientX, e.clientY, hitEl)
// If we can't find a date, don't update the range but keep the drag active
if (!hit || !hit.date) return if (!hit || !hit.date) return
const [ns, ne] = computeTentativeRangeFromPointer(st, hit.date) const [ns, ne] = computeTentativeRangeFromPointer(st, hit.date)
@ -323,22 +261,26 @@ function onDragPointerMove(e) {
st.tentativeStart = ns st.tentativeStart = ns
st.tentativeEnd = ne st.tentativeEnd = ne
if (st.mode === 'move') { if (st.mode === 'move') {
if (st.n && st.n > 0) { if (st.isVirtual) {
// On first movement convert virtual occurrence into a real new event (split series)
if (!st.realizedId) { if (!st.realizedId) {
const newId = store.splitMoveVirtualOccurrence(st.id, st.startDate, ns, ne) const newId = store.splitMoveVirtualOccurrence(st.id, st.startDate, ns, ne)
if (newId) { if (newId) {
st.realizedId = newId st.realizedId = newId
st.id = newId st.id = newId
// converted to standalone event st.isVirtual = false
} else { } else {
return return
} }
} else { } else {
// Subsequent moves: update range without rotating pattern automatically
store.setEventRange(st.id, ns, ne, { mode: 'move', rotatePattern: false }) store.setEventRange(st.id, ns, ne, { mode: 'move', rotatePattern: false })
} }
} else { } else {
// Normal non-virtual move; rotate handled in setEventRange
store.setEventRange(st.id, ns, ne, { mode: 'move', rotatePattern: false }) store.setEventRange(st.id, ns, ne, { mode: 'move', rotatePattern: false })
} }
// Manual rotation relative to original pattern (keeps pattern anchored to initially grabbed weekday)
if (st.originalPattern && st.originalWeekday != null) { if (st.originalPattern && st.originalWeekday != null) {
try { try {
const currentWeekday = new Date(ns + 'T00:00:00').getDay() const currentWeekday = new Date(ns + 'T00:00:00').getDay()
@ -351,9 +293,15 @@ function onDragPointerMove(e) {
} }
} catch {} } catch {}
} }
} else if (!(st.n && st.n > 0)) { } else if (!st.isVirtual) {
applyRangeDuringDrag({ id: st.id, mode: st.mode, startDate: ns, endDate: ne }, ns, ne) // Resizes on real events update immediately
} else if (st.n && st.n > 0 && (st.mode === 'resize-left' || st.mode === 'resize-right')) { applyRangeDuringDrag(
{ id: st.id, isVirtual: st.isVirtual, mode: st.mode, startDate: ns, endDate: ne },
ns,
ne,
)
} else if (st.isVirtual && (st.mode === 'resize-left' || st.mode === 'resize-right')) {
// For virtual occurrence resize: convert to real once, then adjust range
if (!st.realizedId) { if (!st.realizedId) {
const initialStart = ns const initialStart = ns
const initialEnd = ne const initialEnd = ne
@ -361,9 +309,10 @@ function onDragPointerMove(e) {
if (newId) { if (newId) {
st.realizedId = newId st.realizedId = newId
st.id = newId st.id = newId
// converted st.isVirtual = false
} else return } else return
} }
// Apply range change; rotate if left edge moved and weekday changed
const rotate = st.mode === 'resize-left' const rotate = st.mode === 'resize-left'
store.setEventRange(st.id, ns, ne, { mode: st.mode, rotatePattern: rotate }) store.setEventRange(st.id, ns, ne, { mode: st.mode, rotatePattern: rotate })
} }
@ -373,6 +322,7 @@ function onDragPointerUp(e) {
const st = dragState.value const st = dragState.value
if (!st) return if (!st) return
// Release pointer capture if it was set
if (e.target && e.pointerId !== undefined) { if (e.target && e.pointerId !== undefined) {
try { try {
e.target.releasePointerCapture(e.pointerId) e.target.releasePointerCapture(e.pointerId)
@ -392,10 +342,11 @@ function onDragPointerUp(e) {
if (moved) { if (moved) {
// Apply final mutation if virtual (we deferred) or if non-virtual no further change (rare) // Apply final mutation if virtual (we deferred) or if non-virtual no further change (rare)
if (st.n && st.n > 0) { if (st.isVirtual) {
applyRangeDuringDrag( applyRangeDuringDrag(
{ {
id: st.id, id: st.id,
isVirtual: st.isVirtual,
mode: st.mode, mode: st.mode,
startDate: finalStart, startDate: finalStart,
endDate: finalEnd, endDate: finalEnd,
@ -409,6 +360,7 @@ function onDragPointerUp(e) {
justDragged.value = false justDragged.value = false
}, 120) }, 120)
} }
// End compound session (snapshot if changed)
store.$history?.endCompound() store.$history?.endCompound()
} }
@ -437,7 +389,7 @@ function normalizeDateOrder(aStr, bStr) {
} }
function applyRangeDuringDrag(st, startDate, endDate) { function applyRangeDuringDrag(st, startDate, endDate) {
if (st.n && st.n > 0) { if (st.isVirtual) {
if (st.mode !== 'move') return // no resize for virtual occurrence if (st.mode !== 'move') return // no resize for virtual occurrence
// Split-move: occurrence being dragged treated as first of new series // Split-move: occurrence being dragged treated as first of new series
store.splitMoveVirtualOccurrence(st.id, st.startDate, startDate, endDate) store.splitMoveVirtualOccurrence(st.id, st.startDate, startDate, endDate)
@ -451,22 +403,16 @@ function applyRangeDuringDrag(st, startDate, endDate) {
.week-overlay { .week-overlay {
position: absolute; position: absolute;
inset: 0; inset: 0;
pointer-events: none;
z-index: 15;
display: grid; display: grid;
grid-template-columns: repeat(7, 1fr); /* Prevent content from expanding tracks beyond container width */
grid-template-columns: repeat(7, minmax(0, 1fr));
grid-auto-rows: minmax(0, 1.5em);
row-gap: 0.05em;
margin-top: 1.8em; margin-top: 1.8em;
pointer-events: none;
}
.segment-grid {
display: grid;
gap: 2px;
align-content: start; align-content: start;
pointer-events: none;
overflow: hidden;
grid-auto-columns: 1fr;
grid-auto-rows: 1.5em;
}
.segment-grid.compress {
grid-auto-rows: 1fr;
} }
.event-span { .event-span {
@ -484,8 +430,13 @@ function applyRangeDuringDrag(st, startDate, endDate) {
align-items: center; align-items: center;
position: relative; position: relative;
user-select: none; user-select: none;
height: 100%;
width: 100%;
max-width: 100%;
box-sizing: border-box;
z-index: 1; z-index: 1;
text-align: center; text-align: center;
min-width: 0;
} }
/* Inner title wrapper ensures proper ellipsis within flex/grid constraints */ /* Inner title wrapper ensures proper ellipsis within flex/grid constraints */

1
src/components/HeaderControls.vue
View File

@ -31,6 +31,7 @@
> >
⚙ ⚙
</button> </button>
<!-- Settings dialog now lives here -->
<SettingsDialog ref="settingsDialog" /> <SettingsDialog ref="settingsDialog" />
</div> </div>
</Transition> </Transition>

8
src/components/SettingsDialog.vue
View File

@ -175,9 +175,9 @@ defineExpose({ open })
<label class="ec-field"> <label class="ec-field">
<span>First day of week</span> <span>First day of week</span>
<select v-model.number="firstDay"> <select v-model.number="firstDay">
<option v-for="(name, idx) in weekdayNames" :key="idx" :value="idx"> <option v-for="(name, idx) in weekdayNames" :key="idx" :value="idx">
{{ name.charAt(0).toUpperCase() + name.slice(1) }} {{ name.charAt(0).toUpperCase() + name.slice(1) }}
</option> </option>
</select> </select>
</label> </label>
<div class="weekend-select ec-field"> <div class="weekend-select ec-field">
@ -275,7 +275,7 @@ select {
flex: 0 0 auto; flex: 0 0 auto;
min-width: 120px; min-width: 120px;
} }
/* WeekdaySelector display tweaks */
.footer-row { .footer-row {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;

2
src/components/WeekdaySelector.vue
View File

@ -16,7 +16,7 @@
@pointerenter="onDragOver(di)" @pointerenter="onDragOver(di)"
@pointerup="onPointerUp" @pointerup="onPointerUp"
> >
{{ d }} {{ d.slice(0, 3) }}
</button> </button>
<button <button
v-for="g in barGroups" v-for="g in barGroups"

209
src/plugins/virtualWeeks.js
View File

@ -1,5 +1,5 @@
import { ref } from 'vue' import { ref } from 'vue'
import { addDays, differenceInWeeks, isBefore, isAfter } from 'date-fns' import { addDays, differenceInWeeks } from 'date-fns'
import { import {
toLocalString, toLocalString,
fromLocalString, fromLocalString,
@ -11,8 +11,9 @@ import {
monthAbbr, monthAbbr,
lunarPhaseSymbol, lunarPhaseSymbol,
MAX_YEAR, MAX_YEAR,
getOccurrenceIndex,
getVirtualOccurrenceEndDate,
} from '@/utils/date' } from '@/utils/date'
import { buildDayEvents } from '@/utils/events'
import { getHolidayForDate } from '@/utils/holidays' import { getHolidayForDate } from '@/utils/holidays'
/** /**
@ -53,16 +54,77 @@ export function createVirtualWeekManager({
function createWeek(virtualWeek) { function createWeek(virtualWeek) {
const firstDay = getFirstDayForVirtualWeek(virtualWeek) const firstDay = getFirstDayForVirtualWeek(virtualWeek)
const thu = addDays(firstDay, (4 - firstDay.getDay() + 7) % 7) const isoAnchor = addDays(firstDay, (4 - firstDay.getDay() + 7) % 7)
const weekNumber = getISOWeek(thu) const weekNumber = getISOWeek(isoAnchor)
const days = [] const days = []
let cur = new Date(firstDay) let cur = new Date(firstDay)
let hasFirst = false let hasFirst = false
let monthToLabel = null let monthToLabel = null
let labelYear = null let labelYear = null
const repeatingBases = []
if (calendarStore.events) {
for (const ev of calendarStore.events.values()) {
if (ev.recur) repeatingBases.push(ev)
}
}
const collectEventsForDate = (dateStr, curDateObj) => {
const storedEvents = []
for (const ev of calendarStore.events.values()) {
if (!ev.recur) {
const evEnd = toLocalString(
addDays(fromLocalString(ev.startDate, DEFAULT_TZ), (ev.days || 1) - 1),
DEFAULT_TZ,
)
if (dateStr >= ev.startDate && dateStr <= evEnd) {
storedEvents.push({ ...ev, endDate: evEnd })
}
}
}
const dayEvents = [...storedEvents]
for (const base of repeatingBases) {
const baseEnd = toLocalString(
addDays(fromLocalString(base.startDate, DEFAULT_TZ), (base.days || 1) - 1),
DEFAULT_TZ,
)
if (dateStr >= base.startDate && dateStr <= baseEnd) {
dayEvents.push({ ...base, endDate: baseEnd, _recurrenceIndex: 0, _baseId: base.id })
continue
}
const spanDays = (base.days || 1) - 1
const currentDate = curDateObj
let occurrenceFound = false
for (let offset = 0; offset <= spanDays && !occurrenceFound; offset++) {
const candidateStart = addDays(currentDate, -offset)
const candidateStartStr = toLocalString(candidateStart, DEFAULT_TZ)
const occurrenceIndex = getOccurrenceIndex(base, candidateStartStr, DEFAULT_TZ)
if (occurrenceIndex !== null) {
const virtualEndDate = getVirtualOccurrenceEndDate(base, candidateStartStr, DEFAULT_TZ)
if (dateStr >= candidateStartStr && dateStr <= virtualEndDate) {
const virtualId = base.id + '_v_' + candidateStartStr
const alreadyExists = dayEvents.some((ev) => ev.id === virtualId)
if (!alreadyExists) {
dayEvents.push({
...base,
id: virtualId,
startDate: candidateStartStr,
endDate: virtualEndDate,
_recurrenceIndex: occurrenceIndex,
_baseId: base.id,
})
}
occurrenceFound = true
}
}
}
}
return dayEvents
}
for (let i = 0; i < 7; i++) { for (let i = 0; i < 7; i++) {
const dateStr = toLocalString(cur, DEFAULT_TZ) const dateStr = toLocalString(cur, DEFAULT_TZ)
const events = buildDayEvents(calendarStore.events.values(), dateStr, DEFAULT_TZ) const dayEvents = collectEventsForDate(dateStr, fromLocalString(dateStr, DEFAULT_TZ))
const dow = cur.getDay() const dow = cur.getDay()
const isFirst = cur.getDate() === 1 const isFirst = cur.getDate() === 1
if (isFirst) { if (isFirst) {
@ -71,11 +133,10 @@ export function createVirtualWeekManager({
labelYear = cur.getFullYear() labelYear = cur.getFullYear()
} }
let displayText = String(cur.getDate()) let displayText = String(cur.getDate())
if (isFirst) if (isFirst) {
displayText = if (cur.getMonth() === 0) displayText = cur.getFullYear()
cur.getMonth() === 0 else displayText = monthAbbr[cur.getMonth()].slice(0, 3).toUpperCase()
? cur.getFullYear() }
: monthAbbr[cur.getMonth()].slice(0, 3).toUpperCase()
let holiday = null let holiday = null
if (calendarStore.config.holidays.enabled) { if (calendarStore.config.holidays.enabled) {
calendarStore._ensureHolidaysInitialized?.() calendarStore._ensureHolidaysInitialized?.()
@ -92,12 +153,36 @@ export function createVirtualWeekManager({
lunarPhase: lunarPhaseSymbol(cur), lunarPhase: lunarPhaseSymbol(cur),
holiday, holiday,
isHoliday: holiday !== null, isHoliday: holiday !== null,
isSelected: isDateSelected(dateStr), isSelected:
events, selection.value.startDate &&
selection.value.dayCount > 0 &&
dateStr >= selection.value.startDate &&
dateStr <= addDaysStr(selection.value.startDate, selection.value.dayCount - 1),
events: dayEvents,
}) })
cur = addDays(cur, 1) cur = addDays(cur, 1)
} }
const monthLabel = buildMonthLabel({ hasFirst, monthToLabel, labelYear, cur, virtualWeek }) let monthLabel = null
if (hasFirst && monthToLabel !== null) {
if (labelYear && labelYear <= MAX_YEAR) {
let weeksSpan = 0
const d = addDays(cur, -1)
for (let i = 0; i < 6; i++) {
const probe = addDays(cur, -1 + i * 7)
d.setTime(probe.getTime())
if (d.getMonth() === monthToLabel) weeksSpan++
}
const remainingWeeks = Math.max(1, maxVirtualWeek.value - virtualWeek + 1)
weeksSpan = Math.max(1, Math.min(weeksSpan, remainingWeeks))
const year = String(labelYear).slice(-2)
monthLabel = {
text: `${getLocalizedMonthName(monthToLabel)} '${year}`,
month: monthToLabel,
weeksSpan,
monthClass: monthAbbr[monthToLabel],
}
}
}
return { return {
virtualWeek, virtualWeek,
weekNumber: pad(weekNumber), weekNumber: pad(weekNumber),
@ -107,36 +192,6 @@ export function createVirtualWeekManager({
} }
} }
function isDateSelected(dateStr) {
if (!selection.value.startDate || selection.value.dayCount <= 0) return false
const startDateObj = fromLocalString(selection.value.startDate, DEFAULT_TZ)
const endDateStr = addDaysStr(selection.value.startDate, selection.value.dayCount - 1)
const endDateObj = fromLocalString(endDateStr, DEFAULT_TZ)
const d = fromLocalString(dateStr, DEFAULT_TZ)
return !isBefore(d, startDateObj) && !isAfter(d, endDateObj)
}
function buildMonthLabel({ hasFirst, monthToLabel, labelYear, cur, virtualWeek }) {
if (!hasFirst || monthToLabel === null) return null
if (!labelYear || labelYear > MAX_YEAR) return null
let weeksSpan = 0
const d = addDays(cur, -1)
for (let i = 0; i < 6; i++) {
const probe = addDays(cur, -1 + i * 7)
d.setTime(probe.getTime())
if (d.getMonth() === monthToLabel) weeksSpan++
}
const remainingWeeks = Math.max(1, maxVirtualWeek.value - virtualWeek + 1)
weeksSpan = Math.max(1, Math.min(weeksSpan, remainingWeeks))
const year = String(labelYear).slice(-2)
return {
text: `${getLocalizedMonthName(monthToLabel)} '${year}`,
month: monthToLabel,
weeksSpan,
monthClass: monthAbbr[monthToLabel],
}
}
function internalWindowCalc() { function internalWindowCalc() {
const buffer = 6 const buffer = 6
const currentScrollTop = viewport.value?.scrollTop ?? scrollTopRef?.value ?? 0 const currentScrollTop = viewport.value?.scrollTop ?? scrollTopRef?.value ?? 0
@ -240,6 +295,10 @@ export function createVirtualWeekManager({
// Reflective update of only events inside currently visible weeks (keeps week objects stable) // Reflective update of only events inside currently visible weeks (keeps week objects stable)
function refreshEvents(reason = 'events-refresh') { function refreshEvents(reason = 'events-refresh') {
if (!visibleWeeks.value.length) return if (!visibleWeeks.value.length) return
const repeatingBases = []
if (calendarStore.events) {
for (const ev of calendarStore.events.values()) if (ev.recur) repeatingBases.push(ev)
}
const selStart = selection.value.startDate const selStart = selection.value.startDate
const selCount = selection.value.dayCount const selCount = selection.value.dayCount
const selEnd = selStart && selCount > 0 ? addDaysStr(selStart, selCount - 1) : null const selEnd = selStart && selCount > 0 ? addDaysStr(selStart, selCount - 1) : null
@ -247,13 +306,63 @@ export function createVirtualWeekManager({
for (const day of week.days) { for (const day of week.days) {
const dateStr = day.date const dateStr = day.date
// Update selection flag // Update selection flag
if (selStart && selEnd) { if (selStart && selEnd) day.isSelected = dateStr >= selStart && dateStr <= selEnd
const d = fromLocalString(dateStr, DEFAULT_TZ), else day.isSelected = false
s = fromLocalString(selStart, DEFAULT_TZ), // Rebuild events list for this day
e = fromLocalString(selEnd, DEFAULT_TZ) const storedEvents = []
day.isSelected = !isBefore(d, s) && !isAfter(d, e) for (const ev of calendarStore.events.values()) {
} else day.isSelected = false if (!ev.recur) {
day.events = buildDayEvents(calendarStore.events.values(), dateStr, DEFAULT_TZ) const evEnd = toLocalString(
addDays(fromLocalString(ev.startDate, DEFAULT_TZ), (ev.days || 1) - 1),
DEFAULT_TZ,
)
if (dateStr >= ev.startDate && dateStr <= evEnd) {
storedEvents.push({ ...ev, endDate: evEnd })
}
}
}
const dayEvents = [...storedEvents]
for (const base of repeatingBases) {
const baseEndStr = toLocalString(
addDays(fromLocalString(base.startDate, DEFAULT_TZ), (base.days || 1) - 1),
DEFAULT_TZ,
)
if (dateStr >= base.startDate && dateStr <= baseEndStr) {
dayEvents.push({ ...base, endDate: baseEndStr, _recurrenceIndex: 0, _baseId: base.id })
continue
}
const spanDays = (base.days || 1) - 1
const currentDate = fromLocalString(dateStr, DEFAULT_TZ)
let occurrenceFound = false
for (let offset = 0; offset <= spanDays && !occurrenceFound; offset++) {
const candidateStart = addDays(currentDate, -offset)
const candidateStartStr = toLocalString(candidateStart, DEFAULT_TZ)
const occurrenceIndex = getOccurrenceIndex(base, candidateStartStr, DEFAULT_TZ)
if (occurrenceIndex !== null) {
const virtualEndDate = getVirtualOccurrenceEndDate(
base,
candidateStartStr,
DEFAULT_TZ,
)
if (dateStr >= candidateStartStr && dateStr <= virtualEndDate) {
const virtualId = base.id + '_v_' + candidateStartStr
const alreadyExists = dayEvents.some((ev) => ev.id === virtualId)
if (!alreadyExists) {
dayEvents.push({
...base,
id: virtualId,
startDate: candidateStartStr,
endDate: virtualEndDate,
_recurrenceIndex: occurrenceIndex,
_baseId: base.id,
})
}
occurrenceFound = true
}
}
}
}
day.events = dayEvents
} }
} }
if (process.env.NODE_ENV !== 'production') { if (process.env.NODE_ENV !== 'production') {

12
src/stores/CalendarStore.js
View File

@ -4,6 +4,7 @@ import {
fromLocalString, fromLocalString,
getLocaleWeekendDays, getLocaleWeekendDays,
getMondayOfISOWeek, getMondayOfISOWeek,
getOccurrenceDate,
DEFAULT_TZ, DEFAULT_TZ,
} from '@/utils/date' } from '@/utils/date'
import { differenceInCalendarDays, addDays } from 'date-fns' import { differenceInCalendarDays, addDays } from 'date-fns'
@ -200,6 +201,11 @@ export const useCalendarStore = defineStore('calendar', {
this.deleteEvent(baseId) this.deleteEvent(baseId)
return return
} }
const nextStartStr = getOccurrenceDate(base, 1, DEFAULT_TZ)
if (!nextStartStr) {
this.deleteEvent(baseId)
return
}
base.startDate = nextStartStr base.startDate = nextStartStr
// keep same days length // keep same days length
if (numericCount !== Infinity) base.recur.count = String(Math.max(1, numericCount - 1)) if (numericCount !== Infinity) base.recur.count = String(Math.max(1, numericCount - 1))
@ -222,11 +228,9 @@ export const useCalendarStore = defineStore('calendar', {
} }
const snapshot = { ...base } const snapshot = { ...base }
snapshot.recur = snapshot.recur ? { ...snapshot.recur } : null snapshot.recur = snapshot.recur ? { ...snapshot.recur } : null
if (base.recur.count === occurrenceIndex + 1) {
base.recur.count = occurrenceIndex
return
}
base.recur.count = occurrenceIndex base.recur.count = occurrenceIndex
const nextStartStr = getOccurrenceDate(snapshot, occurrenceIndex + 1, DEFAULT_TZ)
if (!nextStartStr) return
const originalNumeric = const originalNumeric =
snapshot.recur.count === 'unlimited' ? Infinity : parseInt(snapshot.recur.count, 10) snapshot.recur.count === 'unlimited' ? Infinity : parseInt(snapshot.recur.count, 10)
let remainingCount = 'unlimited' let remainingCount = 'unlimited'

169
src/utils/date.js
View File

@ -23,7 +23,7 @@ const monthAbbr = [
'nov', 'nov',
'dec', 'dec',
] ]
const MIN_YEAR = 1000 const MIN_YEAR = 100 // less than 100 is interpreted as 19xx
const MAX_YEAR = 9999 const MAX_YEAR = 9999
// Core helpers ------------------------------------------------------------ // Core helpers ------------------------------------------------------------
@ -70,7 +70,169 @@ function getMondayOfISOWeek(date, timeZone = DEFAULT_TZ) {
const mondayIndex = (d) => (dateFns.getDay(d) + 6) % 7 const mondayIndex = (d) => (dateFns.getDay(d) + 6) % 7
// (Recurrence utilities moved to events.js) // Count how many days in [startDate..endDate] match the boolean `pattern` array
function countPatternDaysInInterval(startDate, endDate, patternArr) {
const days = dateFns.eachDayOfInterval({
start: dateFns.startOfDay(startDate),
end: dateFns.startOfDay(endDate),
})
return days.reduce((c, d) => c + (patternArr[dateFns.getDay(d)] ? 1 : 0), 0)
}
// Recurrence: Weekly ------------------------------------------------------
function _getRecur(event) {
return event?.recur ?? null
}
function getWeeklyOccurrenceIndex(event, dateStr, timeZone = DEFAULT_TZ) {
const recur = _getRecur(event)
if (!recur || recur.freq !== 'weeks') return null
const pattern = recur.weekdays || []
if (!pattern.some(Boolean)) return null
const target = fromLocalString(dateStr, timeZone)
const baseStart = fromLocalString(event.startDate, timeZone)
if (target < baseStart) return null
const dow = dateFns.getDay(target)
if (!pattern[dow]) return null // target not active
const interval = recur.interval || 1
const baseBlockStart = getMondayOfISOWeek(baseStart, timeZone)
const currentBlockStart = getMondayOfISOWeek(target, timeZone)
// Number of weeks between block starts (each block start is a Monday)
const weekDiff = dateFns.differenceInCalendarWeeks(currentBlockStart, baseBlockStart)
if (weekDiff < 0 || weekDiff % interval !== 0) return null
const baseDow = dateFns.getDay(baseStart)
const baseCountsAsPattern = !!pattern[baseDow]
// Same ISO week as base: count pattern days from baseStart up to target (inclusive)
if (weekDiff === 0) {
let n = countPatternDaysInInterval(baseStart, target, pattern) - 1
if (!baseCountsAsPattern) n += 1
const maxCount = recur.count === 'unlimited' ? Infinity : parseInt(recur.count, 10)
return n < 0 || n >= maxCount ? null : n
}
const baseWeekEnd = dateFns.addDays(baseBlockStart, 6)
// Count pattern days in the first (possibly partial) week from baseStart..baseWeekEnd
const firstWeekCount = countPatternDaysInInterval(baseStart, baseWeekEnd, pattern)
const alignedWeeksBetween = weekDiff / interval - 1
const fullPatternWeekCount = pattern.filter(Boolean).length
const middleWeeksCount = alignedWeeksBetween > 0 ? alignedWeeksBetween * fullPatternWeekCount : 0
// Count pattern days in the current (possibly partial) week from currentBlockStart..target
const currentWeekCount = countPatternDaysInInterval(currentBlockStart, target, pattern)
let n = firstWeekCount + middleWeeksCount + currentWeekCount - 1
if (!baseCountsAsPattern) n += 1
const maxCount = recur.count === 'unlimited' ? Infinity : parseInt(recur.count, 10)
return n >= maxCount ? null : n
}
// Recurrence: Monthly -----------------------------------------------------
function getMonthlyOccurrenceIndex(event, dateStr, timeZone = DEFAULT_TZ) {
const recur = _getRecur(event)
if (!recur || recur.freq !== 'months') return null
const baseStart = fromLocalString(event.startDate, timeZone)
const d = fromLocalString(dateStr, timeZone)
const diffMonths = dateFns.differenceInCalendarMonths(d, baseStart)
if (diffMonths < 0) return null
const interval = recur.interval || 1
if (diffMonths % interval !== 0) return null
const baseDay = dateFns.getDate(baseStart)
const effectiveDay = Math.min(baseDay, dateFns.getDaysInMonth(d))
if (dateFns.getDate(d) !== effectiveDay) return null
const n = diffMonths / interval
const maxCount = recur.count === 'unlimited' ? Infinity : parseInt(recur.count, 10)
return n >= maxCount ? null : n
}
function getOccurrenceIndex(event, dateStr, timeZone = DEFAULT_TZ) {
const recur = _getRecur(event)
if (!recur) return null
if (dateStr < event.startDate) return null
if (recur.freq === 'weeks') return getWeeklyOccurrenceIndex(event, dateStr, timeZone)
if (recur.freq === 'months') return getMonthlyOccurrenceIndex(event, dateStr, timeZone)
return null
}
// Reverse lookup: given a recurrence index (0-based) return the occurrence start date string.
// Returns null if the index is out of range or the event is not repeating.
function getWeeklyOccurrenceDate(event, occurrenceIndex, timeZone = DEFAULT_TZ) {
const recur = _getRecur(event)
if (!recur || recur.freq !== 'weeks') return null
if (occurrenceIndex < 0 || !Number.isInteger(occurrenceIndex)) return null
const maxCount = recur.count === 'unlimited' ? Infinity : parseInt(recur.count, 10)
if (occurrenceIndex >= maxCount) return null
const pattern = recur.weekdays || []
if (!pattern.some(Boolean)) return null
const interval = recur.interval || 1
const baseStart = fromLocalString(event.startDate, timeZone)
if (occurrenceIndex === 0) return toLocalString(baseStart, timeZone)
const baseWeekMonday = getMondayOfISOWeek(baseStart, timeZone)
const baseDow = dateFns.getDay(baseStart)
const baseCountsAsPattern = !!pattern[baseDow]
// Adjust index if base weekday is not part of the pattern (pattern occurrences shift by +1)
let occ = occurrenceIndex
if (!baseCountsAsPattern) occ -= 1
if (occ < 0) return null
// Sorted list of active weekday indices
const patternDays = []
for (let d = 0; d < 7; d++) if (pattern[d]) patternDays.push(d)
// First (possibly partial) week: only pattern days >= baseDow and >= baseStart date
const firstWeekDates = []
for (const d of patternDays) {
if (d < baseDow) continue
const date = dateFns.addDays(baseWeekMonday, d)
if (date < baseStart) continue
firstWeekDates.push(date)
}
const F = firstWeekDates.length
if (occ < F) {
return toLocalString(firstWeekDates[occ], timeZone)
}
const remaining = occ - F
const P = patternDays.length
if (P === 0) return null
// Determine aligned week group (k >= 1) in which the remaining-th occurrence lies
const k = Math.floor(remaining / P) + 1 // 1-based aligned week count after base week
const indexInWeek = remaining % P
const dow = patternDays[indexInWeek]
const occurrenceDate = dateFns.addDays(baseWeekMonday, k * interval * 7 + dow)
return toLocalString(occurrenceDate, timeZone)
}
function getMonthlyOccurrenceDate(event, occurrenceIndex, timeZone = DEFAULT_TZ) {
const recur = _getRecur(event)
if (!recur || recur.freq !== 'months') return null
if (occurrenceIndex < 0 || !Number.isInteger(occurrenceIndex)) return null
const maxCount = recur.count === 'unlimited' ? Infinity : parseInt(recur.count, 10)
if (occurrenceIndex >= maxCount) return null
const interval = recur.interval || 1
const baseStart = fromLocalString(event.startDate, timeZone)
const targetMonthOffset = occurrenceIndex * interval
const monthDate = dateFns.addMonths(baseStart, targetMonthOffset)
// Adjust day for shorter months (clamp like forward logic)
const baseDay = dateFns.getDate(baseStart)
const daysInTargetMonth = dateFns.getDaysInMonth(monthDate)
const day = Math.min(baseDay, daysInTargetMonth)
const actual = makeTZDate(dateFns.getYear(monthDate), dateFns.getMonth(monthDate), day, timeZone)
return toLocalString(actual, timeZone)
}
function getOccurrenceDate(event, occurrenceIndex, timeZone = DEFAULT_TZ) {
const recur = _getRecur(event)
if (!recur) return null
if (recur.freq === 'weeks') return getWeeklyOccurrenceDate(event, occurrenceIndex, timeZone)
if (recur.freq === 'months') return getMonthlyOccurrenceDate(event, occurrenceIndex, timeZone)
return null
}
function getVirtualOccurrenceEndDate(event, occurrenceStartDate, timeZone = DEFAULT_TZ) {
const spanDays = Math.max(0, (event.days || 1) - 1)
const occurrenceStart = fromLocalString(occurrenceStartDate, timeZone)
return toLocalString(dateFns.addDays(occurrenceStart, spanDays), timeZone)
}
// Utility formatting & localization --------------------------------------- // Utility formatting & localization ---------------------------------------
const pad = (n) => String(n).padStart(2, '0') const pad = (n) => String(n).padStart(2, '0')
@ -204,6 +366,9 @@ export {
// recurrence // recurrence
getMondayOfISOWeek, getMondayOfISOWeek,
mondayIndex, mondayIndex,
getOccurrenceIndex,
getOccurrenceDate,
getVirtualOccurrenceEndDate,
// formatting & localization // formatting & localization
pad, pad,
daysInclusive, daysInclusive,

171
src/utils/events.js
View File

@ -1,171 +0,0 @@
import * as dateFns from 'date-fns'
import { fromLocalString, toLocalString, getMondayOfISOWeek, makeTZDate, DEFAULT_TZ } from './date'
import { addDays, isBefore, isAfter, differenceInCalendarDays } from 'date-fns'
function countPatternDaysInInterval(startDate, endDate, patternArr) {
const days = dateFns.eachDayOfInterval({
start: dateFns.startOfDay(startDate),
end: dateFns.startOfDay(endDate),
})
return days.reduce((c, d) => c + (patternArr[dateFns.getDay(d)] ? 1 : 0), 0)
}
export function getNWeekly(event, dateStr, timeZone = DEFAULT_TZ) {
const { recur } = event
if (!recur || recur.freq !== 'weeks') return null
const pattern = recur.weekdays || []
if (!pattern.some(Boolean)) return null
const target = fromLocalString(dateStr, timeZone)
const baseStart = fromLocalString(event.startDate, timeZone)
if (dateFns.isBefore(target, baseStart)) return null
const dow = dateFns.getDay(target)
if (!pattern[dow]) return null
const interval = recur.interval || 1
const baseBlockStart = getMondayOfISOWeek(baseStart, timeZone)
const currentBlockStart = getMondayOfISOWeek(target, timeZone)
const weekDiff = dateFns.differenceInCalendarWeeks(currentBlockStart, baseBlockStart)
if (weekDiff < 0 || weekDiff % interval !== 0) return null
const baseDow = dateFns.getDay(baseStart)
const baseCountsAsPattern = !!pattern[baseDow]
if (weekDiff === 0) {
let n = countPatternDaysInInterval(baseStart, target, pattern) - 1
if (!baseCountsAsPattern) n += 1
const maxCount = recur.count === 'unlimited' ? Infinity : parseInt(recur.count, 10)
return n < 0 || n >= maxCount ? null : n
}
const baseWeekEnd = dateFns.addDays(baseBlockStart, 6)
const firstWeekCount = countPatternDaysInInterval(baseStart, baseWeekEnd, pattern)
const alignedWeeksBetween = weekDiff / interval - 1
const fullPatternWeekCount = pattern.filter(Boolean).length
const middleWeeksCount = alignedWeeksBetween > 0 ? alignedWeeksBetween * fullPatternWeekCount : 0
const currentWeekCount = countPatternDaysInInterval(currentBlockStart, target, pattern)
let n = firstWeekCount + middleWeeksCount + currentWeekCount - 1
if (!baseCountsAsPattern) n += 1
const maxCount = recur.count === 'unlimited' ? Infinity : parseInt(recur.count, 10)
return n >= maxCount ? null : n
}
function getNMonthly(event, dateStr, timeZone = DEFAULT_TZ) {
const { recur } = event
if (!recur || recur.freq !== 'months') return null
const baseStart = fromLocalString(event.startDate, timeZone)
const d = fromLocalString(dateStr, timeZone)
const diffMonths = dateFns.differenceInCalendarMonths(d, baseStart)
if (diffMonths < 0) return null
const interval = recur.interval || 1
if (diffMonths % interval !== 0) return null
const baseDay = dateFns.getDate(baseStart)
const effectiveDay = Math.min(baseDay, dateFns.getDaysInMonth(d))
if (dateFns.getDate(d) !== effectiveDay) return null
const n = diffMonths / interval
const maxCount = recur.count === 'unlimited' ? Infinity : parseInt(recur.count, 10)
return n >= maxCount ? null : n
}
function getN(event, dateStr, timeZone = DEFAULT_TZ) {
const { recur } = event
if (!recur) return null
const targetDate = fromLocalString(dateStr, timeZone)
const eventStartDate = fromLocalString(event.startDate, timeZone)
if (dateFns.isBefore(targetDate, eventStartDate)) return null
if (recur.freq === 'weeks') return getNWeekly(event, dateStr, timeZone)
if (recur.freq === 'months') return getNMonthly(event, dateStr, timeZone)
return null
}
// Reverse lookup: occurrence index -> start date string
function getDateWeekly(event, n, timeZone = DEFAULT_TZ) {
const { recur } = event
if (!recur || recur.freq !== 'weeks') return null
if (n < 0 || !Number.isInteger(n)) return null
const maxCount = recur.count === 'unlimited' ? Infinity : parseInt(recur.count, 10)
if (n >= maxCount) return null
const pattern = recur.weekdays || []
if (!pattern.some(Boolean)) return null
const interval = recur.interval || 1
const baseStart = fromLocalString(event.startDate, timeZone)
if (n === 0) return toLocalString(baseStart, timeZone)
const baseWeekMonday = getMondayOfISOWeek(baseStart, timeZone)
const baseDow = dateFns.getDay(baseStart)
const baseCountsAsPattern = !!pattern[baseDow]
let occ = n
if (!baseCountsAsPattern) occ -= 1
if (occ < 0) return null
const patternDays = []
for (let d = 0; d < 7; d++) if (pattern[d]) patternDays.push(d)
const firstWeekDates = []
for (const d of patternDays) {
if (d < baseDow) continue
const date = dateFns.addDays(baseWeekMonday, d)
if (date < baseStart) continue
firstWeekDates.push(date)
}
const F = firstWeekDates.length
if (occ < F) return toLocalString(firstWeekDates[occ], timeZone)
const remaining = occ - F
const P = patternDays.length
if (P === 0) return null
const k = Math.floor(remaining / P) + 1
const indexInWeek = remaining % P
const dow = patternDays[indexInWeek]
const occurrenceDate = dateFns.addDays(baseWeekMonday, k * interval * 7 + dow)
return toLocalString(occurrenceDate, timeZone)
}
function getDateMonthly(event, n, timeZone = DEFAULT_TZ) {
const { recur } = event
if (!recur || recur.freq !== 'months') return null
if (n < 0 || !Number.isInteger(n)) return null
const maxCount = recur.count === 'unlimited' ? Infinity : parseInt(recur.count, 10)
if (n >= maxCount) return null
const interval = recur.interval || 1
const baseStart = fromLocalString(event.startDate, timeZone)
const targetMonthOffset = n * interval
const monthDate = dateFns.addMonths(baseStart, targetMonthOffset)
const baseDay = dateFns.getDate(baseStart)
const daysInTargetMonth = dateFns.getDaysInMonth(monthDate)
const day = Math.min(baseDay, daysInTargetMonth)
const actual = makeTZDate(dateFns.getYear(monthDate), dateFns.getMonth(monthDate), day, timeZone)
return toLocalString(actual, timeZone)
}
export function getDate(event, n, timeZone = DEFAULT_TZ) {
const { recur } = event
if (!recur) return null
if (recur.freq === 'weeks') return getDateWeekly(event, n, timeZone)
if (recur.freq === 'months') return getDateMonthly(event, n, timeZone)
return null
}
export function buildDayEvents(events, dateStr, timeZone = DEFAULT_TZ) {
const date = fromLocalString(dateStr, timeZone)
const out = []
for (const ev of events) {
const spanDays = ev.days || 1
if (!ev.recur) {
const baseStart = fromLocalString(ev.startDate, timeZone)
const baseEnd = addDays(baseStart, spanDays - 1)
if (!isBefore(date, baseStart) && !isAfter(date, baseEnd)) {
const diffDays = differenceInCalendarDays(date, baseStart)
out.push({ ...ev, n: 0, nDay: diffDays })
}
continue
}
// Recurring: gather all events whose start for any recurrence lies within spanDays window
const maxBack = Math.min(spanDays - 1, spanScanCap(spanDays))
for (let back = 0; back <= maxBack; back++) {
const candidateStart = addDays(date, -back)
const candidateStartStr = toLocalString(candidateStart, timeZone)
const n = getN(ev, candidateStartStr, timeZone)
if (n === null) continue
if (back >= spanDays) continue
out.push({ ...ev, n, nDay: back })
}
}
return out
}
function spanScanCap(spanDays) {
if (spanDays <= 31) return spanDays - 1
return Math.min(spanDays - 1, 90)
}