Add Month & Year and Full Date header display options
This commit is contained in:
parent
259bb1dd34
commit
07ffc9136e
@ -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" }}>
|
||||
<span>KW{getWeekNumber(getCWReferenceDate(getVisibleDays())).toString().padStart(2, "0")}</span>
|
||||
<span>{getCWReferenceDate(getVisibleDays()).getFullYear()}</span>
|
||||
{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,21 +5727,29 @@ export default function WeeklyView() {
|
||||
}}>
|
||||
{profile.headerDisplay === "month"
|
||||
? getCWReferenceDate(getVisibleDays()).toLocaleDateString(language, { month: "long" })
|
||||
: `KW ${getWeekNumber(getCWReferenceDate(getVisibleDays())).toString().padStart(2, "0")}`
|
||||
: 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>
|
||||
<span className="text-gray-400">|</span>
|
||||
<span
|
||||
style={{
|
||||
fontFamily: profile.yearFontFamily || "Inter",
|
||||
fontSize: profile.yearFontSize || "1.125rem",
|
||||
fontWeight: Number(profile.yearFontWeight || "700"),
|
||||
color: adjustColorForDarkMode(profile.yearColor || "#333333", darkMode),
|
||||
filter: "brightness(var(--weekly-header-brightness, 1))"
|
||||
}}
|
||||
>
|
||||
{currentWeekStart.getFullYear()}
|
||||
</span>
|
||||
{(profile.headerDisplay === "kw" || profile.headerDisplay === "month" || !profile.headerDisplay) && (
|
||||
<>
|
||||
<span className="text-gray-400">|</span>
|
||||
<span
|
||||
style={{
|
||||
fontFamily: profile.yearFontFamily || "Inter",
|
||||
fontSize: profile.yearFontSize || "1.125rem",
|
||||
fontWeight: Number(profile.yearFontWeight || "700"),
|
||||
color: adjustColorForDarkMode(profile.yearColor || "#333333", darkMode),
|
||||
filter: "brightness(var(--weekly-header-brightness, 1))"
|
||||
}}
|
||||
>
|
||||
{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>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user