Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Calendar in Qt via QML(Solved)
Forum Updated to NodeBB v4.3 + New Features

Calendar in Qt via QML(Solved)

Scheduled Pinned Locked Moved QML and Qt Quick
16 Posts 3 Posters 8.8k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • A Offline
    A Offline
    actionking
    wrote on last edited by
    #3

    Much pleased with your reply..Actually i want to show calendar popup on clicking one button.That calendar should support system calendar..Suppose if i clicked any of the date means,it should show its day,month,year and time...I too worked your mouseclick which you have added,but its not working...Now you understand...Could you please find out the solution..below is the output..And i dont know how to insert my picture which i got as output...

    1 Reply Last reply
    0
    • A Offline
      A Offline
      actionking
      wrote on last edited by
      #4

      Very much thanks ,
      It works.......What i have expected....But need to do some changes...If i click any date means,its color should change...I'm working....If any query means,i will ask u boss.thanks a lot

      1 Reply Last reply
      0
      • J Offline
        J Offline
        JapieKrekel
        wrote on last edited by
        #5

        I'm glad 'it works'.

        I do not know if you need any further help, I find it very hard to understand your replies.

        So I'm guessing here, don't know if this is what you're looking for. If you want to change the color when the mouse is pressed and change it back when released the easiest in that case would be to give the mouse area an id and then use the mousearea pressed property to change the rectangle color.
        @
        ...
        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 {

        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 {
         anchors.centerIn: parent
         text: index + 1 - firstDay
         opacity: (index < firstDay) ? 0 : 1
         font.bold: isToday(index - firstDay)
        }
        
        MouseArea {
         id: dateMouse
         anchors.fill: parent
         onClicked: {
          var clickedDate = new Date( showDate.getFullYear(), showDate.getMonth() + 1, index + 1 - firstDay)
          console.log(clickedDate)
         }
        }
        

        }
        }
        }
        }
        ...
        @
        On line 20 I added a property to 'remember' the original color.

        I noticed that on line 6 you do color: "#303030" and later you do calendar.color="green", why don't you set the color of the calendar to "green" directly?

        Please let me know if I can do anything else for you.

        1 Reply Last reply
        0
        • A Offline
          A Offline
          actionking
          wrote on last edited by
          #6

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

          1 Reply Last reply
          0
          • J Offline
            J Offline
            JapieKrekel
            wrote on last edited by
            #7

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

            to do that.

            1 Reply Last reply
            0
            • A Offline
              A Offline
              actionking
              wrote on last edited by
              #8

              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.

              1 Reply Last reply
              0
              • J Offline
                J Offline
                JapieKrekel
                wrote on last edited by
                #9

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

                }
                }
                }
                }

                @

                1 Reply Last reply
                0
                • A Offline
                  A Offline
                  actionking
                  wrote on last edited by
                  #10

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

                  1 Reply Last reply
                  0
                  • J Offline
                    J Offline
                    JapieKrekel
                    wrote on last edited by
                    #11

                    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

                    1 Reply Last reply
                    0
                    • J Offline
                      J Offline
                      JapieKrekel
                      wrote on last edited by
                      #12

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

                      }
                      @

                      1 Reply Last reply
                      0
                      • A Offline
                        A Offline
                        actionking
                        wrote on last edited by
                        #13

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

                        1 Reply Last reply
                        0
                        • J Offline
                          J Offline
                          JapieKrekel
                          wrote on last edited by
                          #14

                          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.

                          1 Reply Last reply
                          0
                          • D Offline
                            D Offline
                            DaveLoper
                            wrote on last edited by
                            #15

                            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

                            1 Reply Last reply
                            0
                            • D Offline
                              D Offline
                              DaveLoper
                              wrote on last edited by
                              #16

                              @ 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
                                                                }
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }@
                              
                              1 Reply Last reply
                              0

                              • Login

                              • Login or register to search.
                              • First post
                                Last post
                              0
                              • Categories
                              • Recent
                              • Tags
                              • Popular
                              • Users
                              • Groups
                              • Search
                              • Get Qt Extensions
                              • Unsolved