Add Month & Year and Full Date header display options

src/components/WeeklyView.tsx

@@ -261,6 +261,8 @@ const translations: Record<string, any> = {
         headerDisplay: "Header Display",
         headerDisplayKW: "Calendar Week (KW)",
         headerDisplayMonth: "Month Name",
+        headerDisplayMonthYear: "Month & Year",
+        headerDisplayDate: "Full Date",
         language: "Language",
         dateFormat: "Date Format",
         timeFormat: "Time Format",
@@ -467,6 +469,8 @@ const translations: Record<string, any> = {
         headerDisplay: "Kopfzeile",
         headerDisplayKW: "Kalenderwoche (KW)",
         headerDisplayMonth: "Monatsname",
+        headerDisplayMonthYear: "Monat & Jahr",
+        headerDisplayDate: "Vollständiges Datum",
         listView: "Liste",
         notes: "Notizen",
         notesSidebar: "Notizen-Seitenleiste",
@@ -676,6 +680,8 @@ const translations: Record<string, any> = {
         headerDisplay: "Affichage en-tête",
         headerDisplayKW: "Semaine calendaire (KW)",
         headerDisplayMonth: "Nom du mois",
+        headerDisplayMonthYear: "Mois & Année",
+        headerDisplayDate: "Date complète",
         language: "Langue",
         dateFormat: "Format de date",
         timeFormat: "Format d'heure",
@@ -883,6 +889,8 @@ const translations: Record<string, any> = {
         headerDisplay: "Visualización de encabezado",
         headerDisplayKW: "Semana calendario (KW)",
         headerDisplayMonth: "Nombre del mes",
+        headerDisplayMonthYear: "Mes y Año",
+        headerDisplayDate: "Fecha completa",
         language: "Idioma",
         dateFormat: "Formato de fecha",
         timeFormat: "Formato de hora",
@@ -1090,6 +1098,8 @@ const translations: Record<string, any> = {
         headerDisplay: "Visualizzazione intestazione",
         headerDisplayKW: "Settimana calendario (KW)",
         headerDisplayMonth: "Nome del mese",
+        headerDisplayMonthYear: "Mese e Anno",
+        headerDisplayDate: "Data completa",
         language: "Lingua",
         dateFormat: "Formato data",
         timeFormat: "Formato ora",
@@ -1793,7 +1803,7 @@ export default function WeeklyView() {
         weekdayCase?: "normal" | "capitalize" | "uppercase";
         customWeekdayNames?: string;
         dateVerticalAlign?: "top" | "middle" | "bottom";
-        headerDisplay?: "kw" | "month";
+        headerDisplay?: "kw" | "month" | "month_year" | "date";
         lightTheme?: any;
         darkTheme?: any;
     }>({
@@ -5460,8 +5470,16 @@ export default function WeeklyView() {
                             <AlertCircle size={14} className="text-red-500" />
                         ) : null}
                         <div className="flex flex-col items-center justify-center leading-tight" style={{ whiteSpace: "nowrap", fontSize: "0.8rem" }}>
+                            {profile.headerDisplay === "date" ? (
+                                <span>{getCWReferenceDate(getVisibleDays()).toLocaleDateString(language, { day: '2-digit', month: '2-digit', year: 'numeric' })}</span>
+                            ) : profile.headerDisplay === "month_year" ? (
+                                <span>{getCWReferenceDate(getVisibleDays()).toLocaleDateString(language, { month: 'long', year: 'numeric' })}</span>
+                            ) : (
+                                <>
                                     <span>KW{getWeekNumber(getCWReferenceDate(getVisibleDays())).toString().padStart(2, "0")}</span>
                                     <span>{getCWReferenceDate(getVisibleDays()).getFullYear()}</span>
+                                </>
+                            )}
                         </div>
                     </div>
 
@@ -5709,9 +5727,15 @@ export default function WeeklyView() {
                             }}>
                                 {profile.headerDisplay === "month"
                                     ? getCWReferenceDate(getVisibleDays()).toLocaleDateString(language, { month: "long" })
+                                    : profile.headerDisplay === "month_year"
+                                        ? getCWReferenceDate(getVisibleDays()).toLocaleDateString(language, { month: "long", year: "numeric" })
+                                        : profile.headerDisplay === "date"
+                                            ? getCWReferenceDate(getVisibleDays()).toLocaleDateString(language, { day: '2-digit', month: '2-digit', year: 'numeric' })
                                             : `KW ${getWeekNumber(getCWReferenceDate(getVisibleDays())).toString().padStart(2, "0")}`
                                 }
                             </span>
+                            {(profile.headerDisplay === "kw" || profile.headerDisplay === "month" || !profile.headerDisplay) && (
+                                <>
                                     <span className="text-gray-400">|</span>
                                     <span
                                         style={{
@@ -5724,6 +5748,8 @@ export default function WeeklyView() {
                                     >
                                         {currentWeekStart.getFullYear()}
                                     </span>
+                                </>
+                            )}
                         </div>
                     </div>
 
@@ -9668,7 +9694,7 @@ function SettingsSidebar({
         weekdayCase?: "normal" | "capitalize" | "uppercase";
         customWeekdayNames?: string;
         dateVerticalAlign?: "top" | "middle" | "bottom";
-        headerDisplay?: "kw" | "month";
+        headerDisplay?: "kw" | "month" | "month_year" | "date";
     }>({
         name: "",
         email: "",
@@ -9682,7 +9708,7 @@ function SettingsSidebar({
         endHour: 18,
         focusTimerDuration: 25,
         focusBreakDuration: 5,
-        showTimeGrid: true,
+        headerDisplay: "kw",
         cellDuration: 30,
         viewStyle: "list",
         fontSize: "M",
@@ -10808,6 +10834,24 @@ function SettingsSidebar({
                                     >
                                         {t.headerDisplayMonth}
                                     </button>
+                                    <button
+                                        onClick={() => {
+                                            setProfile({ ...profile, headerDisplay: "month_year" });
+                                            saveSetting("headerDisplay", "month_year");
+                                        }}
+                                        className={`px-4 py-2 text-sm rounded transition-colors ${profile.headerDisplay === "month_year" ? "bg-white shadow-sm font-bold text-black" : "text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700"}`}
+                                    >
+                                        {t.headerDisplayMonthYear}
+                                    </button>
+                                    <button
+                                        onClick={() => {
+                                            setProfile({ ...profile, headerDisplay: "date" });
+                                            saveSetting("headerDisplay", "date");
+                                        }}
+                                        className={`px-4 py-2 text-sm rounded transition-colors ${profile.headerDisplay === "date" ? "bg-white shadow-sm font-bold text-black" : "text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700"}`}
+                                    >
+                                        {t.headerDisplayDate}
+                                    </button>
                                 </div>
                             </div>