Change calendar style on button click

Question

I need to change the Calendar style when clicking a Button. Currently, in the code below, the style change only works when the object is created for the first time but I need to do style change manually whenever the Button is clicked.

Below is the QML code:

import QtQuick 2.0
import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Controls.Private 1.0
import QtQuick.Controls.Styles 1.1

ApplicationWindow {
    visible: true
    width: 640
    height: 400
    minimumWidth: 400
    minimumHeight: 300
    color: "#f4f4f4"
    id: root

    Calendar {
        id: cal_panel
        anchors.topMargin: 10
        anchors.horizontalCenter:  parent.horizontalCenter;
        frameVisible:false

        style: CalendarStyle {
            gridVisible: false
            dayDelegate: Rectangle {

                color: styleData.selected ? "#FF2E7BD2" : (styleData.visibleMonth && styleData.valid ? "#191919" : "#191919");

                Text {
                    id:day_txt
                    text: styleData.date.getDate()
                    font.bold: true
                    anchors.centerIn: parent
                    color: {
                        var color = "#dddddd";
                        if (styleData.valid) {
                            color = styleData.visibleMonth ?  "#bbb" : "#444";

                            var sel = root.getHiglightDates();
                            for(var i=0;i<sel.length;i++){
                                if(sel[i]===Qt.formatDateTime(styleData.date,"dd:MM:yyyy"))
                                    color="red"
                            }

                            if (styleData.selected) {
                                color = "black";
                            }
                        }
                        color;
                    }
                }
            }
        }
    }

    Button{
        anchors.top:cal_panel.bottom
        anchors.topMargin: 10
        anchors.horizontalCenter: parent.horizontalCenter
        text:"Higlight"
        onClicked: {
            console.log("Higlight here....")
        }
    }  

    function getHighlightDates(){
        var sel = ["10:11:2015","12:11:2015","11:11:2015","08:11:2015","09:11:2015"];
        return sel;
    }   
}

Edit:

The return value of the function getHighlightDates() changes each time. In the snippet above I've just returned a predefined array for testing. In that case I am conduced how to edit style element which is already created.

Here is the screen shot:

nfranklin · Answer 1 · 2015-11-18T14:06:49.800

Based on the comments in the question and in @folibis's answer, it looks the question might just revolve around how to get the calendar style to reflect the updated list of selected dates (from getHiglightDates()) after a user has updated the list by clicking a button.

What about just adding a new property selectedDates to store the selected dates (previously held in getHighlightDates()) like in the code below. By making use of property binding, the appearance of selected dates will automatically be updated whenever selectedDates changes. In the code below, the color of the "day_txt" Text is updated when selectedData is updated (which in turn is updated when selectedDates is updated).

import QtQuick 2.0
import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.1

ApplicationWindow {
    visible: true
    width: 640
    height: 400
    minimumWidth: 400
    minimumHeight: 300
    color: "#f4f4f4"
    id: root

    property variant selectedDates : ["10:11:2015","12:11:2015","11:11:2015","08:11:2015","09:11:2015"]

    Calendar {
      id: cal_panel
      anchors.topMargin: 10
      anchors.horizontalCenter:  parent.horizontalCenter;
      frameVisible:false


      style: CalendarStyle {
          gridVisible: false
          dayDelegate: Rectangle {
              property bool selectedDate: selectedDates.indexOf(Qt.formatDateTime(styleData.date,"dd:MM:yyyy")) > -1

              color: styleData.selected ? "#FF2E7BD2" : (styleData.visibleMonth && styleData.valid ? "#191919" : "#191919");

              Text {
                  id:day_txt
                  text: styleData.date.getDate()
                  font.bold: true
                  anchors.centerIn: parent
                  color: selectedDate ? "red" : (styleData.selected ? "black" : (styleData.visibleMonth ?  "#bbb" : "#444"));
              }
          }
      }
  }

    Button{
        anchors.top:cal_panel.bottom
        anchors.topMargin: 10
        anchors.horizontalCenter: parent.horizontalCenter
        text:"Higlight"
        onClicked: {
            var updatedDates = selectedDates
            updatedDates.push(Qt.formatDateTime(cal_panel.selectedDate,"dd:MM:yyyy"))
            selectedDates = updatedDates
            # See http://stackoverflow.com/questions/19583234/qml-binding-to-an-array-element for why its done this way...
        }
    }
}

score 2 · Accepted Answer · edited Nov 18 '15 at 17:30

2

As a simple solution, you can reassign the style on click event, forcing an under the hood refresh of the Calendar item.

To do that you can use

cal_panel.style=cal_panel.style

Be aware that this solution is not exactly performance friendly. :-)

edited Nov 18 '15 at 17:30

BaCaRoZzo

7,502
6
51
82

answered Nov 18 '15 at 13:38

skypjack

49,335
19
95
187

score 1 · Answer 3 · answered Nov 18 '15 at 12:44

1

as @skypjack already suggested, you just can assign a new style on click. The style property is a Component so there is no problem to do something like this:

Component {
    id: style1
    CalendarStyle {
        background: Rectangle { color: "lightyellow" }
    }
}
Component {
    id: style2
    CalendarStyle {
        background: Rectangle { color: "orange" }
    }
}

Calendar {
    id: calendar
    anchors.fill: parent
    style: style1
    onClicked: {
        calendar.style = style2;
    }
}

answered Nov 18 '15 at 12:44

folibis

12,048
6
54
97

Yes, I know this method, but what in my case on each time I click button I have to highlight different date which is returned by `getHiglightDates()` function. So my question is how can change the text color of `dayDelegate` depending on the date list returned by `getHiglightDates()`. – Haris Nov 18 '15 at 13:01
@folibis The question was not clear and I've misunderstood it, your response is wrong indeed, or better, it doesn't reply to the right question. :-) – skypjack Nov 18 '15 at 13:20

Change calendar style on button click

3 Answers3