Update calendar with multi-select

frontend/src/pages/Settings.tsx

@@ -1,6 +1,6 @@
 import { ReactNode, useState, useEffect } from 'react'
 import { useWorkspace } from '@/context'
-import { useVacationDays, useBreakPeriods } from '@/hooks'
+import { useVacationDays, useBreakPeriods, useShowWeekNumbers } from '@/hooks'
 import * as api from '@/services/api'
 import { Layout } from '@/components/layout/Layout'
 import { LoadingSpinner } from '@/components/common/LoadingSpinner'
@@ -16,6 +16,7 @@ export function Settings(): ReactNode {
   const { data: breakPeriods, isLoading: bpLoading, add: addBreakPeriod, remove: removeBreakPeriod } = useBreakPeriods(
     workspace?.id ?? null
   )
+  const [showWeekNumbers, setShowWeekNumbers] = useShowWeekNumbers()
 
   const [childBirthDate, setChildBirthDate] = useState('')
   const [parentData, setParentData] = useState({ salaryType: '', employmentStatus: '' })
@@ -284,6 +285,19 @@ export function Settings(): ReactNode {
           />
         </section>
 
+        <section className="settings-page__section">
+          <h2>Calendar</h2>
+          <label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
+            <input
+              type="checkbox"
+              checked={showWeekNumbers}
+              onChange={(e) => setShowWeekNumbers(e.target.checked)}
+              data-testid="show-week-numbers-checkbox"
+            />
+            <span>Visa veckonummer</span>
+          </label>
+        </section>
+
         <section className="settings-page__section">
           <h2>Partner</h2>
           <p>Add a partner to plan parental leave together.</p>