Fix CalendarStyle's layouting and grid cell calculation.

 - Wrap all panel items within a container, so that the frame width
   checks happen in only one place, and the other items don't need to
   care about it.
 - Move the logic involving grid line width into CalendarUtils, so
   that the style code can be for styling and not maths.

Task-number: QTBUG-38847
Change-Id: I99a1f131b9cd608f3f7a7627d51a75780a6cbac2
Reviewed-by: Gabriel de Dietrich <gabriel.dedietrich@digia.com>

3 files changed, 348 insertions, 249 deletions

diff --git a/src/controls/Private/CalendarUtils.js b/src/controls/Private/CalendarUtils.js
index 75f3b6c1..fce2a677 100644
--- a/src/controls/Private/CalendarUtils.js
+++ b/src/controls/Private/CalendarUtils.js
@@ -75,14 +75,37 @@ function setMonth(date, month) {
     return newDate;
 }
 
-function cellRectAt(index, columns, rows, availableWidth, availableHeight) {
+/*!
+    Returns the cell rectangle for the cell at the given \a index, assuming
+    that the grid has a number of columns equal to \a columns and rows
+    equal to \a rows, with an available width of \a availableWidth and height
+    of \a availableHeight.
+
+    If \a gridLineWidth is greater than \c 0, the cell rectangle will be
+    calculated under the assumption that there is a grid between the cells:
+
+        31 |  1 |  2 |  3 |  4 |  5 |  6
+        --------------------------------
+         7 |  8 |  9 | 10 | 11 | 12 | 13
+        --------------------------------
+        14 | 15 | 16 | 17 | 18 | 19 | 20
+        --------------------------------
+        21 | 22 | 23 | 24 | 25 | 26 | 27
+        --------------------------------
+        28 | 29 | 30 | 31 |  1 |  2 |  3
+        --------------------------------
+         4 |  5 |  6 |  7 |  8 |  9 | 10
+*/
+function cellRectAt(index, columns, rows, availableWidth, availableHeight, gridLineWidth) {
     var col = Math.floor(index % columns);
     var row = Math.floor(index / columns);
 
-    var remainingHorizontalSpace = Math.floor(availableWidth % columns);
-    var remainingVerticalSpace = Math.floor(availableHeight % rows);
-    var baseCellWidth = Math.floor(availableWidth / columns);
-    var baseCellHeight = Math.floor(availableHeight / rows);
+    var availableWidthMinusGridLines = availableWidth - ((columns - 1) * gridLineWidth);
+    var availableHeightMinusGridLines = availableHeight - ((rows - 1) * gridLineWidth);
+    var remainingHorizontalSpace = Math.floor(availableWidthMinusGridLines % columns);
+    var remainingVerticalSpace = Math.floor(availableHeightMinusGridLines % rows);
+    var baseCellWidth = Math.floor(availableWidthMinusGridLines / columns);
+    var baseCellHeight = Math.floor(availableHeightMinusGridLines / rows);
 
     var rect = Qt.rect(0, 0, 0, 0);
 
@@ -108,5 +131,8 @@ function cellRectAt(index, columns, rows, availableWidth, availableHeight) {
         rect.y += Math.min(remainingVerticalSpace, row);
     }
 
+    rect.x += col * gridLineWidth;
+    rect.y += row * gridLineWidth;
+
     return rect;
 }
diff --git a/src/controls/Styles/Base/CalendarStyle.qml b/src/controls/Styles/Base/CalendarStyle.qml
index 34f6eb05..d93c8325 100644
--- a/src/controls/Styles/Base/CalendarStyle.qml
+++ b/src/controls/Styles/Base/CalendarStyle.qml
@@ -150,7 +150,7 @@ Style {
 
     function __cellRectAt(index) {
         return CalendarUtils.cellRectAt(index, control.__panel.columns, control.__panel.rows,
-            control.__panel.availableWidth, control.__panel.availableHeight);
+            control.__panel.availableWidth, control.__panel.availableHeight, gridVisible ? __gridLineWidth : 0);
     }
 
     function __isValidDate(date) {
@@ -248,8 +248,13 @@ Style {
     */
     property Component dayDelegate: Rectangle {
         anchors.fill: parent
-        anchors.margins: styleData.selected ? -1 : 0
+        anchors.leftMargin: (!addExtraMargin || control.weekNumbersVisible) && styleData.index % CalendarUtils.daysInAWeek === 0 ? 0 : -1
+        anchors.rightMargin: !addExtraMargin && styleData.index % CalendarUtils.daysInAWeek === CalendarUtils.daysInAWeek - 1 ? 0 : -1
+        anchors.bottomMargin: !addExtraMargin && styleData.index >= CalendarUtils.daysInAWeek * (CalendarUtils.weeksOnACalendarMonth - 1) ? 0 : -1
+        anchors.topMargin: styleData.selected ? -1 : 0
         color: styleData.date !== undefined && styleData.selected ? selectedDateColor : "transparent"
+
+        readonly property bool addExtraMargin: control.frameVisible && styleData.selected
         readonly property color sameMonthDateTextColor: "#444"
         readonly property color selectedDateColor: Qt.platform.os === "osx" ? "#3778d0" : __syspal.highlight
         readonly property color selectedDateTextColor: "white"
@@ -312,306 +317,313 @@ Style {
         readonly property int columns: CalendarUtils.daysInAWeek
 
         // The combined available width and height to be shared amongst each cell.
-        readonly property real availableWidth: (viewContainer.width - (control.frameVisible ? 2 * __gridLineWidth : 0))
-        readonly property real availableHeight: (viewContainer.height - (control.frameVisible ? 2 * __gridLineWidth : 0))
+        readonly property real availableWidth: viewContainer.width
+        readonly property real availableHeight: viewContainer.height
 
         property int hoveredCellIndex: -1
         property int pressedCellIndex: -1
 
-        Loader {
-            id: backgroundLoader
+        Rectangle {
             anchors.fill: parent
-            sourceComponent: background
+            color: "transparent"
+            border.color: gridColor
+            visible: control.frameVisible
         }
 
-        Loader {
-            id: navigationBarLoader
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.top: parent.top
+        Item {
+            id: container
+            anchors.fill: parent
             anchors.margins: control.frameVisible ? 1 : 0
-            sourceComponent: navigationBar
 
-            property QtObject styleData: QtObject {
-                readonly property string title: control.__locale.standaloneMonthName(control.visibleMonth)
-                    + new Date(control.visibleYear, control.visibleMonth, 1).toLocaleDateString(control.__locale, " yyyy")
+            Loader {
+                id: backgroundLoader
+                anchors.fill: parent
+                sourceComponent: background
             }
-        }
 
-        Row {
-            id: dayOfWeekHeaderRow
-            anchors.top: navigationBarLoader.bottom
-            anchors.left: parent.left
-            anchors.leftMargin: (control.weekNumbersVisible ? weekNumbersItem.width : 0)
-            anchors.right: parent.right
-            height: dayOfWeekHeaderRowHeight
+            Loader {
+                id: navigationBarLoader
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.top: parent.top
+                sourceComponent: navigationBar
 
-            Repeater {
-                id: repeater
-                model: CalendarHeaderModel {
-                    locale: control.__locale
-                }
-                Loader {
-                    id: dayOfWeekDelegateLoader
-                    sourceComponent: dayOfWeekDelegate
-                    width: __cellRectAt(index).width
-                    height: dayOfWeekHeaderRow.height
-
-                    readonly property var __dayOfWeek: dayOfWeek
-
-                    property QtObject styleData: QtObject {
-                        readonly property alias dayOfWeek: dayOfWeekDelegateLoader.__dayOfWeek
-                    }
+                property QtObject styleData: QtObject {
+                    readonly property string title: control.__locale.standaloneMonthName(control.visibleMonth)
+                        + new Date(control.visibleYear, control.visibleMonth, 1).toLocaleDateString(control.__locale, " yyyy")
                 }
             }
-        }
 
-        Row {
-            id: gridRow
-            width: weekNumbersItem.width + viewContainer.width
-            height: viewContainer.height
-            anchors.top: dayOfWeekHeaderRow.bottom
+            Row {
+                id: dayOfWeekHeaderRow
+                anchors.top: navigationBarLoader.bottom
+                anchors.left: parent.left
+                anchors.leftMargin: (control.weekNumbersVisible ? weekNumbersItem.width : 0)
+                anchors.right: parent.right
+                height: dayOfWeekHeaderRowHeight
 
-            Item {
-                id: weekNumbersItem
-                visible: control.weekNumbersVisible
-                width: 30
-                height: viewContainer.height
                 Repeater {
-                    id: weekNumberRepeater
-                    model: panelItem.weeksToShow
-
+                    id: repeater
+                    model: CalendarHeaderModel {
+                        locale: control.__locale
+                    }
                     Loader {
-                        id: weekNumberDelegateLoader
-                        y: __cellRectAt(index * panelItem.columns).y + (gridVisible ? __gridLineWidth : 0)
-                        width: weekNumbersItem.width
-                        height: __cellRectAt(index * panelItem.columns).height - (control.frameVisible ? __gridLineWidth : 0)
-                        sourceComponent: weekNumberDelegate
-
-                        readonly property int __index: index
-                        property int __weekNumber: control.__model.weekNumberAt(index)
-
-                        Connections {
-                            target: control
-                            onVisibleMonthChanged: __weekNumber = control.__model.weekNumberAt(index)
-                            onVisibleYearChanged: __weekNumber = control.__model.weekNumberAt(index)
-                        }
+                        id: dayOfWeekDelegateLoader
+                        sourceComponent: dayOfWeekDelegate
+                        width: __cellRectAt(index).width
+                        height: dayOfWeekHeaderRow.height
 
-                        Connections {
-                            target: control.__model
-                            onCountChanged: __weekNumber = control.__model.weekNumberAt(index)
-                        }
+                        readonly property var __dayOfWeek: dayOfWeek
 
                         property QtObject styleData: QtObject {
-                            readonly property alias index: weekNumberDelegateLoader.__index
-                            readonly property int weekNumber: weekNumberDelegateLoader.__weekNumber
+                            readonly property alias dayOfWeek: dayOfWeekDelegateLoader.__dayOfWeek
                         }
                     }
                 }
-                Rectangle {
-                    anchors.topMargin: - navigationBarLoader.height
-                    anchors.top: parent.top
-                    anchors.bottom: parent.bottom
-
-                    width: 1
-                    anchors.rightMargin: -1
-                    anchors.right: parent.right
-                    color: gridColor
-                }
+            }
 
+            Rectangle {
+                id: topGridLine
+                color: gridColor
+                width: parent.width
+                height: __gridLineWidth
+                visible: gridVisible
+                anchors.top: dayOfWeekHeaderRow.bottom
             }
 
-            // Contains the grid lines and the grid itself.
-            Item {
-                id: viewContainer
-                width: panelItem.width - (control.weekNumbersVisible ? weekNumbersItem.width : 0)
-                height: panelItem.height - navigationBarLoader.height - dayOfWeekHeaderRow.height
+            Row {
+                id: gridRow
+                width: weekNumbersItem.width + viewContainer.width
+                height: viewContainer.height
+                anchors.top: topGridLine.bottom
+
+                Item {
+                    id: weekNumbersItem
+                    visible: control.weekNumbersVisible
+                    width: 30
+                    height: viewContainer.height
+                    Repeater {
+                        id: weekNumberRepeater
+                        model: panelItem.weeksToShow
+
+                        Loader {
+                            id: weekNumberDelegateLoader
+                            y: __cellRectAt(index * panelItem.columns).y
+                            width: weekNumbersItem.width
+                            height: __cellRectAt(index * panelItem.columns).height
+                            sourceComponent: weekNumberDelegate
+
+                            readonly property int __index: index
+                            property int __weekNumber: control.__model.weekNumberAt(index)
+
+                            Connections {
+                                target: control
+                                onVisibleMonthChanged: __weekNumber = control.__model.weekNumberAt(index)
+                                onVisibleYearChanged: __weekNumber = control.__model.weekNumberAt(index)
+                            }
+
+                            Connections {
+                                target: control.__model
+                                onCountChanged: __weekNumber = control.__model.weekNumberAt(index)
+                            }
+
+                            property QtObject styleData: QtObject {
+                                readonly property alias index: weekNumberDelegateLoader.__index
+                                readonly property int weekNumber: weekNumberDelegateLoader.__weekNumber
+                            }
+                        }
+                    }
+                    Rectangle {
+                        anchors.topMargin: - navigationBarLoader.height
+                        anchors.top: parent.top
+                        anchors.bottom: parent.bottom
 
-                Repeater {
-                    id: verticalGridLineRepeater
-                    model: panelItem.columns - 1
-                    delegate: Rectangle {
-                        // The last line will be an invalid index, so we must handle it
-                        x: index < panelItem.columns
-                           ? __cellRectAt(index + 1).x
-                           : __cellRectAt(panelItem.columns).x + __cellRectAt(panelItem.columns).width
-                        y: 0
                         width: __gridLineWidth
-                        height: viewContainer.height
+                        anchors.rightMargin: -__gridLineWidth
+                        anchors.right: parent.right
                         color: gridColor
-                        visible: gridVisible
                     }
+
                 }
 
-                Repeater {
-                    id: horizontalGridLineRepeater
-                    model: panelItem.rows
-                    delegate: Rectangle {
-                        x: 0
-                        // The last line will be an invalid index, so we must handle it
-                        y: index < panelItem.columns - 1
-                            ? __cellRectAt(index * panelItem.columns).y
-                            : __cellRectAt((panelItem.rows - 1) * panelItem.columns).y + __cellRectAt((panelItem.rows - 1) * panelItem.columns).height
-                        width: viewContainer.width
-                        height: __gridLineWidth
-                        color: gridColor
-                        visible: gridVisible
+                // Contains the grid lines and the grid itself.
+                Item {
+                    id: viewContainer
+                    width: container.width - (control.weekNumbersVisible ? weekNumbersItem.width : 0)
+                    height: container.height - navigationBarLoader.height - dayOfWeekHeaderRow.height - topGridLine.height
+
+                    Repeater {
+                        id: verticalGridLineRepeater
+                        model: panelItem.columns - 1
+                        delegate: Rectangle {
+                            x: __cellRectAt(index + 1).x - __gridLineWidth
+                            y: 0
+                            width: __gridLineWidth
+                            height: viewContainer.height
+                            color: gridColor
+                            visible: gridVisible
+                        }
                     }
-                }
 
-                MouseArea {
-                    id: mouseArea
-                    anchors.fill: parent
+                    Repeater {
+                        id: horizontalGridLineRepeater
+                        model: panelItem.rows - 1
+                        delegate: Rectangle {
+                            x: 0
+                            y: __cellRectAt((index + 1) * panelItem.columns).y - __gridLineWidth
+                            width: viewContainer.width
+                            height: __gridLineWidth
+                            color: gridColor
+                            visible: gridVisible
+                        }
+                    }
 
-                    hoverEnabled: true
+                    MouseArea {
+                        id: mouseArea
+                        anchors.fill: parent
 
-                    function cellIndexAt(mouseX, mouseY) {
-                        var viewContainerPos = viewContainer.mapFromItem(mouseArea, mouseX, mouseY);
-                        var child = viewContainer.childAt(viewContainerPos.x, viewContainerPos.y);
-                        // In the tests, the mouseArea sometimes gets picked instead of the cells,
-                        // probably because stuff is still loading. To be safe, we check for that here.
-                        return child && child !== mouseArea ? child.__index : -1;
-                    }
+                        hoverEnabled: true
 
-                    onEntered: {
-                        hoveredCellIndex = cellIndexAt(mouseX, mouseY);
-                        if (hoveredCellIndex === undefined) {
-                            hoveredCellIndex = cellIndexAt(mouseX, mouseY);
+                        function cellIndexAt(mouseX, mouseY) {
+                            var viewContainerPos = viewContainer.mapFromItem(mouseArea, mouseX, mouseY);
+                            var child = viewContainer.childAt(viewContainerPos.x, viewContainerPos.y);
+                            // In the tests, the mouseArea sometimes gets picked instead of the cells,
+                            // probably because stuff is still loading. To be safe, we check for that here.
+                            return child && child !== mouseArea ? child.__index : -1;
                         }
 
-                        var date = view.model.dateAt(hoveredCellIndex);
-                        if (__isValidDate(date)) {
-                            control.hovered(date);
+                        onEntered: {
+                            hoveredCellIndex = cellIndexAt(mouseX, mouseY);
+                            if (hoveredCellIndex === undefined) {
+                                hoveredCellIndex = cellIndexAt(mouseX, mouseY);
+                            }
+
+                            var date = view.model.dateAt(hoveredCellIndex);
+                            if (__isValidDate(date)) {
+                                control.hovered(date);
+                            }
                         }
-                    }
 
-                    onExited: {
-                        hoveredCellIndex = -1;
-                    }
+                        onExited: {
+                            hoveredCellIndex = -1;
+                        }
 
-                    onPositionChanged: {
-                        var indexOfCell = cellIndexAt(mouse.x, mouse.y);
-                        var previousHoveredCellIndex = hoveredCellIndex;
-                        hoveredCellIndex = indexOfCell;
-                        if (indexOfCell !== -1) {
-                            var date = view.model.dateAt(indexOfCell);
-                            if (__isValidDate(date)) {
-                                if (hoveredCellIndex !== previousHoveredCellIndex)
-                                    control.hovered(date);
+                        onPositionChanged: {
+                            var indexOfCell = cellIndexAt(mouse.x, mouse.y);
+                            var previousHoveredCellIndex = hoveredCellIndex;
+                            hoveredCellIndex = indexOfCell;
+                            if (indexOfCell !== -1) {
+                                var date = view.model.dateAt(indexOfCell);
+                                if (__isValidDate(date)) {
+                                    if (hoveredCellIndex !== previousHoveredCellIndex)
+                                        control.hovered(date);
+
+                                    if (pressed && date.getTime() !== control.selectedDate.getTime()) {
+                                        control.selectedDate = date;
+                                        pressedCellIndex = indexOfCell;
+                                        control.pressed(date);
+                                    }
+                                }
+                            }
+                        }
 
-                                if (pressed && date.getTime() !== control.selectedDate.getTime()) {
+                        onPressed: {
+                            var indexOfCell = cellIndexAt(mouse.x, mouse.y);
+                            if (indexOfCell !== -1) {
+                                var date = view.model.dateAt(indexOfCell);
+                                pressedCellIndex = indexOfCell;
+                                if (__isValidDate(date)) {
                                     control.selectedDate = date;
-                                    pressedCellIndex = indexOfCell;
                                     control.pressed(date);
                                 }
                             }
                         }
-                    }
 
-                    onPressed: {
-                        var indexOfCell = cellIndexAt(mouse.x, mouse.y);
-                        if (indexOfCell !== -1) {
-                            var date = view.model.dateAt(indexOfCell);
-                            pressedCellIndex = indexOfCell;
-                            if (__isValidDate(date)) {
-                                control.selectedDate = date;
-                                control.pressed(date);
+                        onReleased: {
+                            var indexOfCell = cellIndexAt(mouse.x, mouse.y);
+                            if (indexOfCell !== -1) {
+                                // The cell index might be valid, but the date has to be too. We could let the
+                                // selected date validation take care of this, but then the selected date would
+                                // change to the earliest day if a day before the minimum date is clicked, for example.
+                                var date = view.model.dateAt(indexOfCell);
+                                if (__isValidDate(date)) {
+                                    control.released(date);
+                                }
                             }
+                            pressedCellIndex = -1;
                         }
-                    }
 
-                    onReleased: {
-                        var indexOfCell = cellIndexAt(mouse.x, mouse.y);
-                        if (indexOfCell !== -1) {
-                            // The cell index might be valid, but the date has to be too. We could let the
-                            // selected date validation take care of this, but then the selected date would
-                            // change to the earliest day if a day before the minimum date is clicked, for example.
-                            var date = view.model.dateAt(indexOfCell);
-                            if (__isValidDate(date)) {
-                                control.released(date);
+                        onClicked: {
+                            var indexOfCell = cellIndexAt(mouse.x, mouse.y);
+                            if (indexOfCell !== -1) {
+                                var date = view.model.dateAt(indexOfCell);
+                                if (__isValidDate(date))
+                                    control.clicked(date);
                             }
                         }
-                        pressedCellIndex = -1;
-                    }
 
-                    onClicked: {
-                        var indexOfCell = cellIndexAt(mouse.x, mouse.y);
-                        if (indexOfCell !== -1) {
-                            var date = view.model.dateAt(indexOfCell);
-                            if (__isValidDate(date))
-                                control.clicked(date);
+                        onDoubleClicked: {
+                            var indexOfCell = cellIndexAt(mouse.x, mouse.y);
+                            if (indexOfCell !== -1) {
+                                var date = view.model.dateAt(indexOfCell);
+                                if (__isValidDate(date))
+                                    control.doubleClicked(date);
+                            }
                         }
                     }
 
-                    onDoubleClicked: {
-                        var indexOfCell = cellIndexAt(mouse.x, mouse.y);
-                        if (indexOfCell !== -1) {
-                            var date = view.model.dateAt(indexOfCell);
-                            if (__isValidDate(date))
-                                control.doubleClicked(date);
-                        }
+                    Connections {
+                        target: control
+                        onSelectedDateChanged: view.selectedDateChanged()
                     }
-                }
 
-                Connections {
-                    target: control
-                    onSelectedDateChanged: view.selectedDateChanged()
-                }
+                    Repeater {
+                        id: view
 
-                Repeater {
-                    id: view
+                        property int currentIndex: -1
 
-                    property int currentIndex: -1
+                        model: control.__model
 
-                    model: control.__model
+                        Component.onCompleted: selectedDateChanged()
 
-                    Component.onCompleted: selectedDateChanged()
-
-                    function selectedDateChanged() {
-                        if (model !== undefined && model.locale !== undefined) {
-                            currentIndex = model.indexAt(control.selectedDate);
+                        function selectedDateChanged() {
+                            if (model !== undefined && model.locale !== undefined) {
+                                currentIndex = model.indexAt(control.selectedDate);
+                            }
                         }
-                    }
-
-                    delegate: Loader {
-                        id: delegateLoader
-
-                        x: __cellRectAt(index).x + (gridVisible ? __gridLineWidth : 0)
-                        y: __cellRectAt(index).y + (gridVisible ? __gridLineWidth : 0)
-                        width: __cellRectAt(index).width - (gridVisible ? __gridLineWidth : 0)
-                        height: __cellRectAt(index).height - (gridVisible ? __gridLineWidth : 0)
-                        z: styleData.selected ? 1 : 0
-                        sourceComponent: dayDelegate
 
-                        readonly property int __index: index
-                        readonly property date __date: date
-                        // We rely on the fact that an invalid QDate will be converted to a Date
-                        // whose year is -4713, which is always an invalid date since our
-                        // earliest minimum date is the year 1.
-                        readonly property bool valid: __isValidDate(date)
-
-                        property QtObject styleData: QtObject {
-                            readonly property alias index: delegateLoader.__index
-                            readonly property bool selected: control.selectedDate.getTime() === date.getTime()
-                            readonly property alias date: delegateLoader.__date
-                            readonly property bool valid: delegateLoader.valid
-                            // TODO: this will not be correct if the app is running when a new day begins.
-                            readonly property bool today: date.getTime() === new Date().setHours(0, 0, 0, 0)
-                            readonly property bool visibleMonth: date.getMonth() === control.visibleMonth
-                            readonly property bool hovered: panelItem.hoveredCellIndex == index
-                            readonly property bool pressed: panelItem.pressedCellIndex == index
-                            // todo: pressed property here, clicked and doubleClicked in the control itself
+                        delegate: Loader {
+                            id: delegateLoader
+
+                            x: __cellRectAt(index).x
+                            y: __cellRectAt(index).y
+                            width: __cellRectAt(index).width
+                            height: __cellRectAt(index).height
+                            sourceComponent: dayDelegate
+
+                            readonly property int __index: index
+                            readonly property date __date: date
+                            // We rely on the fact that an invalid QDate will be converted to a Date
+                            // whose year is -4713, which is always an invalid date since our
+                            // earliest minimum date is the year 1.
+                            readonly property bool valid: __isValidDate(date)
+
+                            property QtObject styleData: QtObject {
+                                readonly property alias index: delegateLoader.__index
+                                readonly property bool selected: control.selectedDate.getTime() === date.getTime()
+                                readonly property alias date: delegateLoader.__date
+                                readonly property bool valid: delegateLoader.valid
+                                // TODO: this will not be correct if the app is running when a new day begins.
+                                readonly property bool today: date.getTime() === new Date().setHours(0, 0, 0, 0)
+                                readonly property bool visibleMonth: date.getMonth() === control.visibleMonth
+                                readonly property bool hovered: panelItem.hoveredCellIndex == index
+                                readonly property bool pressed: panelItem.pressedCellIndex == index
+                                // todo: pressed property here, clicked and doubleClicked in the control itself
+                            }
                         }
                     }
                 }
             }
         }
-        Rectangle {
-            anchors.fill: parent
-            color: "transparent"
-            border.color: gridColor
-            visible: control.frameVisible
-        }
-
     }
 }
diff --git a/tests/auto/controls/data/tst_calendar.qml b/tests/auto/controls/data/tst_calendar.qml
index 843aed15..e4edf725 100644
--- a/tests/auto/controls/data/tst_calendar.qml
+++ b/tests/auto/controls/data/tst_calendar.qml
@@ -691,49 +691,68 @@ Item {
             }
         }
 
-        function test_cellRectCalculation() {
+        function ensureGapsBetweenCells(columns, rows, availableWidth, availableHeight, gridLineWidth) {
+            for (var row = 1; row < rows; ++row) {
+                for (var col = 1; col < columns; ++col) {
+                    var lastHorizontalRect = CalendarUtils.cellRectAt((row - 1) * columns + col - 1, columns, rows, availableWidth, availableHeight);
+                    var thisHorizontalRect = CalendarUtils.cellRectAt((row - 1) * columns + col, columns, rows, availableWidth, availableHeight);
+                    compare (lastHorizontalRect.x + lastHorizontalRect.width + gridLineWidth, thisHorizontalRect.x,
+                        "No gap for grid line between column " + (col - 1) + " and " + col + " in a grid of " + columns + " columns and " + rows + " rows, "
+                        + "with an availableWidth of " + availableWidth + " and availableHeight of " + availableHeight);
+
+                    var lastVerticalRect = CalendarUtils.cellRectAt((row - 1) * columns + col - 1, columns, rows, availableWidth, availableHeight);
+                    var thisVerticalRect = CalendarUtils.cellRectAt(row * columns + col - 1, columns, rows, availableWidth, availableHeight);
+                    compare (lastVerticalRect.y + lastVerticalRect.height + gridLineWidth, thisVerticalRect.y,
+                        "No gap for grid line between row " + (row - 1) + " and " + row + " in a grid of " + columns + " columns and " + rows + " rows, "
+                        + "with an availableWidth of " + availableWidth + " and availableHeight of " + availableHeight);
+                }
+            }
+        }
+
+        function test_gridlessCellRectCalculation() {
             var columns = CalendarUtils.daysInAWeek;
             var rows = CalendarUtils.weeksOnACalendarMonth;
+            var gridLineWidth = 0;
 
             // No extra space available.
             var availableWidth = 10 * columns;
             var availableHeight = 10 * rows;
-            var rect = CalendarUtils.cellRectAt(0, columns, rows, availableWidth, availableHeight);
+            var rect = CalendarUtils.cellRectAt(0, columns, rows, availableWidth, availableHeight, gridLineWidth);
             compare(rect.x, 0);
             compare(rect.y, 0);
             compare(rect.width, 10);
             compare(rect.height, 10);
 
-            rect = CalendarUtils.cellRectAt(columns - 1, columns, rows, availableWidth, availableHeight);
+            rect = CalendarUtils.cellRectAt(columns - 1, columns, rows, availableWidth, availableHeight, gridLineWidth);
             compare(rect.x, (columns - 1) * 10);
             compare(rect.y, 0);
             compare(rect.width, 10);
             compare(rect.height, 10);
 
-            rect = CalendarUtils.cellRectAt(rows * columns - 1, columns, rows, availableWidth, availableHeight);
+            rect = CalendarUtils.cellRectAt(rows * columns - 1, columns, rows, availableWidth, availableHeight, gridLineWidth);
             compare(rect.x, (columns - 1) * 10);
             compare(rect.y, (rows - 1) * 10);
             compare(rect.width, 10);
             compare(rect.height, 10);
 
-            ensureNoGapsBetweenCells(columns, rows, availableWidth, availableHeight);
+            ensureNoGapsBetweenCells(columns, rows, availableWidth, availableHeight, gridLineWidth);
 
             // 1 extra pixel of space in both width and height.
             availableWidth = 10 * columns + 1;
             availableHeight = 10 * rows + 1;
-            rect = CalendarUtils.cellRectAt(0, columns, rows, availableWidth, availableHeight);
+            rect = CalendarUtils.cellRectAt(0, columns, rows, availableWidth, availableHeight, gridLineWidth);
             compare(rect.x, 0);
             compare(rect.y, 0);
             compare(rect.width, 10 + 1);
             compare(rect.height, 10 + 1);
 
-            rect = CalendarUtils.cellRectAt(columns - 1, columns, rows, availableWidth, availableHeight);
+            rect = CalendarUtils.cellRectAt(columns - 1, columns, rows, availableWidth, availableHeight, gridLineWidth);
             compare(rect.x, (columns - 1) * 10 + 1);
             compare(rect.y, 0);
             compare(rect.width, 10);
             compare(rect.height, 10 + 1);
 
-            rect = CalendarUtils.cellRectAt(rows * columns - 1, columns, rows, availableWidth, availableHeight);
+            rect = CalendarUtils.cellRectAt(rows * columns - 1, columns, rows, availableWidth, availableHeight, gridLineWidth);
             compare(rect.x, (columns - 1) * 10 + 1);
             compare(rect.y, (rows - 1) * 10 + 1);
             compare(rect.width, 10);
@@ -744,19 +763,19 @@ Item {
             // 6 extra pixels in width, 5 in height.
             availableWidth = 10 * columns + 6;
             availableHeight = 10 * rows + 5;
-            rect = CalendarUtils.cellRectAt(0, columns, rows, availableWidth, availableHeight);
+            rect = CalendarUtils.cellRectAt(0, columns, rows, availableWidth, availableHeight, gridLineWidth);
             compare(rect.x, 0);
             compare(rect.y, 0);
             compare(rect.width, 10 + 1);
             compare(rect.height, 10 + 1);
 
-            rect = CalendarUtils.cellRectAt(columns - 1, columns, rows, availableWidth, availableHeight);
+            rect = CalendarUtils.cellRectAt(columns - 1, columns, rows, availableWidth, availableHeight, gridLineWidth);
             compare(rect.x, (columns - 1) * 10 + 6);
             compare(rect.y, 0);
             compare(rect.width, 10);
             compare(rect.height, 10 + 1);
 
-            rect = CalendarUtils.cellRectAt(rows * columns - 1, columns, rows, availableWidth, availableHeight);
+            rect = CalendarUtils.cellRectAt(rows * columns - 1, columns, rows, availableWidth, availableHeight, gridLineWidth);
             compare(rect.x, (columns - 1) * 10 + 6);
             compare(rect.y, (rows - 1) * 10 + 5);
             compare(rect.width, 10);
@@ -770,12 +789,54 @@ Item {
 
             for (var i = 0; i < columns; ++i) {
                 ++availableWidth;
-                ensureNoGapsBetweenCells(columns, rows, availableWidth, availableHeight);
+                ensureNoGapsBetweenCells(columns, rows, availableWidth, availableHeight, gridLineWidth);
             }
 
             for (i = 0; i < columns; ++i) {
                 ++availableHeight;
-                ensureNoGapsBetweenCells(columns, rows, availableWidth, availableHeight);
+                ensureNoGapsBetweenCells(columns, rows, availableWidth, availableHeight, gridLineWidth);
+            }
+        }
+
+        function test_gridCellRectCalculation() {
+            var columns = CalendarUtils.daysInAWeek;
+            var rows = CalendarUtils.weeksOnACalendarMonth;
+            var gridLineWidth = 1;
+
+            var availableWidth = 10 * columns;
+            var availableHeight = 10 * rows;
+            var expectedXs = [0, 11, 21, 31, 41, 51, 61];
+            var expectedWidths = [10, 9, 9, 9, 9, 9, 9];
+            // Expected y positions and heights actually are the same as the x positions and widths in this case.
+            // The code below assumes that columns >= rows; if this becomes false, arrays for the expected
+            // y positions and heights must be created to avoid out of bounds accesses.
+            for (var row = 0; row < rows; ++row) {
+                for (var col = 0; col < columns; ++col) {
+                    var index = row * columns + col;
+                    var rect = CalendarUtils.cellRectAt(index, columns, rows, availableWidth, availableHeight, gridLineWidth);
+                    compare(rect.x, expectedXs[col]);
+                    compare(rect.y, expectedXs[row]);
+                    compare(rect.width, expectedWidths[col]);
+                    compare(rect.height, expectedWidths[row]);
+                }
+            }
+
+            // The available width and height of a 250x250 calendar (its implicit size).
+            availableWidth = 250;
+            availableHeight = 168;
+            expectedXs = [0, 36, 72, 108, 144, 180, 216];
+            var expectedYs = [0, 29, 57, 85, 113, 141];
+            expectedWidths = [35, 35, 35, 35, 35, 35, 34];
+            var expectedHeights = [28, 27, 27, 27, 27, 27];
+            for (row = 0; row < rows; ++row) {
+                for (col = 0; col < columns; ++col) {
+                    index = row * columns + col;
+                    rect = CalendarUtils.cellRectAt(index, columns, rows, availableWidth, availableHeight, gridLineWidth);
+                    compare(rect.x, expectedXs[col]);
+                    compare(rect.y, expectedYs[row]);
+                    compare(rect.width, expectedWidths[col]);
+                    compare(rect.height, expectedHeights[row]);
+                }
             }
         }
     }