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