Share one calendar with day selection and a month picker

shell/Ui/CalendarMonthPicker.qml

@@ -0,0 +1,65 @@
+import QtQuick
+import qs.Commons
+
+Item {
+  id: root
+
+  required property var calendar
+
+  readonly property int columns: 4
+  readonly property int rows: 3
+  readonly property real gap: calendar.cellSpacing * 2
+  readonly property color foreground: calendar.foreground
+
+  Grid {
+    anchors.fill: parent
+    columns: root.columns
+    spacing: root.gap
+
+    Repeater {
+      model: 12
+
+      Rectangle {
+        id: monthCell
+
+        required property int index
+
+        readonly property bool isCurrentMonth: root.calendar.today.getFullYear() === root.calendar.pickerYear
+          && root.calendar.today.getMonth() === index
+        readonly property bool isViewedMonth: root.calendar.viewYear === root.calendar.pickerYear
+          && root.calendar.viewMonth === index
+        readonly property bool isCursor: root.calendar.pickerMonth === index
+
+        width: (root.width - root.gap * (root.columns - 1)) / root.columns
+        height: (root.height - root.gap * (root.rows - 1)) / root.rows
+        radius: Style.cornerRadius
+        color: {
+          if (isCurrentMonth) return Style.selectedStateColor(root.foreground, Color.accent)
+          if (isCursor) return Style.hoverFillFor(root.foreground, Color.accent)
+          return "transparent"
+        }
+        border.width: isViewedMonth && !isCurrentMonth ? Math.max(1, Style.spacing.hairline) : 0
+        border.color: Style.selectedBorderFor(root.foreground, Color.accent)
+
+        Text {
+          anchors.centerIn: parent
+          textFormat: Text.PlainText
+          text: root.calendar.monthLabel(monthCell.index)
+          color: monthCell.isCurrentMonth ? Color.background : root.foreground
+          font.family: root.calendar.fontFamily
+          font.pixelSize: Style.font.body
+          font.letterSpacing: 1
+          font.bold: monthCell.isCurrentMonth || monthCell.isViewedMonth
+        }
+
+        MouseArea {
+          anchors.fill: parent
+          hoverEnabled: true
+          cursorShape: Qt.PointingHandCursor
+          onContainsMouseChanged: if (containsMouse) root.calendar.pickerMonth = monthCell.index
+          onClicked: root.calendar.choosePickerMonth(root.calendar.pickerYear, monthCell.index)
+        }
+      }
+    }
+  }
+}