Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Calendar QML type year selection



  • Can anybody show - how the year editing looks in QML Calendar type?
    Does it look same as in QCalendarWidget - just a QSpinBox with editable integer value?
    Is it possible in QML Calendar make year selection not as spin box but as scrollable drop down list with years from current and to +100?



  • Hi @Gourmet , i guess you can make use of the navigatonBar property in CalendarStyle and customize your navigation bar with Tumbler. So when you change the index of the Tumbler you can update your Calendar.

    I had just scribbled a sample code, may be you can customized according to your needs:-

     style: CalendarStyle {
                navigationBar: Rectangle {
                    height: 50
                    width: 500
                    color: "red"
                    
                    Row {
                        anchors.fill: parent
                        
                        MyTumbler {
                            id: monthTumbler
                            
                            model: monthModel
                            height: parent.height
                            width: parent.width / 2
                            
                            onCurrentIndexChanged: {
                                console.log("Month Changed-",currentIndex)
                            }
                        }
                        
                        MyTumbler {
                            id: yearTumbler
                            
                            model: yearModel
                            height: parent.height
                            width: parent.width / 2
                            
                            onCurrentIndexChanged: {
                                console.log("Year Changed-",currentIndex)
                            }
                        }
                    }
                }
            }
    

    **Note:**One thing Calender is not available in latest Quick Controls so you can do one thing, you can create a seperate .qml file which has the Tumbler code with the latest Quick Controls.

    MyTumbler.qml

    import QtQuick 2.12
    import QtQuick.Controls 2.5
    
    Tumbler {
    width: 100
    height: 50
    delegate:Label {
        text: txt
        opacity: 1.0 - Math.abs(Tumbler.displacement) / (Tumbler.tumbler.visibleItemCount / 2)
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        font.pixelSize: 11
      }
    }
    

    So the output of sample code somewhat looks like this:-

    0_1558674913810_626f6665-210d-4c51-8a05-856f688ad072-image.png

    For more information about:-

    NavigationBar[https://doc.qt.io/qt-5/qml-qtquick-controls-styles-calendarstyle.html#navigationBar-prop]

    Tumbler[https://doc.qt.io/qt-5/qml-qtquick-controls2-tumbler.html]



  • @Shrinidhi-Upadhyaya thanx but Tumbler is not what I need. I need lists looking like drop down menu with years and months as menu actions. Years list will be long and it looks better when scrolling. Such a list is more useful than Tumbler cause allows select needed close years with just two taps. But I will have Tumbler in mind.



  • Hi @Gourmet
    You can use the ComboBox {} if you want the drop down.

    Below is the sample code and output

    import QtQuick 2.9
    import QtQuick.Window 2.2
    import QtQuick.Controls 1.4
    import QtQuick.Layouts 1.12
    
    Window {
        visible: true
        width: 300
        height: width
    
        property var testMonthModel: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    
        ListModel {
            id: yearModel
        }
    
        ColumnLayout {
            anchors.centerIn: parent
    
            RowLayout {
                ComboBox {
                    id: month
    
                    Layout.fillWidth: true
                    model: testMonthModel
                }
    
                ComboBox {
                    id: year
    
                    Layout.fillWidth: true
                    model: yearModel
                }
            }
    
            Calendar {
                visibleMonth: month.currentIndex
                visibleYear: yearModel.get(year.currentIndex).text
    
                Component.onCompleted: {
                    // For loading initial value from ComboBox
                }
            }
        }
    
        Component.onCompleted: {
            loadSampleYears();
        }
    
        function loadSampleYears() {
            // Provide the Min & Max year as per your requirment
            for (var i = 2010; i < 2050; i++) {
                yearModel.append({"text" : i});
            }
        }
    }
    
    

    Output:

    0_1558936732302_Callender.gif



  • Hi @Gourmet , you can also use MonthGrid and DayOfWeekRow, which is the latest control i guess. Here in addition is the WeekNumberColumn, which gives the week number.

    Here is the sample code:-

     ListModel {
            id: yearsModel
        }
    
        RowLayout {
            id: comboBoxLayout
    
            height: 50
            width: parent.width
    
            ComboBox {
                id: monthComboBox
    
                Layout.fillWidth: true
                Layout.fillHeight: true
                model: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sept','Oct','Nov','Dec']
                currentIndex: 0
            }
    
            ComboBox {
                id: yearComboBox
    
                Layout.fillWidth: true
                Layout.fillHeight: true
                model: yearsModel
                currentIndex: 0
            }
        }
    
        GridLayout {
            width: parent.width
            anchors.top: comboBoxLayout.bottom
            columns: 2
    
            DayOfWeekRow {
                Layout.column: 1
                Layout.fillWidth: true
                locale: grid.locale
            }
    
            WeekNumberColumn {
                Layout.fillHeight: true
                month: grid.month
                year: grid.year
                locale: grid.locale
            }
    
            MonthGrid {
                id: grid
    
                Layout.fillWidth: true
                Layout.fillHeight: true
                month: monthComboBox.currentIndex
                year:  yearsModel.count !== -1 && yearComboBox.currentIndex !== -1
                       ? yearsModel.get(yearComboBox.currentIndex).yearVal
                       : 2019
                locale: Qt.locale("en_US")
            }
        }
    
        function loadYear() {
            //####Here you can specify the minimum and maximum year
            for(var i= 2010 ; i<= 2020;i++)
                yearsModel.append({"yearVal": i})
        }
    
        Component.onCompleted: {
            loadYear()
        }
    

    Sample Output:-

    0_1558938579185_8428521e-0f0e-4a4c-8fcb-3d5ec2695b58-image.png



  • @Pradeep-P-N said in Calendar QML type year selection:

    You can use the ComboBox {} if you want the drop down.

    Thanx. This looks closer to what I need. But - is the QML ComboBox scrollable by finger/mouse gesture? It must work on Android and scrollbar is not suitable. Sorry, I am not a keen in QML - just studying this tool.



  • Hello @Gourmet
    You are welcome.

    Yes the ComboBox is scrollable on android. Works with both finger and mouse gesture.

    Below is screenshot from android.

    0_1559011165407_9060baa7-55d5-4af9-bc83-4ddfa55430f3-image.png

    Also you can customize the ComboBoxStyle

    Have a great day.


Log in to reply