calendar

Modules/Calendar/CalendarHeader.qml

@@ -0,0 +1,73 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import qs.Components
+import qs.Config
+import qs.Helpers
+
+RowLayout {
+	spacing: 12
+
+	Rectangle {
+		Layout.preferredWidth: 40
+		Layout.preferredHeight: 40
+		color: "transparent"
+		radius: 1000
+
+		CustomText {
+			text: "◀"
+			font.pointSize: 12
+			color: DynamicColors.palette.m3onSurface
+			anchors.centerIn: parent
+		}
+
+		StateLayer {
+			onClicked: {
+				if (Calendar.displayMonth === 0) {
+					Calendar.displayMonth = 11;
+					Calendar.displayYear -= 1;
+				} else {
+					Calendar.displayMonth -= 1;
+				}
+			}
+		}
+	}
+
+	CustomText {
+		text: new Date(Calendar.displayYear, Calendar.displayMonth, 1).toLocaleDateString(
+			Qt.locale(),
+			"MMMM yyyy"
+		)
+		font.weight: 600
+		font.pointSize: 14
+		color: DynamicColors.palette.m3onSurface
+		Layout.fillWidth: true
+		horizontalAlignment: Text.AlignHCenter
+	}
+
+	Rectangle {
+		Layout.preferredWidth: 40
+		Layout.preferredHeight: 40
+		color: "transparent"
+		radius: 1000
+
+		CustomText {
+			text: "▶"
+			font.pointSize: 12
+			color: DynamicColors.palette.m3onSurface
+			anchors.centerIn: parent
+		}
+
+		StateLayer {
+			onClicked: {
+				if (Calendar.displayMonth === 11) {
+					Calendar.displayMonth = 0;
+					Calendar.displayYear += 1;
+				} else {
+					Calendar.displayMonth += 1;
+				}
+			}
+		}
+	}
+}

Modules/Calendar/CalendarPopup.qml

@@ -0,0 +1,77 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import qs.Components
+import qs.Config
+import qs.Helpers
+
+Item {
+	id: root
+
+	required property Item wrapper
+
+	implicitWidth: layout.childrenRect.width + layout.anchors.margins * 2
+	implicitHeight: layout.childrenRect.height + layout.anchors.margins * 2
+
+	ColumnLayout {
+		id: layout
+
+		anchors.centerIn: parent
+		anchors.margins: 16
+		spacing: 16
+
+		// Header with month/year and navigation
+		CalendarHeader {
+			Layout.fillWidth: true
+			Layout.preferredHeight: childrenRect.height
+		}
+
+		// Calendar grid
+		RowLayout {
+			Layout.fillWidth: true
+			Layout.preferredHeight: childrenRect.height
+			spacing: 12
+
+			ColumnLayout {
+				Layout.alignment: Qt.AlignTop
+				Layout.preferredHeight: childrenRect.height
+				Layout.preferredWidth: weekNumberColumn.width
+				spacing: 8
+
+				Item {
+					Layout.preferredHeight: dayOfWeekRow.height
+				}
+
+				WeekNumberColumn {
+					id: weekNumberColumn
+
+					Layout.alignment: Qt.AlignTop
+					Layout.preferredHeight: weekNumbers.values.length * 44
+				}
+			}
+
+			ColumnLayout {
+				Layout.alignment: Qt.AlignTop
+				Layout.fillWidth: true
+				Layout.preferredHeight: childrenRect.height
+				spacing: 8
+
+				DayOfWeekRow {
+					id: dayOfWeekRow
+					locale: Qt.locale()
+					Layout.fillWidth: true
+					Layout.preferredHeight: 30
+				}
+
+				MonthGrid {
+					locale: Qt.locale()
+
+					wrapper: root.wrapper
+					Layout.preferredWidth: childrenRect.width
+					Layout.preferredHeight: childrenRect.height
+				}
+			}
+		}
+	}
+}

Modules/Calendar/DayOfWeekRow.qml

@@ -0,0 +1,45 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import qs.Components
+import qs.Config
+import qs.Helpers
+
+RowLayout {
+    id: root
+
+    required property var locale
+
+    spacing: 4
+
+    Repeater {
+        model: 7
+
+        Item {
+            required property int index
+
+            Layout.fillWidth: true
+            Layout.preferredHeight: 30
+
+            readonly property string dayName: {
+                // Get the day name for this column
+                const dayIndex = (index + Calendar.weekStartDay) % 7;
+                return root.locale.dayName(dayIndex, Locale.ShortFormat);
+            }
+
+            CustomText {
+                anchors.centerIn: parent
+
+                text: parent.dayName
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+                color: DynamicColors.palette.m3onSurfaceVariant
+                opacity: 0.8
+                font.weight: 500
+                font.pointSize: 11
+            }
+        }
+    }
+}
+

Modules/Calendar/MonthGrid.qml

@@ -0,0 +1,117 @@
+pragma ComponentBehavior: Bound
+
+import Quickshell
+import QtQuick
+import QtQuick.Layouts
+import qs.Components
+import qs.Config
+import qs.Helpers
+
+GridLayout {
+	id: root
+
+	required property var locale
+	required property Item wrapper
+
+	columns: 7
+	rowSpacing: 4
+	columnSpacing: 4
+	uniformCellWidths: true
+	uniformCellHeights: true
+
+	component Anim: NumberAnimation {
+		target: root
+		duration: MaterialEasing.expressiveEffectsTime
+		easing.bezierCurve: MaterialEasing.expressiveEffects
+	}
+
+	Repeater {
+		id: repeater
+		model: ScriptModel {
+			values: Calendar.getWeeksForMonth(Calendar.displayMonth, Calendar.displayYear)
+
+			Behavior on values {
+				SequentialAnimation {
+					id: switchAnim
+					ParallelAnimation {
+						Anim {
+							property: "opacity"
+							from: 1.0
+							to: 0.0
+						}
+						Anim {
+							property: "scale"
+							from: 1.0
+							to: 0.8
+						}
+					}
+					PropertyAction {}
+					ParallelAnimation {
+						Anim {
+							property: "opacity"
+							from: 0.0
+							to: 1.0
+						}
+						Anim {
+							property: "scale"
+							from: 0.8
+							to: 1.0
+						}
+					}
+				}
+			}
+		}
+
+		Rectangle {
+
+			required property var modelData
+			required property int index
+
+			Layout.preferredWidth: 40
+			Layout.preferredHeight: width
+
+
+			radius: 1000
+			color: {
+				if (modelData.isToday) {
+					console.log(width);
+					return DynamicColors.palette.m3primaryContainer;
+				}
+				return "transparent";
+			}
+
+			Behavior on color {
+				ColorAnimation { duration: 200 }
+			}
+
+			CustomText {
+				anchors.centerIn: parent
+
+				text: parent.modelData.day.toString()
+				horizontalAlignment: Text.AlignHCenter
+				verticalAlignment: Text.AlignVCenter
+				opacity: parent.modelData.isCurrentMonth ? 1.0 : 0.4
+				color: {
+					if (parent.modelData.isToday) {
+						return DynamicColors.palette.m3onPrimaryContainer;
+					}
+					return DynamicColors.palette.m3onSurface;
+				}
+
+				Behavior on color {
+					ColorAnimation { duration: 200 }
+				}
+				Behavior on opacity {
+					NumberAnimation { duration: 200 }
+				}
+			}
+
+			StateLayer {
+				color: DynamicColors.palette.m3onSurface
+				onClicked: {
+					console.log(`Selected date: ${parent.modelData.day}/${parent.modelData.month + 1}/${parent.modelData.year}`);
+				}
+			}
+		}
+	}
+}

Modules/Calendar/WeekNumberColumn.qml

@@ -0,0 +1,45 @@
+pragma ComponentBehavior: Bound
+
+import Quickshell
+import QtQuick
+import QtQuick.Layouts
+import qs.Components
+import qs.Config
+import qs.Helpers
+
+ColumnLayout {
+    id: root
+
+    spacing: 4
+
+    readonly property var weekNumbers: Calendar.getWeekNumbers(Calendar.displayMonth, Calendar.displayYear)
+
+    Repeater {
+        model: ScriptModel {
+			values: root.weekNumbers
+		}
+
+        Item {
+            id: weekItem
+            Layout.preferredHeight: 40
+            Layout.preferredWidth: 20
+            Layout.alignment: Qt.AlignHCenter
+
+            required property int index
+            required property var modelData
+
+            CustomText {
+                id: weekText
+
+                anchors.centerIn: parent
+
+                text: weekItem.modelData
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+                color: DynamicColors.palette.m3onSurfaceVariant
+                opacity: 0.5
+                font.pointSize: 10
+            }
+        }
+    }
+}