Display national holidays on the calendar.

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;