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

Refactor and implement locale-dependent start of week.

Browse Source
This commit is contained in:
Leo Vasanko 2025-08-22 16:18:11 -06:00
parent 86d38a5a29
commit a3df97ff50
8 changed files with 280 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/App.vue
View File

@ -1,9 +1,36 @@
<script setup>
import { ref } from 'vue'
import CalendarView from './components/CalendarView.vue'
import EventDialog from './components/EventDialog.vue'
const eventDialog = ref(null)
const handleCreateEvent = (eventData) => {
if (eventDialog.value) {
const selectionData = {
startDate: eventData.startDate,
dayCount: eventData.dayCount,
}
setTimeout(() => eventDialog.value.openCreateDialog(selectionData), 50)
}
}
const handleEditEvent = (eventInstanceId) => {
if (eventDialog.value) {
eventDialog.value.openEditDialog(eventInstanceId)
}
}
const handleClearSelection = () => {}
</script>
<template>
<CalendarView />
<CalendarView @create-event="handleCreateEvent" @edit-event="handleEditEvent" />
<EventDialog
ref="eventDialog"
:selection="{ startDate: null, dayCount: 0 }"
@clear-selection="handleClearSelection"
/>
</template>
<style scoped></style>

57
src/components/CalendarGrid.vue
View File

@ -8,7 +8,12 @@
</div>
<div class="calendar-viewport" ref="viewportEl" @scroll="handleScroll">
<div class="calendar-content" :style="{ height: `${totalVirtualWeeks * rowHeight}px` }">
<WeekRow v.for="week in visibleWeeks" :key="week.virtualWeek" :week="week" :style="{ top: `${(week.virtualWeek - minVirtualWeek) * rowHeight}px` }" />
<WeekRow
v.for="week in visibleWeeks"
:key="week.virtualWeek"
:week="week"
:style="{ top: `${(week.virtualWeek - minVirtualWeek) * rowHeight}px` }"
/>
</div>
</div>
</template>
@ -16,7 +21,15 @@
<script setup>
import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
import { useCalendarStore } from '@/stores/CalendarStore'
import { getLocalizedWeekdayNames, isoWeekInfo, fromLocalString, toLocalString, mondayIndex } from '@/utils/date'
import {
getLocalizedWeekdayNames,
getLocaleWeekendDays,
getLocaleFirstDay,
isoWeekInfo,
fromLocalString,
toLocalString,
mondayIndex,
} from '@/utils/date'
import WeekRow from './WeekRow.vue'
const calendarStore = useCalendarStore()
@ -29,10 +42,10 @@ const visibleWeeks = ref([])
const config = {
min_year: 1900,
max_year: 2100,
weekend: [true, false, false, false, false, false, true] // Sun, Mon, ..., Sat
weekend: getLocaleWeekendDays(),
}
const baseDate = new Date(2024, 0, 1) // 2024 begins with Monday
const baseDate = new Date(1970, 0, 4 + getLocaleFirstDay())
const WEEK_MS = 7 * 86400000
const weekdayNames = getLocalizedWeekdayNames()
@ -84,13 +97,16 @@ const updateVisibleWeeks = () => {
const endIdx = Math.ceil((scrollTop + viewportH + buffer * rowHeight.value) / rowHeight.value)
const startVW = Math.max(minVirtualWeek.value, startIdx + minVirtualWeek.value)
const endVW = Math.min(totalVirtualWeeks.value + minVirtualWeek.value - 1, endIdx + minVirtualWeek.value)
const endVW = Math.min(
totalVirtualWeeks.value + minVirtualWeek.value - 1,
endIdx + minVirtualWeek.value,
)
const newVisibleWeeks = []
for (let vw = startVW; vw <= endVW; vw++) {
newVisibleWeeks.push({
virtualWeek: vw,
monday: getMondayForVirtualWeek(vw)
monday: getMondayForVirtualWeek(vw),
})
}
visibleWeeks.value = newVisibleWeeks
@ -102,26 +118,26 @@ const handleScroll = () => {
const handleWheel = (e) => {
const currentYear = calendarStore.viewYear
const delta = Math.round(e.deltaY * (1/3))
const delta = Math.round(e.deltaY * (1 / 3))
if (!delta) return
const newYear = Math.max(config.min_year, Math.min(config.max_year, currentYear + delta))
if (newYear === currentYear) return
const topDisplayIndex = Math.floor(viewportEl.value.scrollTop / rowHeight.value)
const currentWeekIndex = topDisplayIndex + minVirtualWeek.value
navigateToYear(newYear, currentWeekIndex)
}
const navigateToYear = (targetYear, weekIndex) => {
const monday = getMondayForVirtualWeek(weekIndex)
const { week } = isoWeekInfo(monday)
const jan4 = new Date(targetYear, 0, 4)
const jan4Monday = new Date(jan4)
jan4Monday.setDate(jan4.getDate() - mondayIndex(jan4))
const targetMonday = new Date(jan4Monday)
targetMonday.setDate(jan4Monday.getDate() + (week - 1) * 7)
scrollToTarget(targetMonday)
const monday = getMondayForVirtualWeek(weekIndex)
const { week } = isoWeekInfo(monday)
const jan4 = new Date(targetYear, 0, 4)
const jan4Monday = new Date(jan4)
jan4Monday.setDate(jan4.getDate() - mondayIndex(jan4))
const targetMonday = new Date(jan4Monday)
targetMonday.setDate(jan4Monday.getDate() + (week - 1) * 7)
scrollToTarget(targetMonday)
}
const scrollToTarget = (target) => {
@ -131,7 +147,7 @@ const scrollToTarget = (target) => {
} else {
targetWeekIndex = target
}
const targetScrollTop = (targetWeekIndex - minVirtualWeek.value) * rowHeight.value
viewportEl.value.scrollTop = targetScrollTop
updateVisibleWeeks()
@ -146,7 +162,7 @@ const goToTodayHandler = () => {
onMounted(() => {
rowHeight.value = computeRowHeight()
const minYearDate = new Date(config.min_year, 0, 1)
const maxYearLastDay = new Date(config.max_year, 11, 31)
const lastWeekMonday = new Date(maxYearLastDay)
@ -158,12 +174,11 @@ onMounted(() => {
const initialDate = fromLocalString(calendarStore.today)
scrollToTarget(initialDate)
document.addEventListener('goToToday', goToTodayHandler)
})
onBeforeUnmount(() => {
document.removeEventListener('goToToday', goToTodayHandler)
})
</script>

34
src/components/CalendarHeader.vue
View File

@ -1,12 +1,12 @@
<script setup>
import { computed } from 'vue'
import { useCalendarStore } from '@/stores/CalendarStore'
import { getLocalizedWeekdayNames, isoWeekInfo, mondayIndex } from '@/utils/date'
import { getLocalizedWeekdayNames, reorderByFirstDay, isoWeekInfo } from '@/utils/date'
const props = defineProps({
scrollTop: { type: Number, default: 0 },
rowHeight: { type: Number, default: 64 },
minVirtualWeek: { type: Number, default: 0 }
minVirtualWeek: { type: Number, default: 0 },
})
const calendarStore = useCalendarStore()
@ -14,17 +14,22 @@ const calendarStore = useCalendarStore()
const yearLabel = computed(() => {
const topDisplayIndex = Math.floor(props.scrollTop / props.rowHeight)
const topVW = topDisplayIndex + props.minVirtualWeek
const baseDate = new Date(2024, 0, 1) // Monday
const monday = new Date(baseDate)
monday.setDate(monday.getDate() + topVW * 7)
return isoWeekInfo(monday).year
const baseDate = new Date(1970, 0, 4 + calendarStore.config.first_day)
const firstDay = new Date(baseDate)
firstDay.setDate(firstDay.getDate() + topVW * 7)
return isoWeekInfo(firstDay).year
})
const weekdayNames = computed(() => {
const names = getLocalizedWeekdayNames()
return names.map((name, i) => ({
// Get Monday-first names, then reorder by first day, then add weekend info
const mondayFirstNames = getLocalizedWeekdayNames()
const sundayFirstNames = [mondayFirstNames[6], ...mondayFirstNames.slice(0, 6)]
const reorderedNames = reorderByFirstDay(sundayFirstNames, calendarStore.config.first_day)
const reorderedWeekend = reorderByFirstDay(calendarStore.weekend, calendarStore.config.first_day)
return reorderedNames.map((name, i) => ({
name,
isWeekend: calendarStore.weekend[(i + 1) % 7]
isWeekend: reorderedWeekend[i],
}))
})
</script>
@ -32,7 +37,14 @@ const weekdayNames = computed(() => {
<template>
<div class="calendar-header">
<div class="year-label">{{ yearLabel }}</div>
<div v-for="day in weekdayNames" :key="day.name" class="dow" :class="{ weekend: day.isWeekend }">{{ day.name }}</div>
<div
v-for="day in weekdayNames"
:key="day.name"
class="dow"
:class="{ weekend: day.isWeekend }"
>
{{ day.name }}
</div>
<div class="overlay-header-spacer"></div>
</div>
</template>
@ -70,6 +82,6 @@ const weekdayNames = computed(() => {
font-weight: 500;
}
.overlay-header-spacer {
/* Empty spacer for the month label column */
grid-area: auto;
}
</style>

183
src/components/CalendarView.vue
View File

@ -4,22 +4,39 @@ import { useCalendarStore } from '@/stores/CalendarStore'
import CalendarHeader from '@/components/CalendarHeader.vue'
import CalendarWeek from '@/components/CalendarWeek.vue'
import Jogwheel from '@/components/Jogwheel.vue'
import EventDialog from '@/components/EventDialog.vue'
import { isoWeekInfo, getLocalizedMonthName, monthAbbr, lunarPhaseSymbol, pad, mondayIndex, daysInclusive, addDaysStr, formatDateRange } from '@/utils/date'
import {
isoWeekInfo,
getLocalizedMonthName,
monthAbbr,
lunarPhaseSymbol,
pad,
daysInclusive,
addDaysStr,
formatDateRange,
} from '@/utils/date'
import { toLocalString, fromLocalString } from '@/utils/date'
const calendarStore = useCalendarStore()
const viewport = ref(null)
const eventDialog = ref(null)
// UI state moved from store
const emit = defineEmits(['create-event', 'edit-event'])
function createEventFromSelection() {
if (!selection.value.startDate || selection.value.dayCount === 0) return null
return {
startDate: selection.value.startDate,
dayCount: selection.value.dayCount,
endDate: addDaysStr(selection.value.startDate, selection.value.dayCount - 1),
}
}
const scrollTop = ref(0)
const viewportHeight = ref(600)
const rowHeight = ref(64)
const baseDate = new Date(2024, 0, 1) // Monday
const baseDate = new Date(1970, 0, 4 + calendarStore.config.first_day)
// Selection state moved from store
const selection = ref({ start: null, end: null })
const selection = ref({ startDate: null, dayCount: 0 })
const isDragging = ref(false)
const dragAnchor = ref(null)
@ -27,16 +44,18 @@ const WEEK_MS = 7 * 24 * 60 * 60 * 1000
const minVirtualWeek = computed(() => {
const date = new Date(calendarStore.minYear, 0, 1)
const monday = new Date(date)
monday.setDate(date.getDate() - ((date.getDay() + 6) % 7))
return Math.floor((monday - baseDate) / WEEK_MS)
const firstDayOfWeek = new Date(date)
const dayOffset = (date.getDay() - calendarStore.config.first_day + 7) % 7
firstDayOfWeek.setDate(date.getDate() - dayOffset)
return Math.floor((firstDayOfWeek - baseDate) / WEEK_MS)
})
const maxVirtualWeek = computed(() => {
const date = new Date(calendarStore.maxYear, 11, 31)
const monday = new Date(date)
monday.setDate(date.getDate() - ((date.getDay() + 6) % 7))
return Math.floor((monday - baseDate) / WEEK_MS)
const firstDayOfWeek = new Date(date)
const dayOffset = (date.getDay() - calendarStore.config.first_day + 7) % 7
firstDayOfWeek.setDate(date.getDate() - dayOffset)
return Math.floor((firstDayOfWeek - baseDate) / WEEK_MS)
})
const totalVirtualWeeks = computed(() => {
@ -50,18 +69,25 @@ const initialScrollTop = computed(() => {
const selectedDateRange = computed(() => {
if (!selection.value.start || !selection.value.end) return ''
return formatDateRange(fromLocalString(selection.value.start), fromLocalString(selection.value.end))
return formatDateRange(
fromLocalString(selection.value.start),
fromLocalString(selection.value.end),
)
})
const todayString = computed(() => {
const t = calendarStore.now.toLocaleDateString(undefined, { weekday: 'long', month: 'long', day: 'numeric'}).replace(/,? /, "\n")
const t = calendarStore.now
.toLocaleDateString(undefined, { weekday: 'long', month: 'long', day: 'numeric' })
.replace(/,? /, '\n')
return t.charAt(0).toUpperCase() + t.slice(1)
})
const visibleWeeks = computed(() => {
const buffer = 10
const startIdx = Math.floor((scrollTop.value - buffer * rowHeight.value) / rowHeight.value)
const endIdx = Math.ceil((scrollTop.value + viewportHeight.value + buffer * rowHeight.value) / rowHeight.value)
const endIdx = Math.ceil(
(scrollTop.value + viewportHeight.value + buffer * rowHeight.value) / rowHeight.value,
)
const startVW = Math.max(minVirtualWeek.value, startIdx + minVirtualWeek.value)
const endVW = Math.min(maxVirtualWeek.value, endIdx + minVirtualWeek.value)
@ -77,7 +103,6 @@ const contentHeight = computed(() => {
return totalVirtualWeeks.value * rowHeight.value
})
// Functions moved from store
function computeRowHeight() {
const el = document.createElement('div')
el.style.position = 'absolute'
@ -91,22 +116,23 @@ function computeRowHeight() {
}
function getWeekIndex(date) {
const monday = new Date(date)
monday.setDate(date.getDate() - mondayIndex(date))
return Math.floor((monday - baseDate) / WEEK_MS)
const firstDayOfWeek = new Date(date)
const dayOffset = (date.getDay() - calendarStore.config.first_day + 7) % 7
firstDayOfWeek.setDate(date.getDate() - dayOffset)
return Math.floor((firstDayOfWeek - baseDate) / WEEK_MS)
}
function getMondayForVirtualWeek(virtualWeek) {
const monday = new Date(baseDate)
monday.setDate(monday.getDate() + virtualWeek * 7)
return monday
function getFirstDayForVirtualWeek(virtualWeek) {
const firstDay = new Date(baseDate)
firstDay.setDate(firstDay.getDate() + virtualWeek * 7)
return firstDay
}
function createWeek(virtualWeek) {
const monday = getMondayForVirtualWeek(virtualWeek)
const weekNumber = isoWeekInfo(monday).week
const firstDay = getFirstDayForVirtualWeek(virtualWeek)
const weekNumber = isoWeekInfo(firstDay).week
const days = []
const cur = new Date(monday)
const cur = new Date(firstDay)
let hasFirst = false
let monthToLabel = null
let labelYear = null
@ -116,7 +142,7 @@ function createWeek(virtualWeek) {
const eventsForDay = calendarStore.events.get(dateStr) || []
const dow = cur.getDay()
const isFirst = cur.getDate() === 1
if (isFirst) {
hasFirst = true
monthToLabel = cur.getMonth()
@ -128,7 +154,7 @@ function createWeek(virtualWeek) {
if (cur.getMonth() === 0) {
displayText = cur.getFullYear()
} else {
displayText = monthAbbr[cur.getMonth()].slice(0,3).toUpperCase()
displayText = monthAbbr[cur.getMonth()].slice(0, 3).toUpperCase()
}
}
@ -141,8 +167,12 @@ function createWeek(virtualWeek) {
isWeekend: calendarStore.weekend[dow],
isFirstDay: isFirst,
lunarPhase: lunarPhaseSymbol(cur),
isSelected: selection.value.start && selection.value.end && dateStr >= selection.value.start && dateStr <= selection.value.end,
events: eventsForDay
isSelected:
selection.value.startDate &&
selection.value.dayCount > 0 &&
dateStr >= selection.value.startDate &&
dateStr <= addDaysStr(selection.value.startDate, selection.value.dayCount - 1),
events: eventsForDay,
})
cur.setDate(cur.getDate() + 1)
}
@ -150,11 +180,10 @@ function createWeek(virtualWeek) {
let monthLabel = null
if (hasFirst && monthToLabel !== null) {
if (labelYear && labelYear <= calendarStore.config.max_year) {
// Calculate how many weeks this month spans
let weeksSpan = 0
const d = new Date(cur)
d.setDate(cur.getDate() - 1) // Go back to last day of the week we just processed
d.setDate(cur.getDate() - 1)
for (let i = 0; i < 6; i++) {
d.setDate(cur.getDate() - 1 + i * 7)
if (d.getMonth() === monthToLabel) weeksSpan++
@ -168,7 +197,7 @@ function createWeek(virtualWeek) {
text: `${getLocalizedMonthName(monthToLabel)} '${year}`,
month: monthToLabel,
weeksSpan: weeksSpan,
height: weeksSpan * rowHeight.value
height: weeksSpan * rowHeight.value,
}
}
}
@ -178,7 +207,7 @@ function createWeek(virtualWeek) {
weekNumber: pad(weekNumber),
days,
monthLabel,
top: (virtualWeek - minVirtualWeek.value) * rowHeight.value
top: (virtualWeek - minVirtualWeek.value) * rowHeight.value,
}
}
@ -193,39 +222,47 @@ function goToToday() {
}
function clearSelection() {
selection.value = { start: null, end: null }
selection.value = { startDate: null, dayCount: 0 }
}
function startDrag(dateStr) {
if (calendarStore.config.select_days === 0) return
isDragging.value = true
dragAnchor.value = dateStr
selection.value = { start: dateStr, end: dateStr }
selection.value = { startDate: dateStr, dayCount: 1 }
}
function updateDrag(dateStr) {
if (!isDragging.value) return
const [start, end] = clampRange(dragAnchor.value, dateStr)
selection.value = { start, end }
const { startDate, dayCount } = calculateSelection(dragAnchor.value, dateStr)
selection.value = { startDate, dayCount }
}
function endDrag(dateStr) {
if (!isDragging.value) return
isDragging.value = false
const [start, end] = clampRange(dragAnchor.value, dateStr)
selection.value = { start, end }
const { startDate, dayCount } = calculateSelection(dragAnchor.value, dateStr)
selection.value = { startDate, dayCount }
}
function clampRange(anchorStr, otherStr) {
function calculateSelection(anchorStr, otherStr) {
const limit = calendarStore.config.select_days
const forward = fromLocalString(otherStr) >= fromLocalString(anchorStr)
const anchorDate = fromLocalString(anchorStr)
const otherDate = fromLocalString(otherStr)
const forward = otherDate >= anchorDate
const span = daysInclusive(anchorStr, otherStr)
if (span <= limit) {
const a = [anchorStr, otherStr].sort()
return [a[0], a[1]]
const startDate = forward ? anchorStr : otherStr
return { startDate, dayCount: span }
}
if (forward) {
return { startDate: anchorStr, dayCount: limit }
} else {
const startDate = addDaysStr(anchorStr, -(limit - 1))
return { startDate, dayCount: limit }
}
if (forward) return [anchorStr, addDaysStr(anchorStr, limit - 1)]
return [addDaysStr(anchorStr, -(limit - 1)), anchorStr]
}
const onScroll = () => {
@ -241,20 +278,18 @@ const handleJogwheelScrollTo = (newScrollTop) => {
}
onMounted(() => {
// Compute row height and initialize
computeRowHeight()
calendarStore.updateCurrentDate()
if (viewport.value) {
viewportHeight.value = viewport.value.clientHeight
viewport.value.scrollTop = initialScrollTop.value
viewport.value.addEventListener('scroll', onScroll)
}
// Update time periodically
const timer = setInterval(() => {
calendarStore.updateCurrentDate()
}, 60000) // Update every minute
}, 60000)
onBeforeUnmount(() => {
clearInterval(timer)
@ -280,14 +315,14 @@ const handleDayMouseEnter = (dateStr) => {
const handleDayMouseUp = (dateStr) => {
if (isDragging.value) {
endDrag(dateStr)
// Show event dialog if we have a selection
if (selection.value.start && selection.value.end && eventDialog.value) {
setTimeout(() => eventDialog.value.openCreateDialog(), 50)
const eventData = createEventFromSelection()
if (eventData) {
clearSelection()
emit('create-event', eventData)
}
}
}
// Touch event handlers
const handleDayTouchStart = (dateStr) => {
startDrag(dateStr)
}
@ -301,17 +336,16 @@ const handleDayTouchMove = (dateStr) => {
const handleDayTouchEnd = (dateStr) => {
if (isDragging.value) {
endDrag(dateStr)
// Show event dialog if we have a selection
if (selection.value.start && selection.value.end && eventDialog.value) {
setTimeout(() => eventDialog.value.openCreateDialog(), 50)
const eventData = createEventFromSelection()
if (eventData) {
clearSelection()
emit('create-event', eventData)
}
}
}
const handleEventClick = (eventInstanceId) => {
if (eventDialog.value) {
eventDialog.value.openEditDialog(eventInstanceId)
}
emit('edit-event', eventInstanceId)
}
</script>
@ -323,14 +357,14 @@ const handleEventClick = (eventInstanceId) => {
<div class="today-date" @click="goToToday">{{ todayString }}</div>
</div>
</header>
<CalendarHeader
:scroll-top="scrollTop"
:row-height="rowHeight"
:min-virtual-week="minVirtualWeek"
<CalendarHeader
:scroll-top="scrollTop"
:row-height="rowHeight"
:min-virtual-week="minVirtualWeek"
/>
<div class="calendar-container">
<div class="calendar-viewport" ref="viewport">
<div class="calendar-content" :style="{ height: contentHeight + 'px' }">
<div class="calendar-content" :style="{ height: contentHeight + 'px' }">
<CalendarWeek
v-for="week in visibleWeeks"
:key="week.virtualWeek"
@ -350,9 +384,9 @@ const handleEventClick = (eventInstanceId) => {
:key="`month-${week.virtualWeek}`"
v-show="week.monthLabel"
class="month-name-label"
:style="{
:style="{
top: week.top + 'px',
height: week.monthLabel?.height + 'px'
height: week.monthLabel?.height + 'px',
}"
>
<span>{{ week.monthLabel?.text }}</span>
@ -360,19 +394,14 @@ const handleEventClick = (eventInstanceId) => {
</div>
</div>
<!-- Jogwheel as sibling to calendar-viewport -->
<Jogwheel
<Jogwheel
:total-virtual-weeks="totalVirtualWeeks"
:row-height="rowHeight"
:viewport-height="viewportHeight"
:scroll-top="scrollTop"
@scroll-to="handleJogwheelScrollTo"
@scroll-to="handleJogwheelScrollTo"
/>
</div>
<EventDialog
ref="eventDialog"
:selection="selection"
@clear-selection="clearSelection"
/>
</div>
</template>

38
src/components/EventDialog.vue
View File

@ -3,9 +3,10 @@ import { useCalendarStore } from '@/stores/CalendarStore'
import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
import WeekdaySelector from './WeekdaySelector.vue'
import Numeric from './Numeric.vue'
import { addDaysStr } from '@/utils/date'
const props = defineProps({
selection: { type: Object, default: () => ({ start: null, end: null }) },
selection: { type: Object, default: () => ({ startDate: null, dayCount: 0 }) },
})
const emit = defineEmits(['clear-selection'])
@ -27,9 +28,10 @@ const eventSaved = ref(false)
const titleInput = ref(null)
// Helper to get starting weekday (Sunday-first index)
function getStartingWeekday() {
if (!props.selection.start) return 0 // Default to Sunday
const date = new Date(props.selection.start + 'T00:00:00')
function getStartingWeekday(selectionData = null) {
const currentSelection = selectionData || props.selection
if (!currentSelection.start) return 0 // Default to Sunday
const date = new Date(currentSelection.start + 'T00:00:00')
const dayOfWeek = date.getDay() // 0=Sunday, 1=Monday, ...
return dayOfWeek // Keep Sunday-first (0=Sunday, 6=Saturday)
}
@ -91,7 +93,23 @@ const selectedColor = computed({
},
})
function openCreateDialog() {
function openCreateDialog(selectionData = null) {
const currentSelection = selectionData || props.selection
// Convert new format to start/end for compatibility with existing logic
let start, end
if (currentSelection.startDate && currentSelection.dayCount) {
start = currentSelection.startDate
end = addDaysStr(currentSelection.startDate, currentSelection.dayCount - 1)
} else if (currentSelection.start && currentSelection.end) {
// Fallback for old format
start = currentSelection.start
end = currentSelection.end
} else {
start = null
end = null
}
occurrenceContext.value = null
dialogMode.value = 'create'
title.value = ''
@ -100,18 +118,16 @@ function openCreateDialog() {
recurrenceFrequency.value = 'weeks'
recurrenceWeekdays.value = [false, false, false, false, false, false, false]
recurrenceOccurrences.value = 0
colorId.value = calendarStore.selectEventColorId(props.selection.start, props.selection.end)
colorId.value = calendarStore.selectEventColorId(start, end)
eventSaved.value = false
// Auto-select starting day for weekly recurrence
const startingDay = getStartingWeekday()
const startingDay = getStartingWeekday({ start, end })
recurrenceWeekdays.value[startingDay] = true
// Create the event immediately in the store
editingEventId.value = calendarStore.createEvent({
title: '',
startDate: props.selection.start,
endDate: props.selection.end,
startDate: start,
endDate: end,
colorId: colorId.value,
repeat: repeat.value,
repeatInterval: recurrenceInterval.value,

23
src/components/WeekdaySelector.vue
View File

@ -34,7 +34,12 @@
<script setup>
import { computed, ref } from 'vue'
import { getLocalizedWeekdayNames } from '@/utils/date'
import {
getLocalizedWeekdayNames,
getLocaleFirstDay,
getLocaleWeekendDays,
reorderByFirstDay,
} from '@/utils/date'
const model = defineModel({
type: Array,
@ -56,21 +61,19 @@ if (!model.value) model.value = [...props.fallback]
const labelsMondayFirst = getLocalizedWeekdayNames()
const labels = [labelsMondayFirst[6], ...labelsMondayFirst.slice(0, 6)]
const anySelected = computed(() => model.value.some(Boolean))
const localeFirst = new Intl.Locale(navigator.language).weekInfo.firstDay % 7
const localeWeekend = new Intl.Locale(navigator.language).weekInfo.weekend
const localeFirst = getLocaleFirstDay()
const localeWeekend = getLocaleWeekendDays()
const firstDay = computed(() => (props.firstDay ?? localeFirst) % 7)
const weekendDays = computed(() => {
if (props.weekend && props.weekend.length === 7) return props.weekend
const dayidx = new Set(localeWeekend)
return Array.from({ length: 7 }, (_, i) => dayidx.has(i || 7))
return localeWeekend
})
const reorder = (days) => Array.from({ length: 7 }, (_, i) => days[(i + firstDay.value) % 7])
const displayLabels = computed(() => reorder(labels))
const displayValuesCommitted = computed(() => reorder(model.value))
const displayWorking = computed(() => reorder(weekendDays.value))
const displayDefault = computed(() => reorder(props.fallback))
const displayLabels = computed(() => reorderByFirstDay(labels, firstDay.value))
const displayValuesCommitted = computed(() => reorderByFirstDay(model.value, firstDay.value))
const displayWorking = computed(() => reorderByFirstDay(weekendDays.value, firstDay.value))
const displayDefault = computed(() => reorderByFirstDay(props.fallback, firstDay.value))
// Mapping from display index to original model index
const orderIndices = computed(() => Array.from({ length: 7 }, (_, i) => (i + firstDay.value) % 7))

10
src/stores/CalendarStore.js
View File

@ -1,5 +1,10 @@
import { defineStore } from 'pinia'
import { toLocalString, fromLocalString } from '@/utils/date'
import {
toLocalString,
fromLocalString,
getLocaleFirstDay,
getLocaleWeekendDays,
} from '@/utils/date'
const MIN_YEAR = 1900
const MAX_YEAR = 2100
@ -9,11 +14,12 @@ export const useCalendarStore = defineStore('calendar', {
today: toLocalString(new Date()),
now: new Date(),
events: new Map(), // Map of date strings to arrays of events
weekend: [true, false, false, false, false, false, true], // Sunday to Saturday
weekend: getLocaleWeekendDays(),
config: {
select_days: 1000,
min_year: MIN_YEAR,
max_year: MAX_YEAR,
first_day: getLocaleFirstDay(),
},
}),

39
src/utils/date.js
View File

@ -106,6 +106,42 @@ function getLocalizedWeekdayNames() {
return res
}
/**
* Get the locale's first day of the week (0=Sunday, 1=Monday, etc.)
* @returns {number} First day of the week (0-6)
*/
function getLocaleFirstDay() {
try {
return new Intl.Locale(navigator.language).weekInfo.firstDay % 7
} catch {
return 1 // Default to Monday if locale info not available
}
}
/**
* Get the locale's weekend days as an array of booleans (Sunday=index 0)
* @returns {Array<boolean>} Array where true indicates a weekend day
*/
function getLocaleWeekendDays() {
try {
const localeWeekend = new Intl.Locale(navigator.language).weekInfo.weekend
const dayidx = new Set(localeWeekend)
return Array.from({ length: 7 }, (_, i) => dayidx.has(i || 7))
} catch {
return [true, false, false, false, false, false, true] // Default to Saturday/Sunday weekend
}
}
/**
* Reorder a 7-element array based on the first day of the week
* @param {Array} days - Array of 7 elements (Sunday=index 0)
* @param {number} firstDay - First day of the week (0=Sunday, 1=Monday, etc.)
* @returns {Array} Reordered array
*/
function reorderByFirstDay(days, firstDay) {
return Array.from({ length: 7 }, (_, i) => days[(i + firstDay) % 7])
}
/**
* Get localized month name
* @param {number} idx - Month index (0-11)
@ -176,6 +212,9 @@ export {
daysInclusive,
addDaysStr,
getLocalizedWeekdayNames,
getLocaleFirstDay,
getLocaleWeekendDays,
reorderByFirstDay,
getLocalizedMonthName,
formatDateRange,
lunarPhaseSymbol,