Share one calendar with day selection and a month picker

2026-09-24 12:37:27 -04:00
1 parent d59725f193
commit 3164e50b36
@@ -0,0 +1,176 @@
+import QtQuick
+import qs.Commons
+import "CalendarModel.js" as CalendarModel
+
+Item {
+  id: root
+
+  required property var calendar
+
+  readonly property var weeks: CalendarModel.monthGrid(calendar.viewYear, calendar.viewMonth,
+    calendar.weekStart, calendar.todayKey, calendar.selectedKey)
+  readonly property var weekdays: CalendarModel.weekdayOrder(calendar.weekStart)
+  readonly property color foreground: calendar.foreground
+  readonly property real headerHeight: Style.space(16)
+
+  width: grid.width
+  height: grid.height
+
+  Column {
+    id: grid
+    spacing: Style.space(3)
+
+    Row {
+      id: headerRow
+      spacing: root.calendar.cellSpacing
+
+      Rectangle {
+        visible: root.calendar.showWeekNumbers
+        width: root.calendar.weekColumnWidth
+        height: root.headerHeight
+        radius: Style.cornerRadius
+        color: weekHeaderMouse.containsMouse ? Style.hoverFillFor(root.foreground, Color.accent) : "transparent"
+
+        Text {
+          anchors.centerIn: parent
+          text: "W"
+          color: weekHeaderMouse.containsMouse
+            ? Style.hoverStateColor(root.foreground, Color.accent)
+            : Qt.darker(root.foreground, 1.9)
+          font.family: root.calendar.fontFamily
+          font.pixelSize: Style.font.caption
+          font.letterSpacing: 1
+          font.bold: true
+        }
+
+        MouseArea {
+          id: weekHeaderMouse
+          anchors.fill: parent
+          hoverEnabled: true
+          cursorShape: Qt.PointingHandCursor
+          onClicked: root.calendar.weekHeaderClicked()
+        }
+
+        PanelToolTip {
+          visible: weekHeaderMouse.containsMouse && root.calendar.weekHeaderTooltip !== ""
+          text: root.calendar.weekHeaderTooltip
+          fontFamily: root.calendar.fontFamily
+        }
+      }
+
+      Item {
+        visible: root.calendar.showWeekNumbers
+        width: root.calendar.gutterWidth
+        height: root.headerHeight
+      }
+
+      Repeater {
+        model: root.weekdays
+
+        Text {
+          required property var modelData
+          width: root.calendar.cellWidth
+          height: root.headerHeight
+          horizontalAlignment: Text.AlignHCenter
+          verticalAlignment: Text.AlignVCenter
+          textFormat: Text.PlainText
+          text: root.calendar.weekdayLabel(modelData)
+          color: root.calendar.mutedForeground
+          font.family: root.calendar.fontFamily
+          font.pixelSize: Style.font.caption
+          font.letterSpacing: 1
+          font.bold: true
+        }
+      }
+    }
+
+    Repeater {
+      model: root.weeks
+
+      Row {
+        required property var modelData
+        spacing: root.calendar.cellSpacing
+
+        Text {
+          visible: root.calendar.showWeekNumbers
+          width: root.calendar.weekColumnWidth
+          height: root.calendar.cellHeight
+          horizontalAlignment: Text.AlignHCenter
+          verticalAlignment: Text.AlignVCenter
+          textFormat: Text.PlainText
+          text: modelData.week
+          color: Qt.darker(root.foreground, 1.9)
+          font.family: root.calendar.fontFamily
+          font.pixelSize: Style.font.caption
+        }
+
+        Item {
+          visible: root.calendar.showWeekNumbers
+          width: root.calendar.gutterWidth
+          height: root.calendar.cellHeight
+        }
+
+        Repeater {
+          model: modelData.days
+
+          DayCell {}
+        }
+      }
+    }
+  }
+
+  Rectangle {
+    visible: root.calendar.showWeekNumbers
+    x: root.calendar.weekColumnWidth + root.calendar.cellSpacing
+      + Math.round((root.calendar.gutterWidth - width) / 2)
+    y: headerRow.height + grid.spacing
+    width: Style.spacing.hairline
+    height: grid.height - headerRow.height - grid.spacing
+    color: root.foreground
+    opacity: 0.1
+  }
+
+  component DayCell: Rectangle {
+    id: cell
+
+    required property var modelData
+
+    readonly property color todayFill: Style.selectedStateColor(root.foreground, Color.accent)
+    readonly property color dayColor: {
+      if (modelData.today) return Color.background
+      if (!modelData.inMonth) return root.foreground
+      return modelData.weekend ? Qt.darker(root.foreground, 1.45) : root.foreground
+    }
+
+    width: root.calendar.cellWidth
+    height: root.calendar.cellHeight
+    radius: Style.cornerRadius
+    color: {
+      if (modelData.today) return todayFill
+      if (dayMouse.containsMouse) return Style.hoverFillFor(root.foreground, Color.accent)
+      if (modelData.selected) return Style.selectedFillFor(root.foreground, Color.accent)
+      return "transparent"
+    }
+    border.width: modelData.selected && !modelData.today ? Math.max(1, Style.spacing.hairline) : 0
+    border.color: Style.selectedBorderFor(root.foreground, Color.accent)
+
+    Text {
+      anchors.centerIn: parent
+      textFormat: Text.PlainText
+      text: cell.modelData.day
+      color: cell.dayColor
+      opacity: cell.modelData.inMonth || cell.modelData.today ? 1 : 0.3
+      font.family: root.calendar.fontFamily
+      font.pixelSize: Style.font.body
+      font.bold: cell.modelData.today || cell.modelData.selected
+    }
+
+    MouseArea {
+      id: dayMouse
+      anchors.fill: parent
+      hoverEnabled: true
+      cursorShape: Qt.PointingHandCursor
+      onClicked: root.calendar.selectDay(cell.modelData.year, cell.modelData.month, cell.modelData.day)
+    }
+  }
+}