QML - Lesson 006. Custom Calendar in Qt QML or Qt QML Android

Qt, Android, Calendar, QML, CalendarStyle

In this lesson, I would like to talk about how you can customize the appearance of the Calendar object in Qt Qml. To correct such as color, font, and nicely fit it in the dialog box to select a date. Therefore, to determine the order, how it should work our app and how it should look:

1. In the main window of the application will be a standard button, which displays the date (although if you want you can customize and her);
2. Clicking the button opens a dialog box which houses the Calendar and two buttons ( "Ok" and "Cancel"). The Calendar set a date that was specified on the button;
3. By clicking on the "Cancel" button nothing happens, but simply closes the dialog box;
4. By clicking on the "Ok" button closes the dialog box, and the button of the main window displays the date that was selected in the calendar.

I believe that you have already noticed that the customization of the application interface in Qt QML passes the same as for the Desktop version, and for Android. Otherwise it would have to develop a cross-platform Qt was not considered. Therefore, I will not go into too much difference display settings dialog box for the Desktop version or the version for Android. This time I explained in the tutorial to create a customized dialog box .

Project structure for Custom Calendar

A new project with the following structure has been created to demonstrate an example:

• QmlCalendarCustom.pro - the profile of the project;
  main.cpp - the main source file;
  main.qml - the main file interface QML;
  left_arrow.png - not pressed the left arrow;
  left_arrow_disable.png - pressed the left arrow;
  right_arrow.png - not pressed the right arrow;
  right_arrow_disable.png - pressed right arrow.

Arrows

Apply the following image to customize scrolling months in Calendar.

main.cpp

This file is created by default, but I will give him the code to avoid confusion.

#include <QApplication>
#include <QQmlApplicationEngine>
 
int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
 
    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
 
    return app.exec();
}

main.qml

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Dialogs 1.2
 
ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
 
    /* Create a variable to store the date
     * */
    property var tempDate: new Date();
 
    Button {
        id: button
        // Set the current date when the application runs on the button
        text: Qt.formatDate(tempDate, "dd.MM.yyyy");
        anchors.centerIn: parent // Центруем кнопку в окне
 
        // By clicking on the button to start the dialog box via a custom function
        onClicked: dialogCalendar.show(tempDate)
 
    }
 
    Dialog {
        id: dialogCalendar
        // Set the size of the dialog
        width: 250
        height: 300
 
        // Create the dialog box content
        contentItem: Rectangle {
            id: dialogRect
            color: "#f7f7f7"
 
            // First there is a custom calendar
            Calendar {
                id: calendar
                // We place it at the top of the dialog box and stretch across the width
                anchors.top: parent.top
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.bottom: row.top
 
                // Styling Calendar
                style: CalendarStyle {
 
                    // Styling navigationBar
                    navigationBar: Rectangle {
                        /* It will consist of a rectangle,

Conclusion

As a result, you should have an application with the following dialog box, in which there is a Custom Calendar.

Video