wip
This commit is contained in:
parent
a1efbcec83
commit
797c39441f
1 changed files with 82 additions and 19 deletions
|
@ -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
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue