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

- Using a NLoader
- Got a display bug with DayOfWeekRow!

Modules/Bar/Clock.qml

@@ -12,13 +12,8 @@ NClock {
     target: root
   }
 
-  NCalendar {
-    id: calendar
-    visible: false
-  }
-
   onEntered: function () {
-    if (!calendar.visible) {
+    if (!calendar.isLoaded) {
       tooltip.show()
     }
   }
@@ -26,7 +21,8 @@ NClock {
     tooltip.hide()
   }
   onClicked: function () {
-    calendar.visible = !calendar.visible
     tooltip.hide()
+    calendar.isLoaded = !calendar.isLoaded
+    
   }
 }

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
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

Widgets/NCalendar.qml

@@ -1,132 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import Quickshell
-import Quickshell.Wayland
-import qs.Services
-
-NPanel {
-  id: root
-
-  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
-    }
-
-    ColumnLayout {
-      anchors.fill: parent
-      anchors.margins: Style.marginMedium * scaling
-      spacing: Style.marginMedium * scaling
-
-      // Month/Year header with navigation
-      RowLayout {
-        Layout.fillWidth: true
-        spacing: Style.marginSmall * scaling
-
-        NIconButton {
-          icon: "chevron_left"
-          onClicked: function () {
-            let newDate = new Date(calendar.year, calendar.month - 1, 1)
-            calendar.year = newDate.getFullYear()
-            calendar.month = newDate.getMonth()
-          }
-        }
-
-        NText {
-          text: calendar.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(calendar.year, calendar.month + 1, 1)
-            calendar.year = newDate.getFullYear()
-            calendar.month = newDate.getMonth()
-          }
-        }
-      }
-
-      NDivider {
-        Layout.fillWidth: true
-      }
-
-      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
-        }
-      }
-
-      MonthGrid {
-        id: calendar
-
-        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 {
-          function onVisibleChanged() {
-            if (root.visible) {
-              calendar.month = Time.date.getMonth()
-              calendar.year = Time.date.getFullYear()
-            }
-          }
-
-          target: root
-        }
-
-        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 === calendar.month ? Style.opacityHeavy : Style.opacityLight
-            font.pointSize: Style.fontSizeMedium * scaling
-            font.bold: model.today ? true : false
-          }
-
-          Behavior on color {
-            ColorAnimation {
-              duration: 150
-            }
-          }
-        }
-      }
-    }
-  }
-}

Widgets/NLoader.qml

@@ -17,6 +17,10 @@ Loader {
   asynchronous: true
   sourceComponent: content
 
+  // onLoaded: {
+  //   console.log("NLoader onLoaded: " + item.toString());
+  // }
+
   onActiveChanged: {
     if (active && item && item.show) {
       item.show()

shell.qml

@@ -8,6 +8,7 @@ import Quickshell.Services.Pipewire
 import qs.Widgets
 import qs.Modules.Audio
 import qs.Modules.Bar
+import qs.Modules.Calendar
 import qs.Modules.DemoPanel
 import qs.Modules.Background
 import qs.Modules.SidePanel
@@ -37,4 +38,8 @@ ShellRoot {
   AudioDeviceSelector {
     id: audioDeviceSelector
   }
+
+  Calendar {
+    id: calendar
+  }
 }