Fix locale formatting for calendar display (#10418) (#10420)

- Cannot accept underscore

(cherry picked from commit bcc386aecf)

Co-authored-by: Oliver <oliver.henry.walters@gmail.com>

src/frontend/src/components/calendar/Calendar.tsx

@@ -27,7 +27,7 @@ import {
   IconDownload,
   IconFilter
 } from '@tabler/icons-react';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useShallow } from 'zustand/react/shallow';
 import type { CalendarState } from '../../hooks/UseCalendar';
 import { useLocalState } from '../../states/LocalState';
@@ -59,6 +59,9 @@ export default function Calendar({
 
   const [locale] = useLocalState(useShallow((s) => [s.language]));
 
+  // Ensure underscore is replaced with dash
+  const calendarLocale = useMemo(() => locale.replace('_', '-'), [locale]);
+
   const selectMonth = useCallback(
     (date: DateValue) => {
       state.selectMonth(date);
@@ -186,7 +189,7 @@ export default function Calendar({
             plugins={[dayGridPlugin, interactionPlugin]}
             initialView='dayGridMonth'
             locales={allLocales}
-            locale={locale}
+            locale={calendarLocale}
             headerToolbar={false}
             footerToolbar={false}
             {...calendarProps}