2 files changed, 128 insertions, 30 deletions

diff --git a/views/calendar/qml/DateSelector.qml b/views/calendar/qml/DateSelector.qml
new file mode 100644
index 00000000..2a341c41
--- /dev/null
+++ b/views/calendar/qml/DateSelector.qml
@@ -0,0 +1,85 @@
+/*
+ *  Copyright (C) 2018 Christian Mollekopf, <mollekopf@kolabsys.com>
+ *
+ *  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.Controls 2.2
+import Qt.labs.calendar 1.0
+
+import org.kube.framework 1.0 as Kube
+
+Column {
+    id: root
+    property date selectedDate
+    spacing: Kube.Units.smallSpacing
+
+    Row {
+        Kube.IconButton {
+            color: Kube.Colors.darkBackgroundColor
+            iconName: Kube.Icons.goBack_inverted
+            onClicked: {
+                var dateOffset = (24*60*60*1000) * 7; //7 days
+                var myDate = root.selectedDate;
+                myDate.setTime(myDate.getTime() - dateOffset);
+                root.selectedDate = myDate
+            }
+        }
+        Kube.Label {
+            anchors.verticalCenter: parent.verticalCenter
+            color: Kube.Colors.highlightedTextColor
+            font.bold: true
+            text: root.selectedDate.toLocaleString(Qt.locale(), "MMMM yyyy")
+        }
+        Kube.IconButton {
+            color: Kube.Colors.darkBackgroundColor
+            iconName: Kube.Icons.goNext_inverted
+            onClicked: {
+                var dateOffset = (24*60*60*1000) * 7; //7 days
+                var myDate = root.selectedDate;
+                myDate.setTime(myDate.getTime() + dateOffset);
+                root.selectedDate = myDate
+            }
+        }
+    }
+
+    MonthGrid {
+        id: grid
+        month: root.selectedDate.getMonth()
+        year: root.selectedDate.getFullYear()
+        locale: Qt.locale()
+
+        delegate: Text {
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            opacity: model.month === grid.month ? 1 : 0.5
+            text: model.day
+            font: grid.font
+            color: Kube.Colors.highlightedTextColor
+            Rectangle {
+                anchors {
+                    left: parent.left
+                    right: parent.right
+                    bottom: parent.bottom
+                }
+                width: Kube.Units.gridUnit
+                height: 1
+                color: Kube.Colors.plasmaBlue
+                opacity: 0.6
+                visible: model.day === root.selectedDate.getDate() && model.month === root.selectedDate.getMonth()
+            }
+        }
+    }
+}
diff --git a/views/calendar/qml/View.qml b/views/calendar/qml/View.qml
index 917d0c80..601ca0cf 100644
--- a/views/calendar/qml/View.qml
+++ b/views/calendar/qml/View.qml
@@ -27,6 +27,7 @@ RowLayout {
     id: root
 
     property date currentDate: new Date()
+    property date selectedDate: currentDate
     property bool autoUpdateDate: true
 
     Timer {
@@ -72,12 +73,10 @@ RowLayout {
             DateView {
                 date: root.currentDate
             }
-                    color: Kube.Colors.highlightedTextColor
-                }
-            }
+
         }
 
-        Column {
+        ColumnLayout {
             anchors {
                 bottom: parent.bottom
                 left: newEventButton.left
@@ -85,36 +84,50 @@ RowLayout {
                 bottomMargin: Kube.Units.largeSpacing
             }
 
-            spacing: Kube.Units.smallSpacing
+            spacing: Kube.Units.largeSpacing
 
-            Repeater {
-                model: Kube.EntityModel {
-                    type: "calendar"
-                    roles: ["name", "color"]
+            DateSelector {
+                selectedDate: root.selectedDate
+                onSelectedDateChanged: {
+                    root.selectedDate = selectedDate
                 }
-                delegate: Item {
-                    width: parent.width - Kube.Units.largeSpacing
-                    height: Kube.Units.gridUnit
-                    Row {
-                        spacing: Kube.Units.smallSpacing
-                        Kube.CheckBox {
-                            opacity: 0.9
-                            checked: true
+            }
+
+            Column {
+                anchors {
+                    left: parent.left
+                    right: parent.right
+                }
+                spacing: Kube.Units.smallSpacing
+                Repeater {
+                    model: Kube.EntityModel {
+                        type: "calendar"
+                        roles: ["name", "color"]
+                    }
+                    delegate: Item {
+                        width: parent.width - Kube.Units.largeSpacing
+                        height: Kube.Units.gridUnit
+                        Row {
+                            spacing: Kube.Units.smallSpacing
+                            Kube.CheckBox {
+                                opacity: 0.9
+                                checked: true
+                            }
+                            Kube.Label {
+                                text: model.name
+                                color: Kube.Colors.highlightedTextColor
+                            }
                         }
-                        Kube.Label {
-                            text: model.name
-                            color: Kube.Colors.highlightedTextColor
+                        Rectangle {
+                            anchors.right: parent.right
+                            anchors.verticalCenter: parent.verticalCenter
+                            width: Kube.Units.gridUnit
+                            height: width
+                            radius: width / 2
+                            color: model.color
+                            opacity: 0.9
                         }
                     }
-                    Rectangle {
-                        anchors.right: parent.right
-                        anchors.verticalCenter: parent.verticalCenter
-                        width: Kube.Units.gridUnit
-                        height: width
-                        radius: width / 2
-                        color: model.color
-                        opacity: 0.9
-                    }
                 }
             }
         }
@@ -123,6 +136,6 @@ RowLayout {
     WeekView {
         Layout.fillHeight: true
         Layout.fillWidth: true
-        currentDate: root.currentDate
+        currentDate: root.selectedDate
     }
 }