How to create a qml pyside6 calender widget? - qt

Question

0Based on https://stackoverflow.com/a/72465868/10985257 I wanted to create Widget, which allows me to click on a calender MonthGrid and read the clicked date, as a bonus the clicked date should be highlighted. My lazy attempt was following:
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
ApplicationWindow {
id: mainFrame
width: 160
height: 160
visible: true
title: qsTr("CAL TEST")
Rectangle {
id: test
}
ColumnLayout {
DayOfWeekRow {
locale: grid.locale
Layout.fillWidth: true
}
MonthGrid {
id: grid
month: Calendar.December // this is how the Calendar can be used
year: 2022
locale: Qt.locale("de_DE")
Layout.fillWidth: true
onClicked: {
console.log("TEST")
}
}
}
}
So far it seems to work, but I struggle with the date. From the Documentation I've red that the signal Clicked has a parameter of the type date with the name date, but I don't know how to access the parameter.
Maybe my approach is to lazy, and I need a complete different approach?

Answer 1

In the following code snippet, I refactored a DatePicker component which is made up of MonthGrid and DayOfWeekRow. The component reacts to the MonthGrid.onClicked event and saves a copy of the date clicked. A custom delegate is provided so that we can highlight the selected date in a reddish-pink border.
import QtQuick
import QtQuick.Controls
Page {
background: Rectangle { color: "#8ac" }
Frame {
anchors.centerIn: parent
background: Rectangle {
color: "#ffe"
border.color: "grey"
radius: 5
}
MyDatePicker {
id: datePicker
month: Calendar.December
year: 2022
locale: Qt.locale("de_DE")
}
}
footer: Frame {
background: Rectangle {
color: "#ffe"
}
Text {
anchors.horizontalCenter: parent.horizontalCenter
text: datePicker.selectedDate
}
}
}
// MyDatePicker.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
ColumnLayout {
id: datePicker
property var selectedTime: 0
property date selectedDate: new Date(selectedTime)
property alias month: grid.month
property alias year: grid.year
property alias locale: grid.locale
DayOfWeekRow {
locale: grid.locale
Layout.fillWidth: true
}
MonthGrid {
id: grid
month: Calendar.December
year: 2022
locale: Qt.locale("de_DE")
Layout.fillWidth: true
delegate: Text {
property MonthGrid control: grid
property bool isCurrentItem: model.date.getTime() === selectedTime
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
opacity: model.month === control.month ? 1 : 0.5
text: day
font: control.font
Rectangle {
anchors.fill: parent
anchors.margins: -4
radius: 4
visible: isCurrentItem
color: "#fcc"
z: -2
}
}
onClicked: function (date) {
selectedTime = date.getTime();
}
}
}
You can Try it Online!

Answer 2

The QML signal documentation states the following:
Signals might have parameters. To access those, you should assign a
function to the handler. Both arrow functions and anonymous functions
work.
So you can either use
onClicked: (date) => { ... }
or
onClicked: function (date) { ... }
The QML Date documentation is stating the following:
The QML Date object extends the JS Date object with locale aware
functions.
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Window {
id: root
width: 800
height: 600
visible: true
ColumnLayout {
anchors.centerIn: parent
DayOfWeekRow {
locale: grid.locale
Layout.fillWidth: true
}
MonthGrid {
id: grid
month: Calendar.December // this is how the Calendar can be used
year: 2022
locale: Qt.locale("de_DE")
Layout.fillWidth: true
onClicked: function (date) {
console.log("TEST", date)
console.log("date", date.getDate())
console.log("day", date.getDay())
console.log("month", date.getMonth())
console.log("year", date.getFullYear())
}
}
}
}