waffles: calendar: generalize first day of week

This commit is contained in:
end-4
2025-11-27 13:17:24 +01:00
parent d40df98aa5
commit 0700e024d9
5 changed files with 26 additions and 31 deletions
@@ -283,7 +283,7 @@ Singleton {
}
property JsonObject calendar: JsonObject {
property bool forceMondayWeekStart: true
property string locale: "en-GB"
}
property JsonObject cheatsheet: JsonObject {
@@ -599,6 +599,9 @@ Singleton {
property JsonObject actionCenter: JsonObject {
property list<string> toggles: [ "network", "bluetooth", "easyEffects", "powerProfile", "idleInhibitor", "nightLight", "darkMode", "antiFlashbang", "cloudflareWarp", "mic", "musicRecognition", "notifications", "onScreenKeyboard", "gameMode", "screenSnip", "colorPicker" ]
}
property JsonObject calendar: JsonObject {
property bool force2CharDayOfWeek: true
}
}
}
}
@@ -4,35 +4,24 @@ import Quickshell
Singleton {
id: root
function getMonday(date, american = false) {
function getFirstDayOfWeek(date, firstDay = 1) {
const d = new Date(date); // Copy
const day = d.getDay(); // 0 = Sunday, 1 = Monday, ..., 6 = Saturday
// Calculate difference to Monday
if (american) {
// Week starts on Sunday
d.setDate(d.getDate() - day);
} else {
// Week starts on Monday
const diff = day === 0 ? -6 : 1 - day;
d.setDate(d.getDate() + diff);
}
// Calculate difference to firstDay
const diff = (day - firstDay + 7) % 7;
d.setDate(d.getDate() - diff);
return d;
}
function sameDate(d1, d2) {
return (
d1.getFullYear() === d2.getFullYear() &&
d1.getMonth() === d2.getMonth() &&
d1.getDate() === d2.getDate()
);
return (d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth() && d1.getDate() === d2.getDate());
}
function getIthDayDateOfSameWeek(date, i, american = false) {
const monday = root.getMonday(date, american);
const targetDate = new Date(monday);
targetDate.setDate(monday.getDate() + i);
function getIthDayDateOfSameWeek(date, i, firstDay = 1) {
const firstDayDate = root.getFirstDayOfWeek(date, firstDay);
const targetDate = new Date(firstDayDate);
targetDate.setDate(firstDayDate.getDate() + i);
return targetDate;
}
}
@@ -23,7 +23,6 @@ Item {
// Configuration
property int paddingWeeks: 2 // 1 should be sufficient with proper clipping and no padding
property var locale: Qt.locale() // Should be of type Locale but QML is being funny
property bool american: locale.firstDayOfWeek == Locale.Sunday
// Scrolling
function scrollMonthsAndSnap(x) { // Scroll x months and snap to month
@@ -68,7 +67,7 @@ Item {
readonly property int millisPerWeek: 7 * 24 * 60 * 60 * 1000
readonly property int totalWeeks: 6 + (paddingWeeks * 2)
readonly property int focusedWeekIndex: 2 // The third row, 0-indexed
readonly property int focusDayOfWeekIndex: 6 // Non-American
readonly property int focusDayOfWeekIndex: 6
property date dateInFirstWeek: {
const currentDate = new Date();
const currentMonth = currentDate.getMonth();
@@ -80,7 +79,7 @@ Item {
// The last day of 3rd week shown is considered the focused month
const addedTime = (root.paddingWeeks + root.focusedWeekIndex) * root.millisPerWeek
const dateInTargetWeek = new Date(root.dateInFirstWeek.getTime() + addedTime);
return DateUtils.getIthDayDateOfSameWeek(dateInTargetWeek, root.focusDayOfWeekIndex - (1 * root.american), root.american); // 4 = Thursday
return DateUtils.getIthDayDateOfSameWeek(dateInTargetWeek, root.focusDayOfWeekIndex - root.locale.firstDayOfWeek, root.locale.firstdayOfWeek); // 4 = Thursday
}
property int focusedMonth: focusedDate.getMonth() + 1 // 0-indexed -> 1-indexed
@@ -112,7 +111,7 @@ Item {
WeekRow {
required property int index
sundayFirst: root.american
locale: root.locale
date: new Date(root.dateInFirstWeek.getTime() + (index * root.millisPerWeek))
Layout.fillWidth: true
spacing: root.buttonSpacing
@@ -8,14 +8,14 @@ RowLayout {
id: root
// Pls supply
required property date date
property bool sundayFirst: false
required property date date // Any date within the week
property var locale
// Expose model and delegate for flexibility
property list<var> model: {
// Should expose props like here: https://doc.qt.io/qt-6/qml-qtquick-controls-monthgrid.html#delegate-prop
// (except weekNumber because i'm lazy and it's not so important)
const firstDayOfWeek = DateUtils.getMonday(root.date, root.sundayFirst);
const firstDayOfWeek = DateUtils.getFirstDayOfWeek(root.date, root.locale.firstDayOfWeek);
const weekDates = [];
for (let i = 0; i < 7; i++) {
const dayDate = new Date(firstDayOfWeek);
@@ -18,7 +18,7 @@ BodyRectangle {
property bool collapsed
// Locale
property var locale: Config.options.calendar.forceMondayWeekStart ? Qt.locale("en-GB") : Qt.locale()
property var locale: Qt.locale(Config.options.calendar.locale)
implicitHeight: collapsed ? 0 : contentColumn.implicitHeight
implicitWidth: contentColumn.implicitWidth
@@ -52,7 +52,11 @@ BodyRectangle {
implicitWidth: calendarView.buttonSize
WText {
anchors.centerIn: parent
text: dayOfWeekItem.model.shortName.substring(0,2)
text: {
var result = dayOfWeekItem.model.shortName;
if (Config.options.waffles.calendar.force2CharDayOfWeek) result = result.substring(0,2);
return result;
}
color: Looks.colors.fg
font.pixelSize: Looks.font.pixelSize.large
}
@@ -103,7 +107,7 @@ BodyRectangle {
WText {
anchors.fill: parent
horizontalAlignment: Text.AlignLeft
text: Qt.locale().toString(calendarView.dateInFirstWeek, "MMMM yyyy")
text: Qt.locale().toString(calendarView.focusedDate, "MMMM yyyy")
font.pixelSize: Looks.font.pixelSize.large
font.weight: Looks.font.weight.strong
}