Default to Monday starting the week ignoring locale.

Refactor and implement locale-dependent start of week.
2025-08-22 16:30:26 -06:00 · 2025-08-22 16:18:11 -06:00
8 changed files with 319 additions and 134 deletions
--- a/src/App.vue
+++ b/src/App.vue
@ -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>
--- a/src/components/CalendarGrid.vue
+++ b/src/components/CalendarGrid.vue
@ -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>
--- a/src/components/CalendarHeader.vue
+++ b/src/components/CalendarHeader.vue
@ -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="{ workday: !day.isWeekend, weekend: day.isWeekend }"
+    >
+      {{ day.name }}
+    </div>
    <div class="overlay-header-spacer"></div>
  </div>
 </template>
@ -62,14 +74,19 @@ const weekdayNames = computed(() => {
  font-size: 1.2em;
  padding: 0.5rem;
 }
-
 .dow {
  text-transform: uppercase;
  text-align: center;
  padding: 0.5rem;
  font-weight: 500;
 }
+.dow.weekend {
+  color: var(--weekend);
+}
+.dow.workday {
+  color: var(--workday);
+}
 .overlay-header-spacer {
-  /* Empty spacer for the month label column */
+  grid-area: auto;
 }
 </style>
--- a/src/components/CalendarView.vue
+++ b/src/components/CalendarView.vue
@ -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>

--- a/src/components/EventDialog.vue
+++ b/src/components/EventDialog.vue
@ -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,
--- a/src/components/WeekdaySelector.vue
+++ b/src/components/WeekdaySelector.vue
@ -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))
--- a/src/stores/CalendarStore.js
+++ b/src/stores/CalendarStore.js
@ -1,19 +1,58 @@
 import { defineStore } from 'pinia'
-import { toLocalString, fromLocalString } from '@/utils/date'
+import {
+  toLocalString,
+  fromLocalString,
+  getLocaleFirstDay,
+  getLocaleWeekendDays,
+} from '@/utils/date'
+
+/**
+ * Calendar configuration can be overridden via window.calendarConfig:
+ * 
+ * window.calendarConfig = {
+ *   firstDay: 0,           // 0=Sunday, 1=Monday, etc. (default: 1)
+ *   firstDay: 'auto',      // Use locale detection
+ *   weekendDays: [true, false, false, false, false, false, true], // Custom weekend
+ *   weekendDays: 'auto'    // Use locale detection (default)
+ * }
+ */

 const MIN_YEAR = 1900
 const MAX_YEAR = 2100

+// Helper function to determine first day with config override support
+function getConfiguredFirstDay() {
+  // Check for environment variable or global config
+  const configOverride = window?.calendarConfig?.firstDay
+  if (configOverride !== undefined) {
+    return configOverride === 'auto' ? getLocaleFirstDay() : Number(configOverride)
+  }
+  // Default to Monday (1) instead of locale
+  return 1
+}
+
+// Helper function to determine weekend days with config override support  
+function getConfiguredWeekendDays() {
+  // Check for environment variable or global config
+  const configOverride = window?.calendarConfig?.weekendDays
+  if (configOverride !== undefined) {
+    return configOverride === 'auto' ? getLocaleWeekendDays() : configOverride
+  }
+  // Default to locale-based weekend days
+  return getLocaleWeekendDays()
+}
+
 export const useCalendarStore = defineStore('calendar', {
  state: () => ({
    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: getConfiguredWeekendDays(),
    config: {
      select_days: 1000,
      min_year: MIN_YEAR,
      max_year: MAX_YEAR,
+      first_day: getConfiguredFirstDay(),
    },
  }),

--- a/src/utils/date.js
+++ b/src/utils/date.js
@ -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,
Author	SHA1	Message	Date
Leo Vasanko	43db5e75c5	Default to Monday starting the week ignoring locale.	2025-08-22 16:30:26 -06:00
Leo Vasanko	a3df97ff50	Refactor and implement locale-dependent start of week.	2025-08-22 16:18:11 -06:00