dashboard: add calendar

modules/dashboard/Dash.qml

@@ -27,18 +27,18 @@ GridLayout {
 
     Rect {
         Layout.row: 1
+        Layout.fillHeight: true
 
         DateTime {}
     }
 
     Rect {
-        // text: "calendar"
-
         Layout.row: 1
         Layout.column: 1
         Layout.columnSpan: 3
         Layout.fillWidth: true
-        Layout.fillHeight: true
+
+        Calendar {}
     }
 
     Rect {

modules/dashboard/dash/Calendar.qml

@@ -0,0 +1,65 @@
+import "root:/widgets"
+import "root:/services"
+import "root:/config"
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+ColumnLayout {
+    id: root
+
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.margins: Appearance.padding.large
+    spacing: Appearance.spacing.small
+
+    DayOfWeekRow {
+        id: days
+
+        Layout.topMargin: Appearance.padding.large
+        Layout.fillWidth: true
+
+        font.family: Appearance.font.family.sans
+        font.weight: 500
+
+        // delegate: StyledText {}
+    }
+
+    MonthGrid {
+        id: grid
+
+        Layout.bottomMargin: Appearance.padding.large
+        Layout.fillWidth: true
+
+        spacing: 3
+
+        delegate: Item {
+            id: day
+
+            required property var model
+
+            implicitWidth: implicitHeight
+            implicitHeight: text.implicitHeight + Appearance.padding.small * 2
+
+            StyledRect {
+                anchors.centerIn: parent
+
+                implicitWidth: parent.implicitHeight
+                implicitHeight: parent.implicitHeight
+
+                radius: Appearance.rounding.full
+                color: model.today ? Colours.palette.m3primary : "transparent"
+
+                StyledText {
+                    id: text
+
+                    anchors.centerIn: parent
+
+                    horizontalAlignment: Text.AlignHCenter
+                    text: grid.locale.toString(day.model.date, "d")
+                    color: day.model.today ? Colours.palette.m3onPrimary : day.model.month === grid.month ? Colours.palette.m3onSurface : Colours.palette.m3outline
+                }
+            }
+        }
+    }
+}

modules/dashboard/dash/DateTime.qml

@@ -6,8 +6,9 @@ import QtQuick
 Item {
     id: root
 
+    anchors.top: parent.top
+    anchors.bottom: parent.bottom
     implicitWidth: DashboardConfig.sizes.dateTimeWidth
-    implicitHeight: date.y + date.implicitHeight + Appearance.padding.large * 2
 
     StyledText {
         id: hours
@@ -15,7 +16,7 @@ Item {
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.top: parent.top
-        anchors.topMargin: Appearance.padding.large * 2
+        anchors.topMargin: (root.height - (hours.implicitHeight + sep.implicitHeight + sep.anchors.topMargin + mins.implicitHeight + mins.anchors.topMargin + date.implicitHeight + date.anchors.topMargin)) / 2
 
         horizontalAlignment: Text.AlignHCenter
         text: Time.format("HH")