import QtQuick 2.0

Rectangle {
    width: 450
    height: 500

    GridView {
        id: view
        anchors.centerIn: parent
        width: cellWidth * 7
        height: cellHeight * (6 + 1) // (6 week row, 1 header row)
        cellWidth: 50
        cellHeight: cellWidth

        MouseArea {
            id: area
            anchors.fill: parent

            onClicked: {
                print(view.indexAt(mouse.x, mouse.y));
            }
        }

        model: ListModel {
            Component.onCompleted: {
                for (var i = 0; i < 42; ++i)
                    append({name: i})
            }
        }

        delegate: Item {
            id: row
            width: view.cellWidth - 2
            height: view.cellHeight - 2

            Rectangle {
                anchors.fill: parent
                color: "grey"
            }

            Text {
                anchors.centerIn: parent
                text: name
            }
        }

        header: Row {
            id: headerRow
            width: view.width
            height: view.cellHeight
            Repeater {
                id: repeater
                model: ListModel {
                    Component.onCompleted: {
                        var a = ["Mon", "Tues", "Wed", "Thu", "Fri", "Sat", "Sun"];
                        for (var i = 0; i < a.length; ++i)
                            append({name: a[i]})
                    }
                }
                Item {
                    width: (view.width) / 7
                    height: view.cellHeight
                    Rectangle {
                        color: "lightsteelblue"
                        anchors.fill: parent
                        anchors.rightMargin: 2
                        anchors.bottomMargin: 2
                    }
                    Text {
                        anchors.centerIn: parent
                        text: name
                    }
                }
            }
        }
    }
}