Displaying calendar via QML

[mohanakannan]

hi friends,
Could any one please tell how to display the calendar via Qml…I don’t want to work it via Qt…I have been trying this calendar for 1 week,but cant able to find out a right path…I want to display the calendar…And also if i clicked any date means ,it need to display the exact year,month and day of that date…and also it needs to supprt my system date and time..Suppose if i changed the date and time in this calendar means,it needs to change the system date and time and year etc…Please kindly help me…Advance thanks ..Hope i ll get the solution..

[wysota]

What calendar do you mean?

[mohanakannan]

What calendar do you mean?

Iam talking about normal calendar in Qml.

---

Added after 19 minutes:

Hi guys, Actually i was trying to display a calendar pop in QML,but still now i cant be able to work it out…I have brought the QML calendar ,but i don’t know how to set the date,if i clicked any date means.It should display the month,day,year of that particular day…and also the time…Below is the code…Please help me..

/************************************************** *********************/

import QtQuick 1.0

Rectangle {
id: calendar
width: 400; height: 300
color: "#303030"
property date today: new Date()
property date showDate: new Date()
property int daysInMonth: new Date(showDate.getFullYear(), showDate.getMonth() + 1, 0).getDate()
property int firstDay: new Date(showDate.getFullYear(), showDate.getMonth(), 1).getDay()

Item {
id:title
anchors.top: parent.top
anchors.topMargin: 10
width: parent.width
height: childrenRect.height

Image {
id:monthright
source: "Images/previous.png"
anchors.left: parent.left
anchors.leftMargin: 10

MouseArea {
anchors.fill: parent
onClicked: {
showDate = new Date(showDate.getFullYear(), showDate.getMonth(), 0)
}
}
}
Text {
id:month
color: "white"
text: Qt.formatDateTime(showDate, "MMMM")
font.bold: true
anchors.left:monthright.right
}
Image {
source: "Images/next.png"
anchors.left:month.right
MouseArea {
anchors.fill: parent
onClicked:
{
showDate = new Date( showDate.getFullYear(), showDate.getMonth() + 1, 1)
console.log(showDate)
}
}
}
Image {
source: "Images/previous.png"
anchors.right: yearleft.left
MouseArea {
anchors.fill: parent
onClicked: {
showDate = new Date(showDate.getFullYear()-1,0)
console.log(showDate)

}
}
}
Text {
id:yearleft
color: "white"
text: Qt.formatDateTime(showDate, "yyyy")
font.bold: true
anchors.right:year.left
}

Image {
id:year
source: "Images/next.png"
anchors.right: parent.right
anchors.rightMargin: 10

MouseArea {
anchors.fill: parent
onClicked:
{
showDate = new Date(showDate.getFullYear()+1, 1)
boxtext.text=new Date
console.log(showDate)
}
}
}
}

function isToday(index) {
if (today.getFullYear() != showDate.getFullYear())
return false;
if (today.getMonth() != showDate.getMonth())
return false;

return (index === today.getDate() - 1)
}

Item {
id: dateLabels
anchors.top: title.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.margins: 10

height: calendar.height - title.height - 20 - title.anchors.topMargin
property int rows: 6
Item {
id: dayLabels
width: parent.width
height: childrenRect.height

Grid {
columns: 7
spacing: 10

Repeater {
model: 7

Rectangle {
color: "#00ffffff"
width: (calendar.width - 20 - 60)/7
height: childrenRect.height

Text {
color: "#00000C"
// Qt dates (for formatting) and JavaScript dates use different ranges
// (1-7 and 0-6 respectively), so we add 1 to the day number.
text: Qt.formatDate(new Date(showDate.getFullYear(), showDate.getMonth(), index - firstDay +1), "ddd");
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
}
}
Item {
id: dateGrid
width: parent.width
anchors.top: dayLabels.bottom
anchors.topMargin: 5
anchors.bottom: parent.bottom

Grid {
columns: 7
rows: dateLabels.rows
spacing: 10

Repeater {
model: firstDay + daysInMonth

Rectangle {

color: {
if (index < firstDay)
calendar.color="green";
else
{
if(isToday(index-firstDay))
color="yellow";
else
color="#eeeeee"
}
// isToday(index - firstDay) ? "#ffffdd" : "#eeeeee";
}
width: (calendar.width - 20 - 60)/7
height: (dateGrid.height - (dateLabels.rows - 1)*10)/dateLabels.rows

Text {
anchors.centerIn: parent
text: index + 1 - firstDay
opacity: (index < firstDay) ? 0 : 1
font.bold: isToday(index - firstDay)
}
}
}
}
}
}
}

[mohanakannan]

Hi frnds,
Still now i cant able to find a solution for calendar via Qml alone….Could anyone please tell how to integerate Calendar popup in Qt with QML…This task seems to be very difficult..I have been trying to find solution for more than 1 week.please help me …

[wysota]

Still now i cant able to find a solution for calendar via Qml alone….Could anyone please tell how to integerate Calendar popup in Qt with QML…

First you need to implement a calendar and then you need to use it. I don't really see a problem... Could you explain better what problems are you having?

[mohanakannan]

First you need to implement a calendar and then you need to use it. I don't really see a problem... Could you explain better what problems are you having?

Thanks for your response..
Actually i want to display a calendar pop up in Qml..I have got the calendar...But my problem is,If i clicked any date in tt means,it should show the clicked date,time,month,year and day...And also my calendar Qml should support system calendar...Kindly help me..

[wysota]

But my problem is,If i clicked any date in tt means,it should show the clicked date,time,month,year and day...

Place a MouseArea in each of the calendar entries and implement the onClicked handler to show the date, time, month, year and day.

And also my calendar Qml should support system calendar...

Adjust your model to support different calendar systems.

[mohanakannan]

Place a MouseArea in each of the calendar entries and implement the onClicked handler to show the date, time, month, year and day.



Adjust your model to support different calendar systems.

Thank you sir,
But i dont know how to change the model to support different system calendar..Could you please explain it with small code...Very pleased

[wysota]

But i dont know how to change the model to support different system calendar..

What calendar systems do you wish to support?