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

fix: show day + date in mobile portrait header instead of KW

Browse Source 
In portrait mode on mobile, the header center now displays the full
date with weekday (e.g. "Mo. 30. März 2026") using the user's language
locale. Falls back to today if today is in the visible week, otherwise
uses the week's reference date. Landscape mobile keeps existing behavior.

v1.80.2
This commit is contained in:
mARTin 2026-03-31 01:01:46 +02:00
parent 8a0af281a5
commit 687e1e1d08
2 changed files with 19 additions and 4 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",
"version": "1.80.1",
"version": "1.80.2",
"description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view",
"main": "index.js",
"scripts": {

21
src/components/WeeklyView.tsx
View File

@ -780,6 +780,7 @@ export default function WeeklyView() {
// Mobile detection
const [isMobile, setIsMobile] = useState(false);
const [isPortrait, setIsPortrait] = useState(false);
const [showMobileFabSheet, setShowMobileFabSheet] = useState(false);
const [showMobileFabMenu, setShowMobileFabMenu] = useState(false);
@ -1207,9 +1208,12 @@ export default function WeeklyView() {
}
}, []);
// Mobile detection — track viewport width
// Mobile detection — track viewport width and orientation
useEffect(() => {
const check = () => setIsMobile(window.innerWidth <= 768);
const check = () => {
setIsMobile(window.innerWidth <= 768);
setIsPortrait(window.innerHeight > window.innerWidth);
};
check();
window.addEventListener("resize", check);
return () => window.removeEventListener("resize", check);
@ -5599,7 +5603,18 @@ export default function WeeklyView() {
)}
{syncError && <AlertCircle size={14} className="text-red-500" />}
<span>
{profile.headerDisplay === "none" ? "" :
{isPortrait ? (() => {
const today = new Date();
const visibleDays = getVisibleDays();
const isTodayInWeek = visibleDays.some(d =>
d.getDate() === today.getDate() &&
d.getMonth() === today.getMonth() &&
d.getFullYear() === today.getFullYear()
);
const refDate = isTodayInWeek ? today : getCWReferenceDate(visibleDays);
return refDate.toLocaleDateString(profile.language || "de-DE", { weekday: "short", day: "2-digit", month: "long", year: "numeric" });
})() :
profile.headerDisplay === "none" ? "" :
profile.headerDisplay === "date" ? (() => {
const today = new Date();
const isTodayInWeek = getVisibleDays().some(d =>