Change colour from bool within array in QML

Question

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
               }
            }
        }
    }
}

Could you post a minimal, viable, example? i.e. something we can paste into QtCreate and try it out for you. Perhaps a standalone QML file? — selbie
– selbie, Commented Jan 3, 2019 at 2:28
My psychic powers suggest calendarListModel or calendarListModel.status is undefined. Does QtCreator show any output in the debug window when you run your code under debug? — selbie
– selbie, Commented Jan 3, 2019 at 2:28
Could you post the part where you "build" the calendar in QML? I'm guessing you have a repeater or something and you need to use model or modelData instead of calendarListModel — Amfasis
– Amfasis, Commented Jan 3, 2019 at 7:10
@selbie Apologies! I try to keep myself as clear as possible and think I am but I guess not haha! I've updated the question with code from the main.qml and calendar.qml for you to see! I want the calendarMarker in the calendar.qml to change colour depending on the bool of the status read from firebase of each date! let me know if that makes more sense? — Ldweller
– Ldweller, Commented Jan 3, 2019 at 12:38
@Amfasis again sorry for making it confusing, as with my above comment to selbie I've updated the question, hopefully it makes more sense now if not let me know and i'll edit further! Thanks again for the comments people! — Ldweller
– Ldweller, Commented Jan 3, 2019 at 12:39

TrebledJ · Accepted Answer · 2019-01-12 11:46:47Z

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.

firstly can I say a huge thanks for your patience! It works as intended! Confirmed/unconfirmed showing different colours! I always try to make my questions minimal, complete and verifiable as i can but being a hobbyist things may not read as clearly as intended, but thanks, thanks a million! (P.S I'll use your edited question as reference in the future for sure)

Collectives™ on Stack Overflow

Change colour from bool within array in QML

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related