title: Change calendar style on button click
body: <p>I need to change the <code>Calendar</code> <code>style</code> when clicking a <code>Button</code>. Currently, in the code below, the <code>style</code> change only works when the object is created for the first time but I need to do style change manually whenever the <code>Button</code> is clicked.</p>
  
  <p>Below is the QML code:</p>
  
  <pre><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 &amp;&amp; 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&lt;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;
      }   
  }
  </code></pre>
  
  <p><strong>Edit:</strong></p>
  
  <p>The return value of the function <code>getHighlightDates()</code> 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.  </p>
  
  <p>Here is the screen shot: </p>
  
  <p><a href="https://i.stack.imgur.com/3gtf2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3gtf2.png" alt="enter image description here"></a></p>