Calendar QML type year selection

[Gourmet]

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?

[Shrinidhi Upadhyaya]

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

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]

[Gourmet]

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

[Pradeep P N]

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:

[Shrinidhi Upadhyaya]

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

[Gourmet]

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

[Pradeep P N]

Hello @Gourmet
You are welcome.

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

Below is screenshot from android.

Also you can customize the ComboBoxStyle

Have a great day.