Display national holidays on the calendar.

src/components/CalendarDay.vue

@@ -20,6 +20,7 @@ const handleEventClick = (eventId) => {
         weekend: props.day.isWeekend,
         firstday: props.day.isFirstDay,
         selected: props.day.isSelected,
+        holiday: props.day.isHoliday,
       },
     ]"
     :data-date="props.day.date"
@@ -27,6 +28,13 @@ const handleEventClick = (eventId) => {
     <h1>{{ props.day.displayText }}</h1>
     <span v-if="props.day.lunarPhase" class="lunar-phase">{{ props.day.lunarPhase }}</span>
 
+    <!-- Holiday indicator -->
+    <div v-if="props.day.holiday" class="holiday-info">
+      <span class="holiday-name" :title="props.day.holiday.name">
+        {{ props.day.holiday.name }}
+      </span>
+    </div>
+
     <!-- Simple event display for now -->
     <div v-if="props.day.events && props.day.events.length > 0" class="day-events">
       <div
@@ -104,4 +112,61 @@ const handleEventClick = (eventId) => {
   font-size: 0.8em;
   opacity: 0.7;
 }
+
+.cell.holiday {
+  background-color: var(--holiday-bg, rgba(255, 215, 0, 0.1));
+  border-color: var(--holiday-border, rgba(255, 215, 0, 0.3));
+}
+
+.cell.holiday h1 {
+  color: var(--holiday-text, #8b4513);
+  font-weight: bold;
+}
+
+.holiday-info {
+  position: absolute;
+  bottom: 0.1em;
+  left: 0.1em;
+  right: 0.1em;
+  font-size: 0.7em;
+  line-height: 1;
+  max-height: 2.4em;
+  overflow: hidden;
+}
+
+.holiday-name {
+  display: block;
+  background: var(--holiday-label-bg, rgba(255, 215, 0, 0.8));
+  color: var(--holiday-label-text, #5d4037);
+  padding: 0.1em 0.2em;
+  border-radius: 0.2em;
+  font-weight: 600;
+  font-size: 0.85em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.day-events {
+  position: absolute;
+  top: 1.5em;
+  right: 0.1em;
+  display: flex;
+  flex-direction: column;
+  gap: 0.1em;
+}
+
+.event-dot {
+  width: 0.6em;
+  height: 0.6em;
+  border-radius: 50%;
+  cursor: pointer;
+  opacity: 0.8;
+  transition: opacity 0.2s ease;
+}
+
+.event-dot:hover {
+  opacity: 1;
+}
 </style>

src/components/CalendarView.vue

@@ -146,7 +146,6 @@ function createWeek(virtualWeek) {
   let monthToLabel = null
   let labelYear = null
 
-  // Collect repeating base events once
   const repeatingBases = []
   if (calendarStore.events) {
     for (const ev of calendarStore.events.values()) {
@@ -238,6 +237,9 @@ function createWeek(virtualWeek) {
       }
     }
 
+    // Get holiday info once per day
+    const holiday = calendarStore.getHolidayForDate(dateStr)
+
     days.push({
       date: dateStr,
       dayOfMonth: cur.getDate(),
@@ -247,6 +249,8 @@ function createWeek(virtualWeek) {
       isWeekend: calendarStore.weekend[dow],
       isFirstDay: isFirst,
       lunarPhase: lunarPhaseSymbol(cur),
+      holiday: holiday,
+      isHoliday: holiday !== null,
       isSelected:
         selection.value.startDate &&
         selection.value.dayCount > 0 &&

src/components/SettingsDialog.vue

@@ -17,6 +17,118 @@ const weekend = computed({
   set: (v) => (calendarStore.weekend = [...v]),
 })
 
+// Holiday settings - simplified
+const holidayMode = computed({
+  get: () => {
+    if (!calendarStore.config.holidays.enabled) {
+      return 'none'
+    }
+    return calendarStore.config.holidays.country || 'auto'
+  },
+  set: (v) => {
+    if (v === 'none') {
+      calendarStore.config.holidays.enabled = false
+      calendarStore.config.holidays.country = null
+      calendarStore.config.holidays.state = null
+    } else if (v === 'auto') {
+      const detectedCountry = getDetectedCountryCode()
+      if (detectedCountry) {
+        calendarStore.config.holidays.enabled = true
+        calendarStore.config.holidays.country = 'auto'
+        calendarStore.config.holidays.state = null
+        calendarStore.initializeHolidays('auto', null, null)
+      } else {
+        calendarStore.config.holidays.enabled = false
+        calendarStore.config.holidays.country = null
+        calendarStore.config.holidays.state = null
+      }
+    } else {
+      calendarStore.config.holidays.enabled = true
+      calendarStore.config.holidays.country = v
+      calendarStore.config.holidays.state = null
+      calendarStore.initializeHolidays(v, null, null)
+    }
+  },
+})
+
+const holidayState = computed({
+  get: () => calendarStore.config.holidays.state,
+  set: (v) => {
+    calendarStore.config.holidays.state = v
+    const country =
+      calendarStore.config.holidays.country === 'auto'
+        ? 'auto'
+        : calendarStore.config.holidays.country
+    calendarStore.initializeHolidays(country, v, calendarStore.config.holidays.region)
+  },
+})
+
+// Get detected country code
+function getDetectedCountryCode() {
+  const locale = navigator.language || navigator.languages?.[0]
+  if (!locale) return null
+
+  const parts = locale.split('-')
+  if (parts.length < 2) return null
+
+  return parts[parts.length - 1].toUpperCase()
+} // Get display name for any country code
+function getCountryDisplayName(countryCode) {
+  if (!countryCode || countryCode.length !== 2) {
+    return countryCode
+  }
+  try {
+    const regionNames = new Intl.DisplayNames([navigator.language || 'en'], { type: 'region' })
+    return regionNames.of(countryCode) || countryCode
+  } catch {
+    return countryCode
+  }
+}
+
+// Get display name for auto option
+const autoDisplayName = computed(() => {
+  const detectedCode = getDetectedCountryCode()
+  if (!detectedCode) return 'Auto'
+  return getCountryDisplayName(detectedCode)
+})
+
+// Get state/province name from state code
+function getStateName(stateCode, countryCode) {
+  return stateCode
+}
+
+// Get available countries and states
+const availableCountries = computed(() => {
+  try {
+    const countries = calendarStore.getAvailableCountries()
+    const countryArray = Array.isArray(countries) ? countries : ['US', 'GB', 'DE', 'FR', 'CA', 'AU']
+
+    return countryArray.sort((a, b) => {
+      const nameA = getCountryDisplayName(a)
+      const nameB = getCountryDisplayName(b)
+      return nameA.localeCompare(nameB, navigator.language || 'en')
+    })
+  } catch (error) {
+    console.warn('Failed to get available countries:', error)
+    return ['US', 'GB', 'DE', 'FR', 'CA', 'AU']
+  }
+})
+const availableStates = computed(() => {
+  try {
+    if (holidayMode.value === 'none') return []
+    let country = holidayMode.value
+    if (holidayMode.value === 'auto') {
+      country = getDetectedCountryCode()
+      if (!country) return []
+    }
+    const states = calendarStore.getAvailableStates(country)
+    return Array.isArray(states) ? states : []
+  } catch (error) {
+    console.warn('Failed to get available states:', error)
+    return []
+  }
+})
+
 function open() {
   // Toggle behavior: if already open, close instead
   show.value = !show.value
@@ -29,14 +141,12 @@ function resetAll() {
     if (typeof calendarStore.$reset === 'function') {
       calendarStore.$reset()
     } else {
-      // Fallback manual reset if $reset not available
       calendarStore.today = new Date().toISOString().slice(0, 10)
       calendarStore.now = new Date().toISOString()
       calendarStore.events = new Map()
-      calendarStore.weekend = [6, 0] // common default (Sat/Sun) if locale helper not accessible here
+      calendarStore.weekend = [6, 0]
       calendarStore.config.first_day = 1
     }
-    // Optional: close dialog after reset
     close()
   }
 }
@@ -68,6 +178,34 @@ defineExpose({ open })
         <WeekdaySelector v-model="weekend" :first-day="firstDay" />
       </div>
     </div>
+
+    <div class="setting-group">
+      <label class="ec-field">
+        <span>Holiday Region</span>
+        <div class="holiday-row">
+          <select v-model="holidayMode" class="country-select">
+            <option value="none">Do not show holidays</option>
+            <option v-if="getDetectedCountryCode()" value="auto">
+              {{ autoDisplayName }} (Auto)
+            </option>
+            <option v-for="country in availableCountries" :key="country" :value="country">
+              {{ getCountryDisplayName(country) }}
+            </option>
+          </select>
+
+          <select
+            v-if="holidayMode !== 'none' && availableStates.length > 0"
+            v-model="holidayState"
+            class="state-select"
+          >
+            <option value="">None</option>
+            <option v-for="state in availableStates" :key="state" :value="state">
+              {{ state }}
+            </option>
+          </select>
+        </div>
+      </label>
+    </div>
     <template #footer>
       <div class="footer-row split">
         <div class="left">
@@ -86,6 +224,12 @@ defineExpose({ open })
   display: grid;
   gap: 1rem;
 }
+.setting-group h3 {
+  margin: 0;
+  padding: 0;
+  font-size: 1rem;
+  color: var(--strong);
+}
 .ec-field {
   display: grid;
   gap: 0.25rem;
@@ -94,6 +238,13 @@ defineExpose({ open })
   font-size: 0.75rem;
   color: var(--muted);
 }
+.holiday-settings {
+  display: grid;
+  gap: 0.75rem;
+  margin-left: 1rem;
+  padding-left: 1rem;
+  border-left: 2px solid var(--border-color);
+}
 select {
   border: 1px solid var(--muted);
   background: var(--panel-alt, transparent);
@@ -101,6 +252,22 @@ select {
   padding: 0.4rem 0.5rem;
   border-radius: 0.4rem;
 }
+
+.holiday-row {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.country-select {
+  flex: 1;
+  min-width: 0;
+}
+
+.state-select {
+  flex: 0 0 auto;
+  min-width: 120px;
+}
 /* WeekdaySelector display tweaks */
 .footer-row {
   display: flex;