mARTin-B78/My-Weekly-ToDo-List
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add "Current Day" header display option

Browse Source 
New "Current Day" option in the header display settings shows the
currently visible day formatted as "Mo., 30. März 2026" (weekday +
full date), using the user's locale.

- Available in all views (simple, calendar, list, kanban)
- In kanban view: defaults to "Current Day" when no setting is chosen
- On mobile portrait: existing behavior preserved (always shows current day)
- On mobile landscape: respects the new setting like other options
- No year separator shown (year is already part of the format)
- Added to all 5 languages (EN, DE, FR, ES, IT)

v1.80.4
This commit is contained in:
mARTin 2026-03-31 08:23:46 +02:00
parent 7306549311
commit 033603e899
4 changed files with 40 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "my-weekly-todo-list", "name": "my-weekly-todo-list",
"version": "1.80.3", "version": "1.80.4",
"description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view", "description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {

1
src/components/SettingsSidebar.tsx
View File

@ -895,6 +895,7 @@ function SettingsSidebar({
<option value="month">{t.headerDisplayMonth}</option> <option value="month">{t.headerDisplayMonth}</option>
<option value="month_year">{t.headerDisplayMonthYear}</option> <option value="month_year">{t.headerDisplayMonthYear}</option>
<option value="date">{t.headerDisplayDate}</option> <option value="date">{t.headerDisplayDate}</option>
<option value="current_day">{t.headerDisplayCurrentDay}</option>
<option value="custom">{t.headerDisplayCustom}</option> <option value="custom">{t.headerDisplayCustom}</option>
<option value="none">{t.headerDisplayNone}</option> <option value="none">{t.headerDisplayNone}</option>
</select> </select>

56
src/components/WeeklyView.tsx
View File

@ -5608,6 +5608,10 @@ export default function WeeklyView() {
return shownDay.toLocaleDateString(profile.language || "de-DE", { weekday: "short", day: "2-digit", month: "long", year: "numeric" }); return shownDay.toLocaleDateString(profile.language || "de-DE", { weekday: "short", day: "2-digit", month: "long", year: "numeric" });
})() : })() :
profile.headerDisplay === "none" ? "" : profile.headerDisplay === "none" ? "" :
profile.headerDisplay === "current_day" ? (() => {
const shownDay = getVisibleDays()[0];
return shownDay.toLocaleDateString(profile.language || "de-DE", { weekday: "short", day: "2-digit", month: "long", year: "numeric" });
})() :
profile.headerDisplay === "date" ? (() => { profile.headerDisplay === "date" ? (() => {
const today = new Date(); const today = new Date();
const isTodayInWeek = getVisibleDays().some(d => const isTodayInWeek = getVisibleDays().some(d =>
@ -5758,30 +5762,36 @@ export default function WeeklyView() {
color: adjustColorForDarkMode(profile.cwColor || "#333333", darkMode), color: adjustColorForDarkMode(profile.cwColor || "#333333", darkMode),
filter: "brightness(var(--weekly-header-brightness, 1))" filter: "brightness(var(--weekly-header-brightness, 1))"
}}> }}>
{ {(() => {
profile.headerDisplay === "none" const effectiveDisplay = profile.viewStyle === "kanban" && !profile.headerDisplay ? "current_day" : (profile.headerDisplay || "kw");
? "" if (effectiveDisplay === "none") return "";
: profile.headerDisplay === "month" if (effectiveDisplay === "current_day") {
? getCWReferenceDate(getVisibleDays()).toLocaleDateString(profile.language, { month: "long" }) const today = new Date();
: profile.headerDisplay === "month_year" const visibleDays = getVisibleDays();
? getCWReferenceDate(getVisibleDays()).toLocaleDateString(profile.language, { month: "long", year: "numeric" }) const shownDay = visibleDays.some(d =>
: profile.headerDisplay === "date" d.getDate() === today.getDate() &&
? (() => { d.getMonth() === today.getMonth() &&
const today = new Date(); d.getFullYear() === today.getFullYear()
const isTodayInWeek = getVisibleDays().some(d => ) ? today : visibleDays[0];
d.getDate() === today.getDate() && return shownDay.toLocaleDateString(profile.language || "de-DE", { weekday: "short", day: "2-digit", month: "long", year: "numeric" });
d.getMonth() === today.getMonth() && }
d.getFullYear() === today.getFullYear() if (effectiveDisplay === "month") return getCWReferenceDate(getVisibleDays()).toLocaleDateString(profile.language, { month: "long" });
); if (effectiveDisplay === "month_year") return getCWReferenceDate(getVisibleDays()).toLocaleDateString(profile.language, { month: "long", year: "numeric" });
const refDate = isTodayInWeek ? today : getCWReferenceDate(getVisibleDays()); if (effectiveDisplay === "date") {
return refDate.toLocaleDateString(profile.language, { day: '2-digit', month: '2-digit', year: 'numeric' }); const today = new Date();
})() const isTodayInWeek = getVisibleDays().some(d =>
: profile.headerDisplay === "custom" d.getDate() === today.getDate() &&
? formatCustomHeader(profile.headerCustomFormat || "KW WW | YYYY", getVisibleDays(), profile.language, t) d.getMonth() === today.getMonth() &&
: `KW ${getWeekNumber(getCWReferenceDate(getVisibleDays())).toString().padStart(2, "0")}` d.getFullYear() === today.getFullYear()
} );
const refDate = isTodayInWeek ? today : getCWReferenceDate(getVisibleDays());
return refDate.toLocaleDateString(profile.language, { day: '2-digit', month: '2-digit', year: 'numeric' });
}
if (effectiveDisplay === "custom") return formatCustomHeader(profile.headerCustomFormat || "KW WW | YYYY", getVisibleDays(), profile.language, t);
return `KW ${getWeekNumber(getCWReferenceDate(getVisibleDays())).toString().padStart(2, "0")}`;
})()}
</span> </span>
{profile.headerDisplay !== "none" && (profile.headerDisplay === "kw" || profile.headerDisplay === "month" || !profile.headerDisplay) && ( {profile.headerDisplay !== "none" && profile.headerDisplay !== "current_day" && (profile.headerDisplay === "kw" || profile.headerDisplay === "month" || !profile.headerDisplay) && (
<> <>
<span className="text-gray-400">|</span> <span className="text-gray-400">|</span>
<span <span

5
src/lib/weeklyViewTranslations.ts
View File

@ -31,6 +31,7 @@ export const translations: Record<string, any> = {
headerDisplayMonthYear: "Month & Year - March | 2026", headerDisplayMonthYear: "Month & Year - March | 2026",
headerDisplayDate: "Full Date - 13.03.2026", headerDisplayDate: "Full Date - 13.03.2026",
headerDisplayCustom: "Custom - Friday - 13. March", headerDisplayCustom: "Custom - Friday - 13. March",
headerDisplayCurrentDay: "Current Day - Friday, 13. March 2026",
headerDisplayNone: "None", headerDisplayNone: "None",
headerCustomFormatLabel: "Format string (e.g. DD.MM.YYYY)", headerCustomFormatLabel: "Format string (e.g. DD.MM.YYYY)",
language: "Language", language: "Language",
@ -273,6 +274,7 @@ export const translations: Record<string, any> = {
headerDisplayMonthYear: "Monat & Jahr - März | 2026", headerDisplayMonthYear: "Monat & Jahr - März | 2026",
headerDisplayDate: "Vollständiges Datum - 13.03.2026", headerDisplayDate: "Vollständiges Datum - 13.03.2026",
headerDisplayCustom: "Benutzerdefiniert - Freitag - 13. März", headerDisplayCustom: "Benutzerdefiniert - Freitag - 13. März",
headerDisplayCurrentDay: "Aktueller Tag - Freitag, 13. März 2026",
headerDisplayNone: "Nichts", headerDisplayNone: "Nichts",
headerCustomFormatLabel: "Format (z.B. DD.MM.YYYY)", headerCustomFormatLabel: "Format (z.B. DD.MM.YYYY)",
listView: "Liste", listView: "Liste",
@ -517,6 +519,7 @@ export const translations: Record<string, any> = {
headerDisplayMonthYear: "Mois & Année - Mars | 2026", headerDisplayMonthYear: "Mois & Année - Mars | 2026",
headerDisplayDate: "Date complète - 13.03.2026", headerDisplayDate: "Date complète - 13.03.2026",
headerDisplayCustom: "Personnalisé - Vendredi - 13 Mars", headerDisplayCustom: "Personnalisé - Vendredi - 13 Mars",
headerDisplayCurrentDay: "Jour actuel - Vendredi, 13 Mars 2026",
headerDisplayNone: "Aucun", headerDisplayNone: "Aucun",
headerCustomFormatLabel: "Format (ex: DD.MM.YYYY)", headerCustomFormatLabel: "Format (ex: DD.MM.YYYY)",
language: "Langue", language: "Langue",
@ -734,6 +737,7 @@ export const translations: Record<string, any> = {
headerDisplayMonthYear: "Mes y Año - Marzo | 2026", headerDisplayMonthYear: "Mes y Año - Marzo | 2026",
headerDisplayDate: "Fecha completa - 13.03.2026", headerDisplayDate: "Fecha completa - 13.03.2026",
headerDisplayCustom: "Personalizado - Viernes - 13 Marzo", headerDisplayCustom: "Personalizado - Viernes - 13 Marzo",
headerDisplayCurrentDay: "Día actual - Viernes, 13 Marzo 2026",
headerDisplayNone: "Ninguno", headerDisplayNone: "Ninguno",
headerCustomFormatLabel: "Formato (ej. DD.MM.YYYY)", headerCustomFormatLabel: "Formato (ej. DD.MM.YYYY)",
language: "Idioma", language: "Idioma",
@ -951,6 +955,7 @@ export const translations: Record<string, any> = {
headerDisplayMonthYear: "Mese e Anno - Marzo | 2026", headerDisplayMonthYear: "Mese e Anno - Marzo | 2026",
headerDisplayDate: "Data completa - 13.03.2026", headerDisplayDate: "Data completa - 13.03.2026",
headerDisplayCustom: "Personalizzato - Venerdì - 13 Marzo", headerDisplayCustom: "Personalizzato - Venerdì - 13 Marzo",
headerDisplayCurrentDay: "Giorno corrente - Venerdì, 13 Marzo 2026",
headerDisplayNone: "Nessuno", headerDisplayNone: "Nessuno",
headerCustomFormatLabel: "Formato (es. DD.MM.YYYY)", headerCustomFormatLabel: "Formato (es. DD.MM.YYYY)",
language: "Lingua", language: "Lingua",