Calendar is no longer a Widget, moved to Modules/Calendar/Calendar.qml

- Using a NLoader - Got a display bug with DayOfWeekRow!
2025-08-10 21:31:09 -04:00 · 2025-08-10 21:31:09 -04:00 · 93fca936d8
commit 93fca936d8
parent c1452e3c11
5 changed files with 153 additions and 139 deletions
--- a/Modules/Calendar/Calendar.qml
+++ b/Modules/Calendar/Calendar.qml
@ -0,0 +1,141 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Wayland
+import qs.Services
+import qs.Widgets
+
+NLoader {
+  id: root
+
+  content: Component {
+    NPanel {
+      id: calendarPanel
+
+      readonly property real scaling: Scaling.scale(screen)
+
+      Rectangle {
+        color: Colors.backgroundSecondary
+        radius: Style.radiusMedium * scaling
+        border.color: Colors.backgroundTertiary
+        border.width: Math.min(1, Style.borderMedium * scaling)
+        width: 340 * scaling
+        height: 320 // TBC
+        anchors.top: parent.top
+        anchors.right: parent.right
+        anchors.topMargin: Style.marginTiny * scaling
+        anchors.rightMargin: Style.marginTiny * scaling
+
+        // Prevent closing when clicking in the panel bg
+        MouseArea {
+          anchors.fill: parent
+        }
+
+        // Main Column
+        ColumnLayout {
+          anchors.fill: parent
+          anchors.margins: Style.marginMedium * scaling
+          spacing: Style.marginMedium * scaling
+
+          // Header: Month/Year with navigation
+          RowLayout {
+            Layout.fillWidth: true
+            spacing: Style.marginSmall * scaling
+
+            NIconButton {
+              icon: "chevron_left"
+              onClicked: function () {
+                let newDate = new Date(grid.year, grid.month - 1, 1)
+                grid.year = newDate.getFullYear()
+                grid.month = newDate.getMonth()
+              }
+            }
+
+            NText {
+              text: grid.title
+              Layout.fillWidth: true
+              horizontalAlignment: Text.AlignHCenter
+              font.pointSize: Style.fontSizeMedium * scaling
+              color: Colors.accentPrimary
+            }
+
+            NIconButton {
+              icon: "chevron_right"
+              onClicked: function () {
+                let newDate = new Date(grid.year, grid.month + 1, 1)
+                grid.year = newDate.getFullYear()
+                grid.month = newDate.getMonth()
+              }
+            }
+          }
+
+          NDivider {
+            Layout.fillWidth: true
+          }
+
+          // Columns label (Sunday to Saturday)
+          DayOfWeekRow {
+            Layout.fillWidth: true
+            spacing: 0
+            Layout.leftMargin: Style.marginSmall * scaling // Align with grid
+            Layout.rightMargin: Style.marginSmall * scaling
+
+            delegate: NText {
+              text: shortName
+              color: Colors.accentSecondary
+              font.pointSize: Style.fontSizeMedium * scaling
+              horizontalAlignment: Text.AlignHCenter
+              width: Style.baseWidgetSize * scaling
+            }
+          }
+
+          // Grids: days
+          MonthGrid {
+            id: grid
+
+            Layout.fillWidth: true
+            Layout.leftMargin: Style.marginSmall * scaling
+            Layout.rightMargin: Style.marginSmall * scaling
+            spacing: 0
+            month: Time.date.getMonth()
+            year: Time.date.getFullYear()
+
+            // Optionally, update when the panel becomes visible
+            Connections {
+              target: calendarPanel
+              function onVisibleChanged() {
+                if (calendarPanel.visible) {
+                  grid.month = Time.date.getMonth()
+                  grid.year = Time.date.getFullYear()
+                }
+              }
+            }
+
+            delegate: Rectangle {
+              width: Style.baseWidgetSize * scaling
+              height: Style.baseWidgetSize * scaling
+              radius: Style.radiusSmall * scaling
+              color: model.today ? Colors.accentPrimary : "transparent"
+
+              NText {
+                anchors.centerIn: parent
+                text: model.day
+                color: model.today ? Colors.onAccent : Colors.textPrimary
+                opacity: model.month === grid.month ? Style.opacityHeavy : Style.opacityLight
+                font.pointSize: Style.fontSizeMedium * scaling
+                font.bold: model.today ? true : false
+              }
+
+              Behavior on color {
+                ColorAnimation {
+                  duration: 150
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}