ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    id: appWindow

    Page {
        id: myPage

        GridLayout {
            columns: 3
            rows: 5
            width: appWindow.width
            height: appWindow.height

            MonthGrid {
                id: monthGrid
                Layout.fillHeight: true
                Layout.fillWidth: true

                onClicked: {
                    console.log("tapped on a date ")
                }

                delegate: Label {
                    id: dayLabel
                    text: model.day
                    font.bold: model.today? true: false
                    opacity: model.month === monthGrid.month ? 1 : 0
                    color: pressed ? Material.foreground : model.today ? Material.accent : Material.foreground
                    minimumPointSize: 8
                    fontSizeMode: Text.Fit
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter

                    background: Rectangle {
                        anchors.centerIn: parent
                        width: Math.min(parent.width, parent.height) * 1.2
                        height: width
                        radius: width / 2
                        color: Material.primary
                        visible: pressed
                    }
//                    MouseArea {
//                        anchors.fill: parent
//                        onClicked: {
//                            console.log("mouse area click")
//                        }
//                    } // mouse
                } // label in month grid

            } // month grid
        } // grid layout
    } // myPage
} // app window