diff --git a/views/calendar/qml/MultiDayView.qml b/views/calendar/qml/MultiDayView.qml index bcd9a31c..5df088eb 100644 --- a/views/calendar/qml/MultiDayView.qml +++ b/views/calendar/qml/MultiDayView.qml @@ -1,187 +1,201 @@ /* * Copyright (C) 2018 Michael Bohlender, * Copyright (C) 2018 Christian Mollekopf, * * This program is free software; you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation; either version 2 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License along * with this program; if not, write to the Free Software Foundation, Inc., * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import QtQuick 2.4 import QtQuick.Layouts 1.1 import QtQuick.Controls 2.2 import org.kube.framework 1.0 as Kube import "dateutils.js" as DateUtils Item { id: root property int daysToShow property int daysPerRow: daysToShow property var dayWidth property date currentDate property date startDate property var calendarFilter property bool paintGrid: false property bool showDayIndicator: false property var filter property alias dayHeaderDelegate: dayLabels.delegate property Component weekHeaderDelegate //Internal property int numberOfLinesShown: 0 property int numberOfRows: (daysToShow / daysPerRow) property var dayHeight: height / numberOfRows width: root.dayWidth * root.daysPerRow implicitHeight: (numberOfRows > 1 ? Kube.Units.gridUnit * 10 * numberOfRows: numberOfLinesShown * Kube.Units.gridUnit) + dayLabels.height height: implicitHeight visible: numberOfRows > 1 || numberOfLinesShown Column { anchors { fill: parent } DayLabels { id: dayLabels startDate: root.startDate dayWidth: root.dayWidth daysToShow: root.daysPerRow } //Weeks Repeater { model: Kube.MultiDayEventModel { model: Kube.EventModel { start: root.startDate length: root.daysToShow calendarFilter: root.calendarFilter filter: root.filter ? root.filter : {} } // daysPerRow: root.daysPerRow //Hardcoded to 7 } //One row => one week Row { width: parent.width Loader { id: weekHeader height: root.dayHeight sourceComponent: root.weekHeaderDelegate property var startDate: weekStartDate } Item { id: dayDelegate height: root.dayHeight width: parent.width - weekHeader.width property var startDate: weekStartDate //Grid Row { height: parent.height Repeater { id: gridRepeater model: root.daysPerRow Item { height: parent.height width: root.dayWidth property var date: DateUtils.addDaysToDate(dayDelegate.startDate, modelData) - property bool isInPast: DateUtils.roundToDay(root.currentDate) >= DateUtils.roundToDay(date) + property bool isInPast: DateUtils.roundToDay(date) < DateUtils.roundToDay(root.currentDate) + property bool isToday: DateUtils.sameDay(root.currentDate, date) //Dimm days in the past Rectangle { anchors.fill: parent color: Kube.Colors.buttonColor opacity: 0.2 visible: isInPast } //Grid Rectangle { anchors.fill: parent visible: root.paintGrid color: "transparent" border.width: 1 border.color: Kube.Colors.lightgrey } //Day number Label { visible: root.showDayIndicator anchors { top: parent.top left: parent.left topMargin: Kube.Units.smallSpacing leftMargin: Kube.Units.smallSpacing } text: date.getDate() font.bold: true + color: isInPast ? Kube.Colors.disabledTextColor : Kube.Colors.textColor + Rectangle { + anchors { + left: parent.left + right: parent.right + bottom: parent.bottom + } + width: Kube.Units.gridUnit + height: 3 + color: Kube.Colors.plasmaBlue + opacity: 0.6 + visible: isToday + } } } } } Column { anchors { fill: parent //Offset for date topMargin: root.showDayIndicator ? Kube.Units.gridUnit + Kube.Units.smallSpacing : 0 } Repeater { id: linesRepeater model: events onCountChanged: { root.numberOfLinesShown = count } Item { id: line height: Kube.Units.gridUnit width: parent.width //Events Repeater { id: eventsRepeater model: modelData Rectangle { x: root.dayWidth * modelData.starts y: 0 width: root.dayWidth * modelData.duration height: parent.height color: modelData.color radius: 2 border.width: 1 border.color: Kube.Colors.viewBackgroundColor Kube.Label { anchors { fill: parent leftMargin: Kube.Units.smallSpacing rightMargin: Kube.Units.smallSpacing } color: Kube.Colors.highlightedTextColor text: modelData.text elide: Text.ElideRight } } } } } } } } } } } diff --git a/views/calendar/qml/dateutils.js b/views/calendar/qml/dateutils.js index ac6b5b50..ed56df98 100644 --- a/views/calendar/qml/dateutils.js +++ b/views/calendar/qml/dateutils.js @@ -1,42 +1,46 @@ /** * Returns the week number for this date. dowOffset is the day of week the week * "starts" on for your locale - it can be from 0 to 6. If dowOffset is 1 (Monday), * the week returned is the ISO 8601 week number. * @param int dowOffset * @return int */ function getWeek(date, dowOffset) { var newYear = new Date(date.getFullYear(),0,1); var day = newYear.getDay() - dowOffset; //the day of week the year begins on day = (day >= 0 ? day : day + 7); var daynum = Math.floor((date.getTime() - newYear.getTime() - (date.getTimezoneOffset()-newYear.getTimezoneOffset())*60000)/86400000) + 1; var weeknum; //if the year starts before the middle of a week if(day < 4) { weeknum = Math.floor((daynum+day-1)/7) + 1; if(weeknum > 52) { nYear = new Date(date.getFullYear() + 1,0,1); nday = nYear.getDay() - dowOffset; nday = nday >= 0 ? nday : nday + 7; /*if the next year starts before the middle of the week, it is week #1 of that year*/ weeknum = nday < 4 ? 1 : 53; } } else { weeknum = Math.floor((daynum+day-1)/7); } return weeknum; } function roundToDay(date) { return new Date(date.getFullYear(), date.getMonth(), date.getDate()) } function addDaysToDate(date, days) { var date = new Date(date); date.setDate(date.getDate() + days); return date; } + +function sameDay(date1, date2) { + return date1.getFullYear() == date2.getFullYear() && date1.getMonth() == date2.getMonth() && date1.getDate() == date2.getDate() +}