Fix gaps shown when calendar size is not perfect.

Use a Repeater instead of GridView, and copy what QCalendarWidget does.

Change-Id: I2b734dbdee417be28c103cfa73ce34cd91319990
Reviewed-by: Jens Bache-Wiig <jens.bache-wiig@digia.com>
Reviewed-by: Mitch Curtis <mitch.curtis@digia.com>

8 files changed, 391 insertions, 290 deletions

diff --git a/src/controls/Calendar.qml b/src/controls/Calendar.qml
index d2a1efb9..5d6fc3e4 100644
--- a/src/controls/Calendar.qml
+++ b/src/controls/Calendar.qml
@@ -64,10 +64,6 @@ import QtQuick.Controls.Private 1.0
     Localization is supported through the \l locale property. The selected date
     is displayed according to \l locale, and it can be accessed through the
     \l selectedDateText property.
-
-    \note Due to the fact that the cell sizes are calculated based on the
-    available space within the control, gaps can be seen between the bottom and
-    right edges when assigning certain sizes to the Calendar.
 */
 
 Control {
@@ -121,8 +117,8 @@ Control {
     RangedDate {
         id: rangedDate
         date: new Date()
-        minimumDate: DateUtils.minimumCalendarDate
-        maximumDate: DateUtils.maximumCalendarDate
+        minimumDate: CalendarUtils.minimumCalendarDate
+        maximumDate: CalendarUtils.maximumCalendarDate
     }
 
     /*!
@@ -182,15 +178,6 @@ Control {
     */
     signal doubleClicked(date selectedDate)
 
-    /*!
-        \qmlsignal Calendar::escapePressed()
-
-        This signal is emitted when escape is pressed while the view has focus.
-        When Calendar is used as a popup, this signal can be handled to close
-        the calendar.
-    */
-    signal escapePressed
-
     style: Qt.createComponent(Settings.style + "/CalendarStyle.qml", calendar)
 
     /*!
@@ -209,30 +196,32 @@ Control {
         Selects the month before the current month in \l selectedDate.
     */
     function selectPreviousMonth() {
-        calendar.selectedDate = DateUtils.setMonth(calendar.selectedDate, calendar.selectedDate.getMonth() - 1);
+        calendar.selectedDate = CalendarUtils.setMonth(calendar.selectedDate, calendar.selectedDate.getMonth() - 1);
     }
 
     /*!
         Selects the month after the current month in \l selectedDate.
     */
     function selectNextMonth() {
-        calendar.selectedDate = DateUtils.setMonth(calendar.selectedDate, calendar.selectedDate.getMonth() + 1);
+        calendar.selectedDate = CalendarUtils.setMonth(calendar.selectedDate, calendar.selectedDate.getMonth() + 1);
     }
 
     /*!
         Selects the week before the current week in \l selectedDate.
     */
     function selectPreviousWeek() {
-        view.moveCurrentIndexUp();
-        calendar.selectedDate = __model.dateAt(view.currentIndex);
+        var newDate = new Date(calendar.selectedDate);
+        newDate.setDate(newDate.getDate() - CalendarUtils.daysInAWeek);
+        calendar.selectedDate = newDate;
     }
 
     /*!
         Selects the week after the current week in \l selectedDate.
     */
     function selectNextWeek() {
-        view.moveCurrentIndexDown();
-        calendar.selectedDate = __model.dateAt(view.currentIndex);
+        var newDate = new Date(calendar.selectedDate);
+        newDate.setDate(newDate.getDate() + CalendarUtils.daysInAWeek);
+        calendar.selectedDate = newDate;
     }
 
     /*!
@@ -249,7 +238,7 @@ Control {
     */
     function selectLastDayOfMonth() {
         var newDate = new Date(calendar.selectedDate);
-        newDate.setDate(DateUtils.daysInMonth(newDate));
+        newDate.setDate(CalendarUtils.daysInMonth(newDate));
         calendar.selectedDate = newDate;
     }
 
@@ -257,243 +246,49 @@ Control {
         Selects the day before the current day in \l selectedDate.
     */
     function selectPreviousDay() {
-        if (view.currentIndex != 0) {
-            // Be lazy and let the view determine which index we're moving
-            // to, then we can calculate the date from that.
-            view.moveCurrentIndexLeft();
-            // This will cause the index to be set again (to the same value).
-            calendar.selectedDate = __model.dateAt(view.currentIndex);
-        } else {
-            // We're at the left edge of the calendar on the first row;
-            // this day is the first of the week and the month, so
-            // moving left should go to the last day of the previous month,
-            // rather than do nothing (which is what GridView does when
-            // keyNavigationWraps is false).
-            var newDate = new Date(calendar.selectedDate);
-            newDate.setDate(newDate.getDate() - 1);
-            calendar.selectedDate = newDate;
-        }
+        var newDate = new Date(calendar.selectedDate);
+        newDate.setDate(newDate.getDate() - 1);
+        calendar.selectedDate = newDate;
     }
 
     /*!
         Selects the day after the current day in \l selectedDate.
     */
     function selectNextDay() {
-        view.moveCurrentIndexRight();
-        calendar.selectedDate = __model.dateAt(view.currentIndex);
+        var newDate = new Date(calendar.selectedDate);
+        newDate.setDate(newDate.getDate() + 1);
+        calendar.selectedDate = newDate;
     }
 
-    Item {
-        /*
-            This is here instead of CalendarStyle, because the interactive
-            stuff shouldn't be in the style, and because the various components
-            of the calendar need to be anchored around the grid.
-        */
-        id: panel
-
-        anchors.fill: parent
+    Keys.onLeftPressed: {
+        calendar.selectPreviousDay();
+    }
 
-        property alias navigationBarItem: navigationBarLoader.item
+    Keys.onUpPressed: {
+        calendar.selectPreviousWeek();
+    }
 
-        Loader {
-            id: backgroundLoader
-            anchors.fill: parent
-            sourceComponent: __style.background
-        }
+    Keys.onDownPressed: {
+        calendar.selectNextWeek();
+    }
 
-        Loader {
-            id: navigationBarLoader
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.top: parent.top
-            sourceComponent: __style.navigationBar
-        }
+    Keys.onRightPressed: {
+        calendar.selectNextDay();
+    }
 
-        Item {
-            id: viewContainer
-            anchors.top: navigationBarLoader.bottom
-            width: view.cellWidth * DateUtils.daysInAWeek
-            height: view.cellHeight * (view.weeksToShow + 1)
-
-            Repeater {
-                id: verticalGridLineRepeater
-                model: DateUtils.daysInAWeek + 1
-                delegate: Rectangle {
-                    x: view.cellWidth * index
-                    y: 0
-                    width: __style.gridLineWidth
-                    height: view.cellHeight * (verticalGridLineRepeater.count - 1) + __style.gridLineWidth
-                    color: __style.gridColor
-                    visible: calendar.gridVisible
-                }
-            }
-
-            Repeater {
-                id: horizontalGridLineRepeater
-                model: view.weeksToShow + 2
-                delegate: Rectangle {
-                    x: 0
-                    y: view.cellHeight * index
-                    width: view.cellWidth * (horizontalGridLineRepeater.count - 1) + __style.gridLineWidth
-                    height: __style.gridLineWidth
-                    color: __style.gridColor
-                    visible: calendar.gridVisible
-                }
-            }
-
-            GridView {
-                id: view
-                /*
-                    The cells will be as big as possible without causing them to spill over into the next row.
-                    When gridVisible is true, we make the cells bigger to account for the grid lines.
-                */
-                cellWidth: Math.floor((calendar.width - (calendar.gridVisible ? __style.gridLineWidth : 0)) / DateUtils.daysInAWeek)
-                cellHeight: Math.floor((calendar.height - (calendar.gridVisible ? __style.gridLineWidth : 0)
-                    - navigationBarLoader.height) / (weeksToShow + 1))
-                currentIndex: -1
-                x: calendar.gridVisible ? __style.gridLineWidth : 0
-                y: calendar.gridVisible ? __style.gridLineWidth : 0
-                width: parent.width
-                height: parent.height
-
-                // TODO: fix the reason behind + 1 stopping the flickableness..
-                // might have something to do with the header
-
-                model: calendar.__model
-
-                boundsBehavior: Flickable.StopAtBounds
-                KeyNavigation.tab: panel.navigationBarItem
-
-                readonly property int weeksToShow: 6
-
-                Keys.forwardTo: [calendar]
-
-                Keys.onLeftPressed: {
-                    calendar.selectPreviousDay();
-                }
-
-                Keys.onUpPressed: {
-                    calendar.selectPreviousWeek();
-                }
-
-                Keys.onDownPressed: {
-                    calendar.selectNextWeek();
-                }
-
-                Keys.onRightPressed: {
-                    calendar.selectNextDay();
-                }
-
-                Keys.onEscapePressed: {
-                    calendar.escapePressed();
-                }
-
-                Keys.onPressed: {
-                    if (event.key === Qt.Key_Home) {
-                        calendar.selectFirstDayOfMonth();
-                        event.accepted = true;
-                    } else if (event.key === Qt.Key_End) {
-                        calendar.selectLastDayOfMonth();
-                        event.accepted = true;
-                    } else if (event.key === Qt.Key_PageUp) {
-                        calendar.selectPreviousMonth();
-                        event.accepted = true;
-                    } else if (event.key === Qt.Key_PageDown) {
-                        calendar.selectNextMonth();
-                        event.accepted = true;
-                    }
-                }
-
-                Component.onCompleted: {
-                    dateChanged();
-
-                    if (visible) {
-                        forceActiveFocus();
-                    }
-                }
-
-                Connections {
-                    target: calendar
-                    onSelectedDateChanged: view.dateChanged()
-                }
-
-                function dateChanged() {
-                    if (model !== undefined && model.locale !== undefined) {
-                        __model.selectedDate = calendar.selectedDate;
-                        currentIndex = __model.indexAt(calendar.selectedDate);
-                    }
-                }
-
-                delegate: Loader {
-                    id: delegateLoader
-                    width: view.cellWidth - (calendar.gridVisible ? __style.gridLineWidth : 0)
-                    height: view.cellHeight - (calendar.gridVisible ? __style.gridLineWidth : 0)
-                    sourceComponent: __style.dateDelegate
-
-                    readonly property int __index: index
-                    readonly property var __model: model
-
-                    property QtObject styleData: QtObject {
-                        readonly property alias index: delegateLoader.__index
-                        readonly property alias model: delegateLoader.__model
-                        readonly property bool selected: delegateLoader.GridView.isCurrentItem
-                        readonly property date date: model.date
-                    }
-
-                    MouseArea {
-                        anchors.fill: parent
-
-                        function setDateIfValid(date) {
-                            if (calendar.isValidDate(date)) {
-                                calendar.selectedDate = date;
-                            }
-                        }
-
-                        onClicked: {
-                            setDateIfValid(date)
-                        }
-
-                        onDoubleClicked: {
-                            if (date.getTime() === calendar.selectedDate.getTime()) {
-                                // Only accept double clicks if the first click does not
-                                // change the month displayed. This is because double-
-                                // clicking on a date in the next month will first cause
-                                // a single click which will change the month and the
-                                // the release will be triggered on the same index but a
-                                // different date (the date in the next month).
-                                calendar.doubleClicked(date);
-                            }
-                        }
-                    }
-                }
-
-                header: Loader {
-                    width: view.width
-                    height: view.cellHeight
-
-                    sourceComponent: Row {
-                        spacing: (calendar.gridVisible ? __style.gridLineWidth : 0)
-                        Repeater {
-                            id: repeater
-                            model: CalendarHeaderModel {
-                                locale: calendar.locale
-                            }
-                            Loader {
-                                id: dayOfWeekDelegateLoader
-                                sourceComponent: __style.weekdayDelegate
-                                width: view.cellWidth - (calendar.gridVisible ? __style.gridLineWidth : 0)
-                                height: view.cellHeight - (calendar.gridVisible ? __style.gridLineWidth : 0)
-
-                                readonly property var __dayOfWeek: dayOfWeek
-
-                                property QtObject styleData: QtObject {
-                                    readonly property alias dayOfWeek: dayOfWeekDelegateLoader.__dayOfWeek
-                                }
-                            }
-                        }
-                    }
-                }
-            }
+    Keys.onPressed: {
+        if (event.key === Qt.Key_Home) {
+            calendar.selectFirstDayOfMonth();
+            event.accepted = true;
+        } else if (event.key === Qt.Key_End) {
+            calendar.selectLastDayOfMonth();
+            event.accepted = true;
+        } else if (event.key === Qt.Key_PageUp) {
+            calendar.selectPreviousMonth();
+            event.accepted = true;
+        } else if (event.key === Qt.Key_PageDown) {
+            calendar.selectNextMonth();
+            event.accepted = true;
         }
     }
 }
diff --git a/src/controls/Private/DateUtils.js b/src/controls/Private/CalendarUtils.js
index 6e1b2385..fc2211ba 100644
--- a/src/controls/Private/DateUtils.js
+++ b/src/controls/Private/CalendarUtils.js
@@ -73,3 +73,39 @@ function setMonth(date, month) {
     newDate.setDate(Math.min(oldDay, daysInMonth(newDate)));
     return newDate;
 }
+
+function cellRectAt(index, columns, rows, availableWidth, availableHeight) {
+    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 rect = Qt.rect(0, 0, 0, 0);
+
+    rect.x = baseCellWidth * col;
+    rect.width = baseCellWidth;
+    if (remainingHorizontalSpace > 0) {
+        if (col < remainingHorizontalSpace) {
+            ++rect.width;
+        }
+
+        // This cell's x position should be increased by 1 for every column above it.
+        rect.x += Math.min(remainingHorizontalSpace, col);
+    }
+
+    rect.y = baseCellHeight * row;
+    rect.height = baseCellHeight;
+    if (remainingVerticalSpace > 0) {
+        if (row < remainingVerticalSpace) {
+            ++rect.height;
+        }
+
+        // This cell's y position should be increased by 1 for every row above it.
+        rect.y += Math.min(remainingVerticalSpace, row);
+    }
+
+    return rect;
+}
diff --git a/src/controls/Private/private.pri b/src/controls/Private/private.pri
index 022fb156..fe7b2550 100644
--- a/src/controls/Private/private.pri
+++ b/src/controls/Private/private.pri
@@ -35,7 +35,7 @@ PRIVATE_QML_FILES += \
     $$PWD/BasicButton.qml \
     $$PWD/Control.qml \
     $$PWD/CalendarHeaderModel.qml \
-    $$PWD/DateUtils.js \
+    $$PWD/CalendarUtils.js \
     $$PWD/FastGlow.qml \
     $$PWD/SourceProxy.qml\
     $$PWD/Style.qml \
diff --git a/src/controls/Private/qmldir b/src/controls/Private/qmldir
index e80debb7..be90acb8 100644
--- a/src/controls/Private/qmldir
+++ b/src/controls/Private/qmldir
@@ -2,7 +2,7 @@ module QtQuick.Controls.Private
 AbstractCheckable 1.0 AbstractCheckable.qml
 CalendarHeaderModel 1.0 CalendarHeaderModel.qml
 Control 1.0 Control.qml
-DateUtils 1.0 DateUtils.js
+CalendarUtils 1.0 CalendarUtils.js
 FocusFrame 1.0 FocusFrame.qml
 Margins 1.0 Margins.qml
 BasicButton 1.0 BasicButton.qml
diff --git a/src/controls/Styles/Base/CalendarStyle.qml b/src/controls/Styles/Base/CalendarStyle.qml
index 51f50080..527f72cf 100644
--- a/src/controls/Styles/Base/CalendarStyle.qml
+++ b/src/controls/Styles/Base/CalendarStyle.qml
@@ -74,7 +74,7 @@ import QtQuick.Controls.Private 1.0
                     }
                 }
 
-                Text {
+                Label {
                     text: styleData.date.getDate()
                     anchors.centerIn: parent
                     color: "white"
@@ -113,11 +113,11 @@ Style {
     property color gridColor: "#f0f0f0"
 
     /*!
-        The width of each grid line.
+        \internal
 
-        The default value is \c 1.
+        The width of each grid line.
     */
-    property real gridLineWidth: 1
+    property real __gridLineWidth: 1
 
     /*!
         The background of the calendar.
@@ -152,7 +152,7 @@ Style {
 
             onClicked: control.selectPreviousMonth()
         }
-        Text {
+        Label {
             id: dateText
             text: control.selectedDateText
             elide: Text.ElideRight
@@ -198,7 +198,7 @@ Style {
         readonly property color differentMonthDateTextColor: Qt.darker("darkgrey", 1.4);
         readonly property color invalidDatecolor: "#dddddd"
 
-        Text {
+        Label {
             id: dayDelegateText
             text: styleData.date.getDate()
             font.pixelSize: 14
@@ -225,9 +225,186 @@ Style {
     */
     property Component weekdayDelegate: Rectangle {
         color: "white"
-        Text {
+        Label {
             text: control.locale.dayName(styleData.dayOfWeek, control.dayOfWeekFormat)
             anchors.centerIn: parent
         }
     }
+
+    /*! \internal */
+    property Component panel: Item {
+        id: panel
+
+        implicitWidth: 200
+        implicitHeight: 200
+
+        property alias navigationBarItem: navigationBarLoader.item
+
+        Loader {
+            id: backgroundLoader
+            anchors.fill: parent
+            sourceComponent: background
+        }
+
+        Loader {
+            id: navigationBarLoader
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.top: parent.top
+            sourceComponent: navigationBar
+        }
+
+        Row {
+            id: weekdayHeaderRow
+            spacing: (control.gridVisible ? __gridLineWidth : 0)
+            anchors.top: navigationBarLoader.bottom
+            anchors.left: parent.left
+            anchors.leftMargin: (control.gridVisible ? __gridLineWidth : 0)
+            anchors.right: parent.right
+            height: 40
+
+            Repeater {
+                id: repeater
+                model: CalendarHeaderModel {
+                    locale: control.locale
+                }
+                Loader {
+                    id: dayOfWeekDelegateLoader
+                    sourceComponent: weekdayDelegate
+                    width: CalendarUtils.cellRectAt(index, view.columns, view.rows, view.availableWidth, view.availableHeight).width
+                        - (control.gridVisible ? __gridLineWidth : 0)
+                    height: weekdayHeaderRow.height
+
+                    readonly property var __dayOfWeek: dayOfWeek
+
+                    property QtObject styleData: QtObject {
+                        readonly property alias dayOfWeek: dayOfWeekDelegateLoader.__dayOfWeek
+                    }
+                }
+            }
+        }
+
+        // Contains the grid lines and the grid itself.
+        Item {
+            id: viewContainer
+            width: panel.width
+            height: panel.height - navigationBarLoader.height - weekdayHeaderRow.height
+            anchors.top: weekdayHeaderRow.bottom
+
+            Repeater {
+                id: verticalGridLineRepeater
+                model: view.columns + 1
+                delegate: Rectangle {
+                    // The last line will be an invalid index, so we must handle it
+                    x: index < view.columns
+                       ? CalendarUtils.cellRectAt(index, view.columns, view.rows, view.availableWidth, view.availableHeight).x
+                       : CalendarUtils.cellRectAt(view.columns - 1, view.columns, view.rows, view.availableWidth, view.availableHeight).x
+                         + CalendarUtils.cellRectAt(view.columns - 1, view.columns, view.rows, view.availableWidth, view.availableHeight).width
+                    y: 0
+                    width: __gridLineWidth
+                    height: viewContainer.height
+                    color: gridColor
+                    visible: control.gridVisible
+                }
+            }
+
+            Repeater {
+                id: horizontalGridLineRepeater
+                model: view.rows + 1
+                delegate: Rectangle {
+                    x: 0
+                    // The last line will be an invalid index, so we must handle it
+                    y: index < view.columns - 1
+                        ? CalendarUtils.cellRectAt(index * view.columns, view.columns, view.rows, view.availableWidth, view.availableHeight).y
+                        : CalendarUtils.cellRectAt((view.rows - 1) * view.columns, view.columns, view.rows, view.availableWidth, view.availableHeight).y
+                          + CalendarUtils.cellRectAt((view.rows - 1) * view.columns, view.columns, view.rows, view.availableWidth, view.availableHeight).height
+                    width: viewContainer.width
+                    height: __gridLineWidth
+                    color: gridColor
+                    visible: control.gridVisible
+                }
+            }
+
+            Connections {
+                target: control
+                onSelectedDateChanged: view.dateChanged()
+            }
+
+            Repeater {
+                id: view
+
+                property int currentIndex: -1
+
+                readonly property int weeksToShow: 6
+                readonly property int rows: weeksToShow
+                readonly property int columns: CalendarUtils.daysInAWeek
+
+                model: control.__model
+
+                Component.onCompleted: dateChanged()
+
+                function dateChanged() {
+                    if (model !== undefined && model.locale !== undefined) {
+                        model.selectedDate = control.selectedDate;
+                        currentIndex = model.indexAt(control.selectedDate);
+                    }
+                }
+
+                // The combined available width and height to be shared amongst each cell.
+                readonly property real availableWidth: (viewContainer.width - (control.gridVisible ? __gridLineWidth : 0))
+                readonly property real availableHeight: (viewContainer.height - (control.gridVisible ? __gridLineWidth : 0))
+
+                delegate: Loader {
+                    id: delegateLoader
+
+                    x: CalendarUtils.cellRectAt(index, view.columns, view.rows, view.availableWidth, view.availableHeight).x
+                        + (control.gridVisible ? __gridLineWidth : 0)
+                    y: CalendarUtils.cellRectAt(index, view.columns, view.rows, view.availableWidth, view.availableHeight).y
+                        + (control.gridVisible ? __gridLineWidth : 0)
+                    width: CalendarUtils.cellRectAt(index, view.columns, view.rows, view.availableWidth, view.availableHeight).width
+                        - (control.gridVisible ? __gridLineWidth : 0)
+                    height: CalendarUtils.cellRectAt(index, view.columns, view.rows, view.availableWidth, view.availableHeight).height
+                        - (control.gridVisible ? __gridLineWidth : 0)
+
+                    sourceComponent: dateDelegate
+
+                    readonly property int __index: index
+                    readonly property var __model: model
+
+                    property QtObject styleData: QtObject {
+                        readonly property alias index: delegateLoader.__index
+                        readonly property alias model: delegateLoader.__model
+                        readonly property bool selected: view.currentIndex == index
+                        readonly property date date: model.date
+                    }
+
+                    MouseArea {
+                        anchors.fill: parent
+
+                        function setDateIfValid(date) {
+                            if (control.isValidDate(date)) {
+                                control.selectedDate = date;
+                            }
+                        }
+
+                        onClicked: {
+                            setDateIfValid(date)
+                        }
+
+                        onDoubleClicked: {
+                            if (date.getTime() === control.selectedDate.getTime()) {
+                                // Only accept double clicks if the first click does not
+                                // change the month displayed. This is because double-
+                                // clicking on a date in the next month will first cause
+                                // a single click which will change the month and the
+                                // the release will be triggered on the same index but a
+                                // different date (the date in the next month).
+                                control.doubleClicked(date);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
 }
diff --git a/src/controls/Styles/Desktop/CalendarStyle.qml b/src/controls/Styles/Desktop/CalendarStyle.qml
index 1d600eab..bf8047f6 100644
--- a/src/controls/Styles/Desktop/CalendarStyle.qml
+++ b/src/controls/Styles/Desktop/CalendarStyle.qml
@@ -43,22 +43,16 @@
 
 import QtQuick 2.1
 import QtQuick.Controls 1.1
-import QtQuick.Controls.Private 1.0
+import QtQuick.Controls.Styles 1.1
 
-Style {
+CalendarStyle {
     id: calendarStyle
 
-    property Calendar control: __control
-
-    property color gridColor: "#f0f0f0"
-
-    property real gridLineWidth: 1
-
-    property Component background: Rectangle {
+    background: Rectangle {
         color: __syspal.base
     }
 
-    property Component navigationBar: Item {
+    navigationBar: Item {
         height: 40
 
         Rectangle {
@@ -79,7 +73,7 @@ Style {
 
             onClicked: control.selectPreviousMonth()
         }
-        Text {
+        Label {
             id: dateText
             text: control.selectedDateText
             anchors.centerIn: parent
@@ -97,11 +91,11 @@ Style {
         }
     }
 
-    property Component dateDelegate: Rectangle {
+    dateDelegate: Rectangle {
         id: dayDelegate
         color: styleData.date !== undefined && styleData.selected ? __syspal.highlight : __syspal.base
 
-        Text {
+        Label {
             SystemPalette {
                 id: pal
                 colorGroup: styleData.date.getMonth() === control.selectedDate.getMonth()
@@ -114,9 +108,9 @@ Style {
         }
     }
 
-    property Component weekdayDelegate: Rectangle {
+    weekdayDelegate: Rectangle {
         color: __syspal.base
-        Text {
+        Label {
             text: control.locale.dayName(styleData.dayOfWeek, control.dayOfWeekFormat)
             anchors.centerIn: parent
         }
diff --git a/tests/auto/controls/data/tst_calendar.qml b/tests/auto/controls/data/tst_calendar.qml
index bcfaa34d..2eb44a45 100644
--- a/tests/auto/controls/data/tst_calendar.qml
+++ b/tests/auto/controls/data/tst_calendar.qml
@@ -51,7 +51,7 @@ Item {
         id: testcase
         name: "Tests_Calendar"
         when: windowShown
-        readonly property int cellWidth: calendar !== undefined ? calendar.width / DateUtils.daysInAWeek : 0
+        readonly property int cellWidth: calendar !== undefined ? calendar.width / CalendarUtils.daysInAWeek : 0
         readonly property int cellHeight: calendar !== undefined ? calendar.height / 7 - navigationBarHeight : 0
         readonly property int navigationBarHeight: 40
         readonly property int firstDateCellX: cellWidth / 2
@@ -146,14 +146,14 @@ Item {
 
         // Should be able to use the full JS date range.
         function test_minMaxJsDateRange() {
-            calendar.minimumDate = DateUtils.minimumCalendarDate;
-            calendar.maximumDate = DateUtils.maximumCalendarDate;
+            calendar.minimumDate = CalendarUtils.minimumCalendarDate;
+            calendar.maximumDate = CalendarUtils.maximumCalendarDate;
 
-            calendar.selectedDate = DateUtils.minimumCalendarDate;
-            compare(calendar.selectedDate, DateUtils.minimumCalendarDate);
+            calendar.selectedDate = CalendarUtils.minimumCalendarDate;
+            compare(calendar.selectedDate, CalendarUtils.minimumCalendarDate);
 
-            calendar.selectedDate = DateUtils.maximumCalendarDate;
-            compare(calendar.selectedDate, DateUtils.maximumCalendarDate);
+            calendar.selectedDate = CalendarUtils.maximumCalendarDate;
+            compare(calendar.selectedDate, CalendarUtils.maximumCalendarDate);
         }
 
         function test_minMaxUndefined() {
@@ -347,10 +347,10 @@ Item {
             compare(calendar.selectedDate, startDate);
 
             var firstVisibleDate = new Date(2012, 11, 30);
-            for (var week = 0; week < DateUtils.weeksOnACalendarMonth; ++week) {
-                for (var day = 0; day < DateUtils.daysInAWeek; ++day) {
+            for (var week = 0; week < CalendarUtils.weeksOnACalendarMonth; ++week) {
+                for (var day = 0; day < CalendarUtils.daysInAWeek; ++day) {
                     var expectedDate = new Date(firstVisibleDate);
-                    expectedDate.setDate(expectedDate.getDate() + (week * DateUtils.daysInAWeek + day));
+                    expectedDate.setDate(expectedDate.getDate() + (week * CalendarUtils.daysInAWeek + day));
 
                     mouseClick(calendar, toPixelsX(day), toPixelsY(week), Qt.LeftButton);
                     expectFail("", "TODO: Mouse click seems to go to cell above (header). Works manually.");
@@ -398,11 +398,110 @@ Item {
             }
         }
 
-        function test_escapePressed() {
-            signalSpy.signalName = "escapePressed";
-            signalSpy.target = calendar;
-            keyPress(Qt.Key_Escape);
-            compare(signalSpy.count, 1);
+        function ensureNoGapsBetweenCells(columns, rows, availableWidth, availableHeight) {
+            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, thisHorizontalRect.x,
+                        "Gaps 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, thisVerticalRect.y,
+                        "Gaps 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_cellRectCalculation() {
+            var columns = CalendarUtils.daysInAWeek;
+            var rows = CalendarUtils.weeksOnACalendarMonth;
+
+            // No extra space available.
+            var availableWidth = 10 * columns;
+            var availableHeight = 10 * rows;
+            var rect = CalendarUtils.cellRectAt(0, columns, rows, availableWidth, availableHeight);
+            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);
+            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);
+            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);
+
+            // 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);
+            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);
+            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);
+            compare(rect.x, (columns - 1) * 10 + 1);
+            compare(rect.y, (rows - 1) * 10 + 1);
+            compare(rect.width, 10);
+            compare(rect.height, 10);
+
+            ensureNoGapsBetweenCells(columns, rows, availableWidth, availableHeight);
+
+            // 6 extra pixels in width, 5 in height.
+            availableWidth = 10 * columns + 6;
+            availableHeight = 10 * rows + 5;
+            rect = CalendarUtils.cellRectAt(0, columns, rows, availableWidth, availableHeight);
+            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);
+            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);
+            compare(rect.x, (columns - 1) * 10 + 6);
+            compare(rect.y, (rows - 1) * 10 + 5);
+            compare(rect.width, 10);
+            compare(rect.height, 10);
+
+            ensureNoGapsBetweenCells(columns, rows, availableWidth, availableHeight);
+
+            availableWidth = 280;
+            availableHeight = 190;
+            ensureNoGapsBetweenCells(columns, rows, availableWidth, availableHeight);
+
+            for (var i = 0; i < columns; ++i) {
+                ++availableWidth;
+                ensureNoGapsBetweenCells(columns, rows, availableWidth, availableHeight);
+            }
+
+            for (i = 0; i < columns; ++i) {
+                ++availableHeight;
+                ensureNoGapsBetweenCells(columns, rows, availableWidth, availableHeight);
+            }
         }
     }
 }
diff --git a/tests/auto/controls/data/tst_rangeddate.qml b/tests/auto/controls/data/tst_rangeddate.qml
index b648bb28..7636fdc1 100644
--- a/tests/auto/controls/data/tst_rangeddate.qml
+++ b/tests/auto/controls/data/tst_rangeddate.qml
@@ -63,11 +63,11 @@ Item {
         }
 
         function test_minMax() {
-            rangedDate.minimumDate = DateUtils.minimumCalendarDate;
-            rangedDate.maximumDate = DateUtils.maximumCalendarDate;
+            rangedDate.minimumDate = CalendarUtils.minimumCalendarDate;
+            rangedDate.maximumDate = CalendarUtils.maximumCalendarDate;
 
-            compare(rangedDate.minimumDate.getTime(), DateUtils.minimumCalendarDate.getTime());
-            compare(rangedDate.maximumDate.getTime(), DateUtils.maximumCalendarDate.getTime());
+            compare(rangedDate.minimumDate.getTime(), CalendarUtils.minimumCalendarDate.getTime());
+            compare(rangedDate.maximumDate.getTime(), CalendarUtils.maximumCalendarDate.getTime());
         }
 
         function test_constructionPropertyOrder() {