Import Statement:<span style="white-space:pre"> </span>
import QtQuick.Controls 1.2
Since:<span style="white-space:pre"> </span> Qt 5.3
Inherits:<span style="white-space:pre"> </span>
FocusScope
Properties
dayOfWeekFormat : int
frameVisible : bool
maximumDate : date
minimumDate : date
selectedDate : date
style : Component
visibleMonth : int
visibleYear : int
weekNumbersVisible : bool
Signals
clicked(date date)
doubleClicked(date date)
hovered(date date)
pressed(date date)
released(date date)
Methods
showNextMonth()
showNextYear()
showPreviousMonth()
showPreviousYear()
日历控件是基于Qt5.x以上 需要导入QtQuick.Controls.1.2即可使用
日历控件主要使用到三个样式的设置
使用其中style:CalendarStyle
background : Component
control : Calendar
dayDelegate : Component
dayOfWeekDelegate : Component
gridColor : color
gridVisible : bool
navigationBar : Component
weekNumberDelegate : Component
其中dayDelegate主要设置日期的样式
dayOfWeekDelegate 主要设置周的样式
navigationBar 主要设置导航选择月份的样式
background 主要设置背景样式
Calendar {
id: calendar
width: parent.width * 0.6 - row.spacing / 2
height: parent.height
selectedDate: new Date()
focus: true
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
}
}
dayOfWeekDelegate: Item{//设置周的样式
Rectangle{
anchors.fill: parent
Text {
id: weekTxt
text:Qt.locale().dayName(styleData.dayOfWeek, control.dayOfWeekFormat)//转换为自己想要的周的内容的表达
anchors.centerIn: parent
color: styleData.selected?"green":"gray"
}
}
}
navigationBar: Rectangle {//导航控制栏,控制日期上下选择等
color: "#49A9E3"
height: dateText.height * 4
Rectangle {
color: Qt.rgba(1, 1, 1, 0.6)
height: 1
width: parent.width
}
Rectangle {
anchors.bottom: parent.bottom
height: 1
width: parent.width
color: "#ddd"
}
ToolButton {
id: previousMonth
width: parent.height
height: width-20
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: 40
iconSource: "qrc:/images/left.png"
onClicked: control.showPreviousMonth()
}
Label {
id: dateText
text: styleData.title
font.pixelSize: 14
font.bold: true
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
fontSizeMode: Text.Fit
anchors.verticalCenter: parent.verticalCenter
anchors.left: previousMonth.right
anchors.leftMargin: 2
anchors.right: nextMonth.left
anchors.rightMargin: 2
}
ToolButton {
id: nextMonth
width: 60
height: 53
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: 40
iconSource: "qrc:/images/right.png"
onClicked: control.showNextMonth()
style: ButtonStyle {
background: Item {
implicitWidth: 25
implicitHeight: 25
}
}
}
}
}
}
日历控件差不多就这些样式需要设置,具体可以多参考Qt的帮助文档