quickshell: show greyed adjacent-month days in the calendar grid

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
rope 2026-08-15 21:59:43 +01:00
parent d6725f4d6d
commit efb49deabd

View file

@ -6290,19 +6290,25 @@ in
} }
Grid { Grid {
id: calGrid
columns: 7 columns: 7
spacing: 0 spacing: 0
// Offset of the 1st within its Mo-first week, and the
// whole-week count that covers the month so leading and
// trailing cells only spill into the weeks that need them.
property int startDay: (new Date(calPopup.viewYear, calPopup.viewMonth, 1).getDay() + 6) % 7
property int daysInMonth: new Date(calPopup.viewYear, calPopup.viewMonth + 1, 0).getDate()
Repeater { Repeater {
model: 42 model: 7 * Math.ceil((calGrid.startDay + calGrid.daysInMonth) / 7)
Rectangle { Rectangle {
required property int index required property int index
property int dayNum: { // Day-of-month offset; out-of-range values roll into
let first = new Date(calPopup.viewYear, calPopup.viewMonth, 1); // the adjacent month via the Date constructor.
let startDay = (first.getDay() + 6) % 7; property int dayNum: index - calGrid.startDay + 1
return index - startDay + 1; property date cellDate: new Date(calPopup.viewYear, calPopup.viewMonth, dayNum)
} property bool inMonth: dayNum >= 1 && dayNum <= calGrid.daysInMonth
property int daysInMonth: new Date(calPopup.viewYear, calPopup.viewMonth + 1, 0).getDate() property bool isToday: inMonth
property bool isToday: dayNum === clockText.now.getDate() && dayNum === clockText.now.getDate()
&& calPopup.viewMonth === clockText.now.getMonth() && calPopup.viewMonth === clockText.now.getMonth()
&& calPopup.viewYear === clockText.now.getFullYear() && calPopup.viewYear === clockText.now.getFullYear()
width: 32 width: 32
@ -6312,8 +6318,8 @@ in
SText { SText {
anchors.centerIn: parent anchors.centerIn: parent
text: parent.dayNum >= 1 && parent.dayNum <= parent.daysInMonth ? parent.dayNum.toString() : "" text: parent.cellDate.getDate().toString()
color: parent.isToday ? Theme.base05 : Theme.base04 color: parent.isToday ? Theme.base05 : (parent.inMonth ? Theme.base04 : Theme.base03)
font.pixelSize: 13 font.pixelSize: 13
} }
} }