This commit is contained in:
pika 2025-06-10 17:16:39 +02:00
parent a1efbcec83
commit 797c39441f

View file

@ -11,6 +11,18 @@ Column {
property date currentDate: new Date()
property bool isCurrentMonth: true
property string currentTime: Qt.formatDateTime(new Date(), "HH:mm:ss")
property int currentYear: new Date().getFullYear()
// Update time every second
Timer {
interval: 1000
running: true
repeat: true
onTriggered: {
root.currentTime = Qt.formatDateTime(new Date(), "HH:mm:ss")
}
}
// Time and Date header
Column {
@ -19,7 +31,7 @@ Column {
StyledText {
anchors.horizontalCenter: parent.horizontalCenter
text: Qt.formatDateTime(new Date(), "HH:mm:ss")
text: root.currentTime
font.pointSize: Appearance.font.size.larger
font.family: Appearance.font.family.mono
}
@ -28,10 +40,38 @@ Column {
anchors.horizontalCenter: parent.horizontalCenter
spacing: Appearance.spacing.small
StyledText {
text: Qt.formatDateTime(root.currentDate, "yyyy")
font.pointSize: Appearance.font.size.large
font.weight: 700
Row {
spacing: Appearance.spacing.small
MaterialIcon {
text: "chevron_left"
color: Colours.palette.m3onSurfaceVariant
MouseArea {
anchors.fill: parent
onClicked: {
root.currentYear--
root.currentDate = new Date(root.currentYear, monthView.currentIndex, 1)
}
}
}
StyledText {
text: root.currentYear
font.pointSize: Appearance.font.size.large
font.weight: 700
}
MaterialIcon {
text: "chevron_right"
color: Colours.palette.m3onSurfaceVariant
MouseArea {
anchors.fill: parent
onClicked: {
root.currentYear++
root.currentDate = new Date(root.currentYear, monthView.currentIndex, 1)
}
}
}
}
Row {
@ -70,15 +110,19 @@ Column {
}
// Calendar grid
Item {
width: 250
height: 200
Rectangle {
width: 280
height: 250
anchors.horizontalCenter: parent.horizontalCenter
clip: true
color: "transparent"
border.color: Colours.palette.m3outline
border.width: 1
radius: 8
ListView {
id: monthView
anchors.fill: parent
anchors.margins: 12
orientation: ListView.Horizontal
snapMode: ListView.SnapOneItem
highlightRangeMode: ListView.StrictlyEnforceRange
@ -112,26 +156,41 @@ Column {
// Calendar days
Repeater {
model: {
const firstDay = new Date(new Date().getFullYear(), monthView.currentIndex, 1);
const lastDay = new Date(new Date().getFullYear(), monthView.currentIndex + 1, 0);
const firstDay = new Date(root.currentYear, monthView.currentIndex, 1);
const lastDay = new Date(root.currentYear, monthView.currentIndex + 1, 0);
const daysInMonth = lastDay.getDate();
const firstDayOfWeek = firstDay.getDay() || 7; // Convert Sunday (0) to 7
const today = new Date();
let days = [];
// Add empty cells for days before the first of the month
for (let i = 1; i < firstDayOfWeek; i++) {
days.push({ day: "", isCurrentMonth: false });
// Add previous month's days
const prevMonthLastDay = new Date(root.currentYear, monthView.currentIndex, 0).getDate();
for (let i = firstDayOfWeek - 1; i > 0; i--) {
days.push({
day: prevMonthLastDay - i + 1,
isCurrentMonth: false,
isNextMonth: false
});
}
// Add days of the current month
for (let i = 1; i <= daysInMonth; i++) {
const isToday = i === today.getDate() &&
monthView.currentIndex === today.getMonth() &&
new Date().getFullYear() === today.getFullYear();
root.currentYear === today.getFullYear();
days.push({
day: i,
isCurrentMonth: true,
isToday: isToday
isToday: isToday,
isNextMonth: false
});
}
// Add next month's days
const remainingCells = Math.ceil((firstDayOfWeek - 1 + daysInMonth) / 7) * 7 - days.length;
for (let i = 1; i <= remainingCells; i++) {
days.push({
day: i,
isCurrentMonth: false,
isNextMonth: true
});
}
return days;
@ -147,19 +206,22 @@ Column {
anchors.centerIn: parent
text: modelData.day
font.pointSize: Appearance.font.size.small
font.family: Appearance.font.family.mono
color: modelData.isToday ?
Colours.palette.m3onPrimary :
modelData.isCurrentMonth ?
Colours.palette.m3onSurface :
Colours.palette.m3outline
modelData.isNextMonth ?
"#404040" :
"#505050"
}
}
}
}
onCurrentIndexChanged: {
root.currentDate = new Date(new Date().getFullYear(), currentIndex, 1)
root.isCurrentMonth = currentIndex === new Date().getMonth()
root.currentDate = new Date(root.currentYear, currentIndex, 1)
root.isCurrentMonth = currentIndex === new Date().getMonth() && root.currentYear === new Date().getFullYear()
}
}
}
@ -170,6 +232,7 @@ Column {
function onVisibleChanged() {
if (!root.parent.visible) {
monthView.currentIndex = new Date().getMonth()
root.currentYear = new Date().getFullYear()
root.currentDate = new Date()
root.isCurrentMonth = true
}