...
 
Commits (2)
......@@ -5,16 +5,25 @@ import QtQuick 2.0
Item {
id: base
property string backgroundColor: "#2A303E"
// Returned date
property var selectedDate : new Date()
// Background
property string backgroundColor : "#2A303E"
property string selectedDateHighlightColor: "#5A404E"
property string monthTextColor : "#E5DB82"
property string weekDayTextColor: "#525A67"
property string dayTextColor : "white"
property string textFamilyFont : "Ubuntu"
// Text
property string monthTextColor : "#E5DB82"
property string weekDayTextColor: "#626A77"
property string dayTextColor : "white"
property string textFamilyFont : "Ubuntu"
property int textPixelSize : 16
property var selectedDate : new Date()
// Grid
property string gridLinesColor : backgroundColor
property bool showGrid : false
// Get number of days in selected month
function monthDays(){
var d= new Date(selectedDate.getFullYear(), selectedDate.getMonth()+1, 0);
return d.getDate();
......@@ -52,17 +61,20 @@ Item {
height: parent.height
color: base.backgroundColor
Text {
width: parent.width
height: parent.height
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
color: "white"
text: "<"
Image {
width: parent.width * 0.5
height: parent.height * 0.5
anchors.centerIn: parent
fillMode: Image.PreserveAspectFit
source : "qrc:/left_arrow.png"
opacity: previousMonthMA.pressed ? 0.66 : 1
}
MouseArea {
id: previousMonthMA
anchors.fill: parent
onClicked: {
console.log("Previous month clicked")
......@@ -89,7 +101,7 @@ Item {
font.family: base.textFamilyFont
font.bold: true
font.capitalization: Font.Capitalize
font.pixelSize: base.textPixelSize
text: String(Qt.formatDateTime(base.selectedDate, "MMMM")) + " " + base.selectedDate.getFullYear().toString()
}
}
......@@ -100,19 +112,18 @@ Item {
height: parent.height
color: base.backgroundColor
Text {
width: parent.width
height: parent.height
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
color: "white"
Image {
width: parent.width * 0.5
height: parent.height * 0.5
anchors.centerIn: parent
fillMode: Image.PreserveAspectFit
text: ">"
source : "qrc:/right_arrow.png"
opacity: nextMonthMA.pressed ? 0.66 : 1
}
MouseArea {
id: nextMonthMA
anchors.fill: parent
onClicked: {
console.log("Next month clicked : " + base.selectedDate.getMonth() + base.selectedDate.getFullYear())
......@@ -152,6 +163,7 @@ Item {
font.family: base.textFamilyFont
font.bold: true
font.pixelSize: base.textPixelSize
text: String(day)
}
......@@ -176,6 +188,9 @@ Item {
width: dayGrid.cellWidth
height: dayGrid.cellHeight
border.color: base.gridLinesColor
border.width: base.showGrid ? 1 : 0
// Hiighlight element
Rectangle {
color: base.selectedDateHighlightColor
......@@ -196,6 +211,8 @@ Item {
font.family: base.textFamilyFont
font.bold: base.selectedDate.getDate() - 1 === index ? true: false
font.pixelSize: base.textPixelSize
text: index + 1
}
......
left_arrow.png

932 Bytes

QT += core gui qml quick
RESOURCES += \
$$PWD/myqtcomponents_uielements.qrc
<RCC>
<qresource prefix="/">
<file>GPCalendarComponent.qml</file>
<file>left_arrow.png</file>
<file>right_arrow.png</file>
</qresource>
</RCC>