Calendar in Qt via QML(Solved)

actionking · wrote on 2 Jun 2013, 13:14

thanks boss..If i put that "green" color in starting itself means...Only for the current month,it will be working..If we pressed next icon means green color will be changed to some other color(defaultly "white"...I guess it so)
Actually i want to display the date in the format (dd/mm/YYYY)..How to do it...
Very pleased....

JapieKrekel · wrote on 2 Jun 2013, 13:21

You should be able to use
@
console.log(Qt.formatDate(clickedDate, "dd/MM/yyyy"))
@

to do that.

actionking · wrote on 2 Jun 2013, 13:55

thank you sir for your immediate response.....But another problem arises..If i clicked new date means,it should come to Bold letter(yellow color)..Likewise if i clicked some other date means,now it should become bold letter and previous clicked date should go to normal one.

JapieKrekel · wrote on 2 Jun 2013, 14:37

I should say that the code is becoming a little bit ugly. I would use a component with states for each day rectangle, but to illustrate how it can be done here an example.

I'm happy to help, but I get the feeling you're a bit unexperienced in QML, maybe it is wise to first do some reading "QML intro":http://qt.digia.com/Product/Learning/Education/elearning/online-training/Qt-Essentials---Qt-Quick-Edition/#.UatX1EA5nfI

@
Item {
id: dateGrid
width: parent.width
anchors.top: dayLabels.bottom
anchors.topMargin: 5
anchors.bottom: parent.bottom
property int currentActive: -1
Grid {
columns: 7
rows: dateLabels.rows
spacing: 10

Repeater {
id: repeater
model: firstDay + daysInMonth
Rectangle {
property bool highLighted: false
property color normalColor

Component.onCompleted: {
 if (index < firstDay)
  normalColor = calendar.color="green";

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

Text {
 id: dateText
 color: highLighted?"yellow":"black"
 anchors.centerIn: parent
 text: index + 1 - firstDay
 opacity: (index < firstDay) ? 0 : 1
 font.bold: isToday(index - firstDay)  || highLighted
}

MouseArea {
 id: dateMouse
 anchors.fill: parent
 onClicked: {
  var clickedDate = new Date( showDate.getFullYear(), showDate.getMonth() + 1, index + 1 - firstDay)
  console.log(Qt.formatDate(clickedDate, "dd/mm/yyyy"))
  if (dateGrid.currentActive != -1) {
   // unselect it
   repeater.itemAt(dateGrid.currentActive).highLighted = false;
  }

  if (!isToday(index - firstDay)){
   highLighted = true
   dateGrid.currentActive = index
  }
 }
}

}
}
}
}

@

actionking · wrote on 2 Jun 2013, 14:52

Thank you sir,
Whatever you have said,its right...Ya i have been working in Qml for quite 1 and half month only.....Not bit inexperienced..more inexperienced.....again problem arises...if i clicked new date means,it becomes yellow and the date becomes inisible, its showing correct date...But after clicking another date,previous clicked date too in same yellow colr and clicked date becomes invisible....what can i do?I'm trying sir....

JapieKrekel · wrote on 2 Jun 2013, 16:19

I don´t get it, it works here. Here my whole file
@
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
                    }
                }
            }
        }
    }

@
rest in next reply, does not fit on one reply

JapieKrekel · wrote on 2 Jun 2013, 16:19

@
Item {
id: dateGrid
width: parent.width
anchors.top: dayLabels.bottom
anchors.topMargin: 5
anchors.bottom: parent.bottom
property int currentActive: -1
Grid {
columns: 7
rows: dateLabels.rows
spacing: 10

            Repeater {
                id: repeater
                model: firstDay + daysInMonth
                Rectangle {
                    property bool highLighted: false
                    property color normalColor

                    Component.onCompleted: {
                        if (index < firstDay)
                            normalColor = calendar.color="green";

                        else
                        {
                            if(isToday(index-firstDay))
                                normalColor = "yellow";
                            else
                                normalColor ="#eeeeee"
                        }
                    }
                    color: dateMouse.pressed?"blue":(highLighted?"grey":normalColor)
                    width: (calendar.width - 20 - 60)/7
                    height: (dateGrid.height - (dateLabels.rows - 1)*10)/dateLabels.rows

                    Text {
                        id: dateText
                        color: highLighted?"yellow":"black"
                        anchors.centerIn: parent
                        text: index + 1 - firstDay
                        opacity: (index < firstDay) ? 0 : 1
                        font.bold: isToday(index - firstDay)  || highLighted
                    }

                    MouseArea {
                        id: dateMouse
                        enabled: index >= firstDay
                        anchors.fill: parent
                        onClicked: {
                            var clickedDate = new Date( showDate.getFullYear(), showDate.getMonth() + 1, index + 1 - firstDay)
                            console.log(Qt.formatDate(clickedDate, "dd/MM/yyyy"))
                            if (dateGrid.currentActive != -1) {
                                // unselect it
                                repeater.itemAt(dateGrid.currentActive).highLighted = false;
                            }

                            if (!isToday(index - firstDay)){
                                highLighted = true
                                dateGrid.currentActive = index
                            }
                        }
                    }
                }
            }
        }
    }
}

}
@

actionking · wrote on 3 Jun 2013, 07:10

Thank you very much sir..Its worked.....thanks for sharing your knowledge...Very pleased for your help..

JapieKrekel · wrote on 3 Jun 2013, 18:26

Glad to help, if all is done, please close all your topics about the calander with [Solved] in front of the title. I believe you posted three of them.

DaveLoper · wrote on 22 Oct 2013, 08:01

Hey, thank you for this very helpful thread, that's a good starting base for a QML calendar.
Here is the same version using more modern layouts :
@import QtQuick 2.1
import QtQuick.Layouts 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/calendar.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/calendar.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

        GridLayout {
            columns: 7
            columnSpacing: 10
            rowSpacing: 10
            width: parent.width

            Repeater {
                model: 7

                Rectangle {

                    color: "#00ffffff"
                    Layout.preferredWidth: (calendar.width - 20 - 60)/7
                    Layout.preferredHeight: childrenRect.height
                    Layout.fillWidth: true
                    Layout.fillHeight: true

                    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
                    }
                }
            }
        }
    }

@

See next post for the rest

DaveLoper · wrote on 22 Oct 2013, 08:02

@ Item {
id: dateGrid
width: parent.width
anchors.top: dayLabels.bottom
anchors.topMargin: 5
anchors.bottom: parent.bottom
property int currentActive: -1
GridLayout {
columns: 7
width: parent.width
height: parent.height
columnSpacing: 10
rowSpacing: 10

                  Repeater {
                      id: repeater
                      model: firstDay + daysInMonth
                      Rectangle {
                          property bool highLighted: false
                          property color normalColor

                          Component.onCompleted: {
                              if (index < firstDay)
                                  normalColor = calendar.color="green";

                              else
                              {
                                  if(isToday(index-firstDay))
                                      normalColor = "yellow";
                                  else
                                      normalColor ="#eeeeee"
                              }
                          }
                          color: dateMouse.pressed?"blue":(highLighted?"grey":normalColor)
                          Layout.preferredWidth: (calendar.width - 20 - 60)/7
                          Layout.preferredHeight: (dateGrid.height - (dateLabels.rows - 1)*10)/dateLabels.rows
                          Layout.fillWidth: true
                          Layout.fillHeight: true

                          Text {
                              id: dateText
                              color: highLighted?"yellow":"black"
                              anchors.centerIn: parent
                              text: index + 1 - firstDay
                              opacity: (index < firstDay) ? 0 : 1
                              font.bold: isToday(index - firstDay)  || highLighted
                          }

                          MouseArea {
                              id: dateMouse
                              enabled: index >= firstDay
                              anchors.fill: parent
                              onClicked: {
                                  var clickedDate = new Date( showDate.getFullYear(), showDate.getMonth() + 1, index + 1 - firstDay)
                                  console.log(Qt.formatDate(clickedDate, "dd/MM/yyyy"))
                                  if (dateGrid.currentActive != -1) {
                                      // unselect it
                                      repeater.itemAt(dateGrid.currentActive).highLighted = false;
                                  }

                                  if (!isToday(index - firstDay)){
                                      highLighted = true
                                      dateGrid.currentActive = index
                                  }
                              }
                          }
                      }
                  }
              }
          }
      }
  }@