CalendarStyle
Provides custom styling for Calendar More...
Import Statement: | import QtQuick.Controls.Styles 1.1 |
Since: | Qt 5.3 |
Properties
- background : Component
- control : Calendar
- dayDelegate : Component
- dayOfWeekDelegate : Component
- gridColor : color
- navigationBar : Component
- weekNumberDelegate : Component
Detailed Description
Component Map
The calendar has the following styleable components:
background | Fills the entire control. | |
navigationBar | ||
dayOfWeekDelegate | One instance per day of week. | |
weekNumberDelegate | One instance per week. | |
dayDelegate | One instance per day of month. |
Custom Style Example
Calendar { anchors.centerIn: parent gridVisible: false style: CalendarStyle { 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
control : Calendar |
The Calendar attached to this style.
The delegate that styles each date in the calendar.
The properties provided to each delegate are:
readonly property date styleData.date | The date this delegate represents. |
readonly property bool styleData.selected | true if this is the selected date. |
readonly property int styleData.index | The index of this delegate. |
readonly property bool styleData.valid | true if this date is greater than or equal to than minimumDate and less than or equal to maximumDate. |
readonly property bool styleData.today | true if this date is equal to today's date. |
readonly property bool styleData.visibleMonth | true if the month in this date is the visible month. |
readonly property bool styleData.hovered | true 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.pressed | true if the mouse is pressed on this cell. Note: This property is true even when the mouse is pressed on an invalid date. |
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.