CalendarStyle

Provides custom styling for Calendar More...

Import Statement: import QtQuick.Controls.Styles 1.2
Since: Qt 5.3

Properties

Detailed Description

Component Map

The calendar has the following styleable components:

backgroundFills the entire control.

navigationBar

dayOfWeekDelegateOne instance per day of week.

weekNumberDelegateOne instance per week.

dayDelegateOne instance per day of month.

Custom Style Example

Calendar {
    anchors.centerIn: parent

    style: CalendarStyle {
        gridVisible: false
        dayDelegate: Rectangle {
            gradient: Gradient {
                GradientStop {
                    position: 0.00
                    color: styleData.selected ? "#111" : (styleData.visibleMonth && styleData.valid ? "#444" : "#666");
                }
                GradientStop {
                    position: 1.00
                    color: styleData.selected ? "#444" : (styleData.visibleMonth && styleData.valid ? "#111" : "#666");
                }
                GradientStop {
                    position: 1.00
                    color: styleData.selected ? "#777" : (styleData.visibleMonth && styleData.valid ? "#111" : "#666");
                }
            }

            Label {
                text: styleData.date.getDate()
                anchors.centerIn: parent
                color: styleData.valid ? "white" : "grey"
            }

            Rectangle {
                width: parent.width
                height: 1
                color: "#555"
                anchors.bottom: parent.bottom
            }

            Rectangle {
                width: 1
                height: parent.height
                color: "#555"
                anchors.right: parent.right
            }
        }
    }
}

Property Documentation

background : Component

The background of the calendar.


control : Calendar

The Calendar attached to this style.


dayDelegate : Component

The delegate that styles each date in the calendar.

The properties provided to each delegate are:

readonly property date styleData.dateThe date this delegate represents.
readonly property bool styleData.selectedtrue if this is the selected date.
readonly property int styleData.indexThe index of this delegate.
readonly property bool styleData.validtrue if this date is greater than or equal to than minimumDate and less than or equal to maximumDate.
readonly property bool styleData.todaytrue if this date is equal to today's date.
readonly property bool styleData.visibleMonthtrue if the month in this date is the visible month.
readonly property bool styleData.hoveredtrue if the mouse is over this cell.

Note: This property is true even when the mouse is hovered over an invalid date.

readonly property bool styleData.pressedtrue if the mouse is pressed on this cell.

Note: This property is true even when the mouse is pressed on an invalid date.


dayOfWeekDelegate : Component

The delegate that styles each weekday.


gridColor : color

The color of the grid lines.


gridVisible : bool

This property determines the visibility of the grid.

The default value is true.


navigationBar : Component

The navigation bar of the calendar.

Styles the bar at the top of the calendar that contains the next month/previous month buttons and the selected date label.


weekNumberDelegate : Component

The delegate that styles each week number.