Bdtjtk

I am looking to change the colour of a Calendar cell from a Boolean within an array (calendarListModel).

Here's a sample of the array:

[

{"date":1544443200000,"name":"Edward","status":1},

{"date":1544529600000,"name":"Katie","status":0},

{"date":1544616000000,"name":"Claire","status":1}

]

What I want to do is change the colour of my calendar marker depending on the Boolean value within calendarListModel ("status": 0 or 1).

The code for my marker is;

Rectangle {

    id: calendarMarker

    visible: arrayFromFireBase.indexOf(styleData.date.getTime()) > -1

    anchors.fill: parent

    color:  "blue"

} 

I have tried making changes to the colour of the Rectangle with things such as calendarListModel.status ? "blue" : "red" amongst other variations but am either getting each cell as blue or red, or none at all?

Question: What would be the best way to change the colour based on a true/false value from the array?

I am using Calendar from the QtQuick.Controls to display dates and CalendarStyle from QtQuick.Controls.Styles to assign a custom style. I'm also using the V-Play sdk.

Here's a minimal, complete, and verifiable example of what I'm currently doing:

import VPlayApps 1.0

import QtQuick 2.2

import QtQuick.Controls 1.4

import QtQuick.Controls.Styles 1.1



App {

    id: app



    //  this model is read from a firebase db using v-play

    property var calendarListModel: [

        {"date":1544443200000,"name":"Edward","status":1},

        {"date":1544529600000,"name":"Katie","status":0},

        {"date":1547182800000,"name":"Claire","status":1}

    ]



    Calendar {

        id: calendar

        anchors.fill: parent

        selectedDate: new Date()

        weekNumbersVisible: true

        focus: true

        onSelectedDateChanged: {

            const day = selectedDate.getDate();

            const month = selectedDate.getMonth() + 1;

            const year = selectedDate.getFullYear();

        }



       style: CalendarStyle {

           dayOfWeekDelegate: Item {

               width: parent.width

               height: dp(30)

               Rectangle {

                   anchors.fill: parent

                   border.color: "#00000000"

                   Label {

                       id: dayOfWeekDelegateText

                       text: Qt.locale().dayName(styleData.dayOfWeek, Locale.ShortFormat)

                       anchors.centerIn: parent

                       color: "black"

                   }

               }

           }



           //  a delegate for each day cell

           dayDelegate: Item {

               id: container



               readonly property color sameMonthDateTextColor: "#444"

               readonly property color selectedDateColor: "#20d5f0"

               readonly property color selectedDateTextColor: "white"

               readonly property color differentMonthDateTextColor: "#bbb"



               //  the background of each cell

               Rectangle {

                   anchors.fill: parent

                   border.color: "#00000000"

                   color: styleData.selected ? selectedDateColor : "white"

               }



               //  a marker on the upper-left corner on each cell

               Rectangle {

                   id: calendarMarker

                   property bool isConfirmed: false

                   anchors {

                       top: parent.top; left: parent.left

                   }



                   width: 12

                   height: width



                   //  the issue lies here

                   color: {

                        var confCol

                        calendarListModel.indexOf(status? true : false)

                        confCol ? "#4286f4" : "red"

                   }



               }



               // the day number

               Label {

                   id: dayDelegateText

                   text: styleData.date.getDate()

                   anchors.centerIn: parent

                   color:  styleData.selected ? selectedDateTextColor : styleData.visibleMonth ? sameMonthDateTextColor : differentMonthDateTextColor

               }

            }

        }

    }

}

Alright, right now you're using an array of objects and trying to index it directly, which is no good. (Especially since you're currently indexing for true/false values, which doesn't comprise individual elements in calendarListModel.) Even if you could reconstruct the object with a date, name, and status, they'll still be different objects.

Use Array.prototype.find() instead.

color: {

    var modelObject = calendarListModel.find(

       function(obj) {

            //  look for a matching date

           return obj.date === styleData.date.getTime();

       }

    );



    if (modelObject === undefined)  //  not found in list model

       return "lightgrey";



    return modelObject.status ? "blue" : "red";

}

Here's a before and after tested from a macOS:

Before: Notice how all markers are red. Only the dates specified in calendarListModel should have colour to them.

After: Notice that only the marker at January 11 has colour (blue). Indeed, this is because the date was included in calendarListModel: 1544616000000.