qt.labs.Calendar: MonthGrid shows empty Rows

import QtQuick 2.6
import QtQuick.Controls 2.0
import QtQuick.Controls.Material 2.0
import Qt.labs.calendar 1.0

ApplicationWindow {

    id: window
    width: 360
    height: 360
    visible: true
    Material.primary: Material.Teal
    Material.accent: Material.DeepOrange

    Pane {
        id: root
        anchors.fill: parent
        focus: true

        Label {
            anchors.centerIn: parent
            text: Qt.formatDate(calendarRoot.selectedDate, Qt.DefaultLocaleLongDate)
        }


        Button {
            id: prevButton
            text: "Previous"
            anchors.bottom: parent.bottom
            anchors.left: parent.left
            onClicked: {
                if(calendarRoot.displayMonth > 0) {
                    calendarRoot.displayMonth --
                } else {
                    calendarRoot.displayMonth = 11
                    calendarRoot.displayYear --
                }
                calendarRoot.open()
            }
        }
        Button {
            id: button
            text: "Select a Day"
            anchors.bottom: parent.bottom
            anchors.horizontalCenter: parent.horizontalCenter
            onClicked: {
                calendarRoot.open()
            }
        }
        Button {
            id: nextButton
            text: "Next"
            anchors.bottom: parent.bottom
            anchors.right: parent.right
            onClicked: {
                if(calendarRoot.displayMonth < 11) {
                    calendarRoot.displayMonth ++
                } else {
                    calendarRoot.displayMonth = 0
                    calendarRoot.displayYear ++
                }
                calendarRoot.open()
            }
        }

    } // calendarRoot

    Popup {
        id: calendarRoot
        property date selectedDate: new Date()
        property int displayMonth: Calendar.July
        property int displayYear: 2016
        property int calendarSize: parent.width > parent.height? parent.height * 0.80 : parent.width * 0.80
        property int gridSize: calendarSize * 0.9

        x: (parent.width - calendarSize) / 2
        y: (parent.height - calendarSize) / 2
        implicitHeight: calendarSize
        implicitWidth: calendarSize

        MonthGrid {
            id: monthGrid
            width: calendarRoot.gridSize
            height: calendarRoot.gridSize

            month: calendarRoot.displayMonth
            year: calendarRoot.displayYear

            topPadding: title.height

            Column {
                id: title
                x: monthGrid.contentItem.x
                width: monthGrid.contentItem.width
                spacing: 6
                Label {
                    width: parent.width
                    height: implicitHeight * 2
                    text: monthGrid.title
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    font.pointSize: 18
                }

                DayOfWeekRow {
                    width: parent.width
                }

            } // title column

            leftPadding: weekNumbers.width

            WeekNumberColumn {
                id: weekNumbers
                month: calendarRoot.displayMonth
                year: calendarRoot.displayYear
                y: monthGrid.contentItem.y
                height: monthGrid.contentItem.height
            } // WeekNumberColumn

            onClicked: {
                // Important: check the month to avoid clicking on days outside where opacity 0
                if(date.getMonth() == calendarRoot.displayMonth) {
                    calendarRoot.selectedDate = date
                    calendarRoot.close()
                } else {
                    console.log("outside valid month "+date.getMonth())
                }

            }

            delegate: Label {
                id: dayLabel
                readonly property bool selected: model.day === calendarRoot.selectedDate.getDate()
                                                 && model.month === calendarRoot.selectedDate.getMonth()
                                                 && model.year === calendarRoot.selectedDate.getFullYear()
                text: model.day
                font.bold: model.today? true: false
                opacity: model.month === monthGrid.month ? 1 : 0
                color: pressed || selected ? "white" : model.today ? Material.accent : Material.foreground
                minimumPointSize: 8
                fontSizeMode: Text.Fit
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter

                background: Rectangle {
                    anchors.centerIn: parent
                    width: parent.width
                    height: width
                    radius: width / 2
                    color: Material.primary
                    visible: pressed || parent.selected
                }
            } // label in month grid
        } // month grid

        onOpened: {
            button.enabled = false
            nextButton.enabled = false
            prevButton.enabled = false
        }
        onClosed: {
            button.enabled = true
            nextButton.enabled = true
            prevButton.enabled = true
        }
    }
}