(QML Calendar Example) Calendar loses ability to alter selection when custom MouseArea is added into delegate's rectangle

Question

I am trying to understand the inner workings of QtQuick/Calendar example. can be found here:

https://qt-project.org/doc/qt-5/qtquickcontrols-calendar-example.html

and the actual code is in:

https://qt-project.org/doc/qt-5/qtquickcontrols-calendar-qml-main-qml.html

In its dayDelegate it has Rectangle that is defined like this:

dayDelegate: Item {


                    Rectangle {
                        anchors.fill: parent
                        border.color: "transparent"
                        color: styleData.date !== undefined && styleData.selected ? selectedDateColor : "transparent"
                        anchors.margins: styleData.selected ? -1 : 0
                            }

I am trying to add an ability to do custom processing depending on where inside the delegate user clicks. I change the delegate to look like:

dayDelegate: Item {
                    Rectangle {
                        anchors.fill: parent
                        border.color: "transparent"
                        color: styleData.date !== undefined && styleData.selected ? selectedDateColor : "transparent"
                        anchors.margins: styleData.selected ? -1 : 0
                        MouseArea {
                                anchors.fill: parent
                                onClicked:
                                {
                                    dayDelegateText.text  = dayDelegateText.text == "two" ? "one" : "two"

                                }
                            }

But once I do this, Calendar no longer reacts to clicks outside of currently selected item. What am I breaking by adding this MouseArea?

Even more confusing is that if I add this area inside a rectangle that is a child of delegate's rectangle and invisibly overlaps it everything works as I wanted it to and I can both operate inside a delegate and change selection.

dayDelegate: Item {

                    Rectangle {
                        anchors.fill: parent
                        border.color: "transparent"
                        color: styleData.date !== undefined && styleData.selected ? selectedDateColor : "transparent"
                        anchors.margins: styleData.selected ? -1 : 0


                        Rectangle {
                            anchors.horizontalCenter: parent.horizontalCenter
                            anchors.verticalCenter: parent.verticalCenter
                            width: styleData.selected ? parent.width/2 : 0
                            height:styleData.selected ? parent.height/2 : 0
                            color: "gray"

                            MouseArea {
                                    anchors.fill: parent
                                    onClicked:
                                    {
                                        dayDelegateText.text  = dayDelegateText.text == "two" ? "one" : "two"
                                    }
                                }
                        }
                    }

Answer 1

It helps to visualise the MouseArea that you added:

import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2

Rectangle {
    width: 300
    height: 300

    Calendar {
        id: calendar
        anchors.centerIn: parent
        style: CalendarStyle {
            dayDelegate: Item {
                Rectangle {
                    id: rect
                    anchors.fill: parent

                    Label {
                        id: dayDelegateText
                        text: styleData.date.getDate()
                        anchors.centerIn: parent
                        horizontalAlignment: Text.AlignRight
                        font.pixelSize: Math.min(parent.height/3, parent.width/3)
                        color: styleData.selected ? "red" : "black"
                        font.bold: styleData.selected
                    }
                    MouseArea {
                        anchors.fill: parent
                        Rectangle {
                            anchors.fill: parent
                            color: "transparent"
                            border.color: "darkorange"
                        }
                    }
                }
            }
        }
    }
}

Because you have a MouseArea in every delegate, Calendar's mouse area - a single area that covers all of the day delegates - can't get any mouse events for the areas that are taken by your MouseAreas.

Your third snippet works because you're only taking up half of the area of each delegate - and that's only when that particular day is selected:

import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2

Rectangle {
    width: 300
    height: 300

    Calendar {
        id: calendar
        anchors.centerIn: parent
        style: CalendarStyle {
            dayDelegate: Item {
                Rectangle {
                    id: rect
                    anchors.fill: parent

                    Label {
                        id: dayDelegateText
                        text: styleData.date.getDate()
                        anchors.centerIn: parent
                        horizontalAlignment: Text.AlignRight
                        font.pixelSize: Math.min(parent.height/3, parent.width/3)
                        color: styleData.selected ? "red" : "black"
                        font.bold: styleData.selected
                    }
                    MouseArea {
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.verticalCenter: parent.verticalCenter
                        width: styleData.selected ? parent.width / 2 : 0
                        height: styleData.selected ? parent.height / 2 : 0
                        Rectangle {
                            anchors.fill: parent
                            color: "transparent"
                            border.color: "darkorange"
                        }
                    }
                }
            }
        }
    }
}

However, it's hard to suggest a way to achieve what you're after, as you haven't told us what you're trying to do.