Localized weekday names, change arrays to begin with Sunday.

This commit is contained in:
Leo Vasanko 2025-08-26 11:28:28 -06:00
parent 090e564bb0
commit d8b4639ecd
4 changed files with 24 additions and 13 deletions

View File

@ -78,8 +78,7 @@ function changeYear(y) {
const weekdayNames = computed(() => { const weekdayNames = computed(() => {
// Reorder names & weekend flags // Reorder names & weekend flags
const mondayFirstNames = getLocalizedWeekdayNames() const sundayFirstNames = getLocalizedWeekdayNames()
const sundayFirstNames = [mondayFirstNames[6], ...mondayFirstNames.slice(0, 6)]
const reorderedNames = reorderByFirstDay(sundayFirstNames, calendarStore.config.first_day) const reorderedNames = reorderByFirstDay(sundayFirstNames, calendarStore.config.first_day)
const reorderedWeekend = reorderByFirstDay(calendarStore.weekend, calendarStore.config.first_day) const reorderedWeekend = reorderByFirstDay(calendarStore.weekend, calendarStore.config.first_day)

View File

@ -3,10 +3,14 @@ import { ref, computed } from 'vue'
import BaseDialog from './BaseDialog.vue' import BaseDialog from './BaseDialog.vue'
import { useCalendarStore } from '@/stores/CalendarStore' import { useCalendarStore } from '@/stores/CalendarStore'
import WeekdaySelector from './WeekdaySelector.vue' import WeekdaySelector from './WeekdaySelector.vue'
import { getLocalizedWeekdayNamesLong } from '@/utils/date'
const show = ref(false) const show = ref(false)
const calendarStore = useCalendarStore() const calendarStore = useCalendarStore()
// Localized weekday names (now Sunday-first from util) for select 0=Sunday ..6=Saturday
const weekdayNames = getLocalizedWeekdayNamesLong()
// Reactive bindings to store // Reactive bindings to store
const firstDay = computed({ const firstDay = computed({
get: () => calendarStore.config.first_day, get: () => calendarStore.config.first_day,
@ -171,13 +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 :value="0">Sunday</option> <option v-for="(name, idx) in weekdayNames" :key="idx" :value="idx">
<option :value="1">Monday</option> {{ name.charAt(0).toUpperCase() + name.slice(1) }}
<option :value="2">Tuesday</option> </option>
<option :value="3">Wednesday</option>
<option :value="4">Thursday</option>
<option :value="5">Friday</option>
<option :value="6">Saturday</option>
</select> </select>
</label> </label>
<div class="weekend-select ec-field"> <div class="weekend-select ec-field">

View File

@ -60,8 +60,8 @@ const props = defineProps({
// Initialize internal from external if it has any true; else keep empty (fallback handled on emit) // Initialize internal from external if it has any true; else keep empty (fallback handled on emit)
if (model.value?.some?.(Boolean)) internal.value = [...model.value] if (model.value?.some?.(Boolean)) internal.value = [...model.value]
const labelsMondayFirst = getLocalizedWeekdayNames() // getLocalizedWeekdayNames now returns Sunday-first already
const labels = [labelsMondayFirst[6], ...labelsMondayFirst.slice(0, 6)] const labels = getLocalizedWeekdayNames()
const anySelected = computed(() => internal.value.some(Boolean)) const anySelected = computed(() => internal.value.some(Boolean))
const localeFirst = getLocaleFirstDay() const localeFirst = getLocaleFirstDay()
const localeWeekend = getLocaleWeekendDays() const localeWeekend = getLocaleWeekendDays()

View File

@ -249,11 +249,22 @@ function addDaysStr(str, n, timeZone = DEFAULT_TZ) {
return toLocalString(dateFns.addDays(fromLocalString(str, timeZone), n), timeZone) return toLocalString(dateFns.addDays(fromLocalString(str, timeZone), n), timeZone)
} }
// Weekday name helpers now return Sunday-first ordering (index 0 = Sunday ... 6 = Saturday)
function getLocalizedWeekdayNames(timeZone = DEFAULT_TZ) { function getLocalizedWeekdayNames(timeZone = DEFAULT_TZ) {
const monday = makeTZDate(2025, 0, 6, timeZone) // a Monday const sunday = makeTZDate(2025, 0, 5, timeZone) // a Sunday
return Array.from({ length: 7 }, (_, i) => return Array.from({ length: 7 }, (_, i) =>
new Intl.DateTimeFormat(undefined, { weekday: 'short', timeZone }).format( new Intl.DateTimeFormat(undefined, { weekday: 'short', timeZone }).format(
dateFns.addDays(monday, i), dateFns.addDays(sunday, i),
),
)
}
// Long (wide) localized weekday names, Sunday-first ordering
function getLocalizedWeekdayNamesLong(timeZone = DEFAULT_TZ) {
const sunday = makeTZDate(2025, 0, 5, timeZone)
return Array.from({ length: 7 }, (_, i) =>
new Intl.DateTimeFormat(undefined, { weekday: 'long', timeZone }).format(
dateFns.addDays(sunday, i),
), ),
) )
} }
@ -363,6 +374,7 @@ export {
daysInclusive, daysInclusive,
addDaysStr, addDaysStr,
getLocalizedWeekdayNames, getLocalizedWeekdayNames,
getLocalizedWeekdayNamesLong,
getLocaleFirstDay, getLocaleFirstDay,
getLocaleWeekendDays, getLocaleWeekendDays,
reorderByFirstDay, reorderByFirstDay,