src/components/CalendarView.vue

@@ -4,6 +4,7 @@ import { useCalendarStore } from '@/stores/CalendarStore'
 import CalendarHeader from '@/components/CalendarHeader.vue'
 import CalendarWeek from '@/components/CalendarWeek.vue'
 import Jogwheel from '@/components/Jogwheel.vue'
+import SettingsDialog from '@/components/SettingsDialog.vue'
 import {
   isoWeekInfo,
   getLocalizedMonthName,
@@ -21,6 +22,7 @@ import { toLocalString, fromLocalString } from '@/utils/date'
 
 const calendarStore = useCalendarStore()
 const viewport = ref(null)
+const settingsDialog = ref(null)
 
 const emit = defineEmits(['create-event', 'edit-event'])
 
@@ -424,6 +426,10 @@ const handleHeaderYearChange = ({ scrollTop: st }) => {
   scrollTop.value = clamped
   viewport.value && (viewport.value.scrollTop = clamped)
 }
+
+function openSettings() {
+  settingsDialog.value?.open()
+}
 </script>
 
 <template>
@@ -432,6 +438,15 @@ const handleHeaderYearChange = ({ scrollTop: st }) => {
       <h1>Calendar</h1>
       <div class="header-controls">
         <div class="today-date" @click="goToToday">{{ todayString }}</div>
+        <button
+          type="button"
+          class="settings-btn"
+          @click="openSettings"
+          aria-label="Open settings"
+          title="Settings"
+        >
+          ⚙
+        </button>
       </div>
     </header>
     <CalendarHeader
@@ -480,6 +495,7 @@ const handleHeaderYearChange = ({ scrollTop: st }) => {
         @scroll-to="handleJogwheelScrollTo"
       />
     </div>
+    <SettingsDialog ref="settingsDialog" />
   </div>
 </template>
 
@@ -506,6 +522,33 @@ header h1 {
   align-items: center;
 }
 
+.settings-btn {
+  background: transparent;
+  border: none;
+  color: var(--muted);
+  padding: 0;
+  margin: 0;
+  margin-right: 0.6rem;
+  cursor: pointer;
+  font-size: 1.5rem;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  outline: none;
+}
+.settings-btn:hover {
+  color: var(--strong);
+}
+.settings-btn:focus-visible {
+  /* Keep visual accessibility without background */
+  outline: 2px solid var(--selected);
+  outline-offset: 2px;
+}
+.settings-btn:active {
+  transform: scale(0.88);
+}
+
 .today-date {
   cursor: pointer;
   padding: 0.5rem;