Calendar color indicator

2 files changed, 30 insertions, 9 deletions

diff --git a/views/calendar/main.qml b/views/calendar/main.qml
index 07ee6302..1e7e8eac 100644
--- a/views/calendar/main.qml
+++ b/views/calendar/main.qml
@@ -49,6 +49,7 @@ ApplicationWindow {
                 id: "calendar1",
                 resource: "caldavresource",
                 name: "Test Calendar",
+                color: "#af1a6a",
                 events: [
                     {
                         resource: "caldavresource",
@@ -136,6 +137,12 @@ ApplicationWindow {
                         allDay: true,
                     },
                 ],
+            },
+            {
+                id: "calendar2",
+                resource: "caldavresource",
+                name: "Test Calendar2",
+                color: "#f67400"
             }],
         }
         TestStore.setup(initialState)
diff --git a/views/calendar/qml/View.qml b/views/calendar/qml/View.qml
index d5f26505..2a819ab6 100644
--- a/views/calendar/qml/View.qml
+++ b/views/calendar/qml/View.qml
@@ -97,6 +97,7 @@ RowLayout {
             anchors {
                 bottom: parent.bottom
                 left: newEventButton.left
+                right: parent.right
                 bottomMargin: Kube.Units.largeSpacing
             }
 
@@ -105,17 +106,30 @@ RowLayout {
             Repeater {
                 model: Kube.EntityModel {
                     type: "calendar"
-                    roles: ["name"]
+                    roles: ["name", "color"]
                 }
-                delegate: Row {
-                    spacing: Kube.Units.smallSpacing
-                    Kube.CheckBox {
-                        opacity: 0.9
-                        checked: true
+                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
                     }
                 }
             }