slopped up a calendar

hypr/hyprland.lua

@@ -367,4 +367,10 @@ hl.window_rule({
     float = true,
 })
 
+hl.layer_rule({
+    match = {namespace = "quickshell"},
+    blur = true,
+    blur_popups = true
+})
+
 require("rules")

quickshell/Bar.qml

@@ -81,7 +81,7 @@ Scope {
             readonly property HyprlandMonitor monitor: Hyprland.monitorFor(screen)
 
             // Theme
-            property color colBg: "#150d16"
+            property color colBg: Qt.rgba(0.0, 0.0, 0.0, 0.35)// "#150d16"
             property color colFg: "#f5dbc4"
             property color colMuted: "#444b6a"
             property color colCyan: "#0db9d7"
@@ -188,7 +188,21 @@ Scope {
                     }
                     text: timeStr
 
+                    Calendar {
+                        visible: clockArea.containsMouse
+                        anchorItem: clock
+                        today: sysClock.date
+                        bgColor: barRoot.colBg
+                        fgColor: barRoot.colFg
+                        mutedColor: barRoot.colMuted
+                        accentColor: barRoot.colRed
+                        fontFamily: barRoot.fontFamily
+                        fontSize: barRoot.fontSize
+                    }
+
                     MouseArea {
+                        id: clockArea
+                        hoverEnabled: true
                         anchors.fill: parent
                         onClicked: {
                             clock.timeFmt = (clock.timeFmt === "h:mm:ss AP") ? "dddd M/d/yyyy - h:mm:ss AP" : "h:mm:ss AP";

quickshell/Calendar.qml

@@ -0,0 +1,123 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Wayland
+
+PopupWindow {
+    id: calendarPopup
+
+    required property Item anchorItem
+    required property date today
+
+    property color bgColor: "#150d16"
+    property color fgColor: "#f5dbc4"
+    property color mutedColor: "#444b6a"
+    property color accentColor: "#FF2400"
+    property string fontFamily: "Inter"
+    property int fontSize: 16
+
+    property int calYear: today.getFullYear()
+    property int calMonth: today.getMonth()
+
+    function daysInMonth(year, month) {
+        return new Date(year, month + 1, 0).getDate();
+    }
+
+    function firstWeekday(year, month) {
+        return new Date(year, month, 1).getDay();
+    }
+
+    color: "transparent"
+    implicitWidth: calContent.implicitWidth + 20
+    implicitHeight: calContent.implicitHeight + 20
+
+    anchor.item: anchorItem
+    anchor.edges: Edges.Top
+    anchor.gravity: Edges.Top
+    anchor.adjustment: PopupAdjustment.SlideX | PopupAdjustment.FlipY
+    anchor.margins.bottom: 8
+
+    BackgroundEffect.blurRegion: Region {
+        item: calendarPopup.contentItem
+    }
+
+    Rectangle {
+        anchors.fill: parent
+        color: calendarPopup.bgColor
+        radius: 6
+        border.color: calendarPopup.mutedColor
+        border.width: 1
+
+        ColumnLayout {
+            id: calContent
+            anchors.centerIn: parent
+            spacing: 6
+
+            Text {
+                Layout.alignment: Qt.AlignHCenter
+                text: Qt.formatDate(new Date(calendarPopup.calYear, calendarPopup.calMonth, 1), "MMMM yyyy")
+                color: calendarPopup.fgColor
+                font {
+                    family: calendarPopup.fontFamily
+                    pixelSize: calendarPopup.fontSize
+                    bold: true
+                }
+            }
+
+            GridLayout {
+                columns: 7
+                rowSpacing: 4
+                columnSpacing: 6
+
+                Repeater {
+                    model: ["S", "M", "T", "W", "T", "F", "S"]
+                    delegate: Text {
+                        Layout.preferredWidth: 22
+                        Layout.preferredHeight: 20
+                        horizontalAlignment: Text.AlignHCenter
+                        text: modelData
+                        color: calendarPopup.mutedColor
+                        font {
+                            family: calendarPopup.fontFamily
+                            pixelSize: calendarPopup.fontSize - 3
+                            bold: true
+                        }
+                    }
+                }
+
+                Repeater {
+                    model: calendarPopup.firstWeekday(calendarPopup.calYear, calendarPopup.calMonth)
+                    delegate: Item {
+                        Layout.preferredWidth: 22
+                        Layout.preferredHeight: 22
+                    }
+                }
+
+                Repeater {
+                    model: calendarPopup.daysInMonth(calendarPopup.calYear, calendarPopup.calMonth)
+                    delegate: Rectangle {
+                        id: dayCell
+                        Layout.preferredWidth: 22
+                        Layout.preferredHeight: 22
+                        radius: 4
+
+                        property int dayNum: index + 1
+                        property bool isToday: dayNum === calendarPopup.today.getDate() && calendarPopup.calMonth === calendarPopup.today.getMonth() && calendarPopup.calYear === calendarPopup.today.getFullYear()
+
+                        color: isToday ? calendarPopup.accentColor : "transparent"
+
+                        Text {
+                            anchors.centerIn: parent
+                            text: dayCell.dayNum
+                            color: calendarPopup.fgColor
+                            font {
+                                family: calendarPopup.fontFamily
+                                pixelSize: calendarPopup.fontSize
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}