Created DateRangeSelector

Created a new QML component called DateRangeSelector.qml and moved most
of the logic from CalendarGrid.qml to it

src/Project-Orion/CMakeLists.txt

@@ -27,6 +27,7 @@ qt_add_qml_module(appProject-Orion
         RESOURCES resources.qrc
         QML_FILES CalendarGrid.qml
         QML_FILES UserConfiguration.qml
+        QML_FILES DateRangeSelector.qml
 )
 
 # Qt for iOS sets MACOSX_BUNDLE_GUI_IDENTIFIER automatically since Qt 6.1.

src/Project-Orion/CalendarGrid.qml

@@ -5,8 +5,8 @@ import QtQml
 
 Flickable {
     id: flickableRoot
-    width: 200
-    height: 200
+    width: 500
+    height: 500
 
     required property date currentDate
     required property SystemPalette calendarActivePalette;
@@ -15,6 +15,11 @@ Flickable {
     GridLayout {
         columns: 1
 
+        Label
+        {
+            text: currentDate.getFullYear()
+        }
+
         DayOfWeekRow {
             locale: grid.locale
             Layout.fillWidth: true

src/Project-Orion/DateRangeSelector.qml

@@ -0,0 +1,71 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+Dialog {
+    width: 300
+    height: 300
+
+    required property date currentDate
+    required property SystemPalette calendarActivePalette;
+    required property color disabledTextColor;
+
+    GridLayout {
+        columns: 1
+
+        Label
+        {
+            font.pixelSize: 22
+            text: getMyDate()
+        }
+
+        DayOfWeekRow {
+            locale: grid.locale
+            Layout.fillWidth: true
+        }
+
+        MonthGrid
+        {
+
+            id: grid
+            month: Calendar.January
+            year: currentDate.getFullYear()
+            locale: Qt.locale("en_US")
+
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            delegate: Rectangle {
+                border.color: model.day === currentDate.getDay() ? "green": "transparent"
+                border.width: 3
+                width: 30
+                height: 20
+
+                MouseArea {
+                        anchors.fill: parent
+                        onClicked: {
+                            if (model.day === 11)
+                                console.log(model.day)
+                        }
+                    }
+
+                Text {
+                    anchors.centerIn: parent
+                    font.pixelSize: 12
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                    text: model.day
+                    color: model.month === currentDate.getMonth() ? calendarActivePalette.text : disabledTextColor
+                }
+
+                required property var model
+            }
+
+            property date currentlySelectedDate: currentDate;
+        }
+    }
+
+    function getMyDate()
+    {
+        return Qt.formatDateTime(currentDate, "MMM yyyy");
+    }
+}

src/Project-Orion/UserConfiguration.qml

@@ -1,12 +1,13 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
+
 Dialog {
     id: userDialog
     modal: true
     title: "Configure a new user"
     width: 600
-    height: 400
+    height: 200
 
     GridLayout {
         id: userInformationGrid
@@ -36,6 +37,8 @@ Dialog {
             readOnly: true
             color: configActivePalette.text
             placeholderText: "<empty>"
+
+            onPressed: rangeSelector.open()
         }
 
         Label {
@@ -49,12 +52,23 @@ Dialog {
             readOnly: true
             color: configActivePalette.text
             placeholderText: "<empty>"
+
+            onPressed: rangeSelector.open()
         }
     }
 
     property date dateOfBirth: new Date()
     property date dateOfDeath: new Date()
 
+    DateRangeSelector
+    {
+        id: rangeSelector
+
+        currentDate: dateOfBirth
+        calendarActivePalette: configActivePalette;
+        disabledTextColor: configDisabledTextColor;
+    }
+
     required property SystemPalette configActivePalette;
     required property color configDisabledTextColor;