Privacy policyContactsAbout siteOpinionsGitHubDonate
© EVILEG 2015-2018
Recommend hosting
TIMEWEB

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

Qt, QML, Android, CalendarStyle, Calendar

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

Virtual hosting with 10 percent discount
Virtual hosting with 10 percent discount
EVILEG offers reliable hosting with a 10% discount for virtual hosting and 5% for VPS
M

Все очень круто, больше спасибо.
Подскажите пжлст что такое styleData?
Это какой то объект из dialogCalendar
Если я захочу другое отображение колендаря, мне нужно будет перегружать функции в новом классе?

Добрый день!
Ага, это внутренний объект стилей.

И да, понадобится перегружать. А вообще посмотрите ещё календарь из Quick.Controls 2.0, поскольку этот пример из Quick.Controls 1.4 - он устаревший.
А в новых контролах совсем иначе сделано, там вроде бы вместо стилей делегаты используются, всё несколько проще. Будут вопросы, на форуме спрашивайте по новым контролом, что смогу, подскажу.
M

Спасибо)

Comments

Only authorized users can post comments.
Please, Log in or Sign up
МБ
April 21, 2019, 9:40 a.m.
Моисей Бушуев

Qt - Test 001. Signals and slots

  • Result:0points,
  • Rating points-10
AA
April 17, 2019, 7:40 p.m.
Anton Ablin

Qt - Test 001. Signals and slots

  • Result:73points,
  • Rating points1
E
April 17, 2019, 6:16 p.m.
Evgeny

Qt - Test 001. Signals and slots

  • Result:100points,
  • Rating points10
Last comments
April 21, 2019, 4:22 p.m.
Евгений Легоцкой

Через метод setIcon table.horizontalHeaderItem(0).setIcon("qrc://path/to/icon.png")
April 21, 2019, 3:48 p.m.
Евгений Легоцкой

Добрый день! Спасибо за комментарий. Там действительно лучше будет сделать с инициализацией по умолчанию.
U
April 18, 2019, 3:37 p.m.
Unreal_man

А как иконку в хедер задать?
u
April 18, 2019, 2:15 a.m.
uaa

доброго времени,большое спасибо за пример для начинающего)при адаптации к своему проекту столкнулся с таким ньансом:в vepolyline.h в 47 строке нужна инициализация по умолчанию: int m_pointF...
E
April 11, 2019, 12:49 p.m.
Evgeny

Спасибо за ответ) У меня компоновщик на нее ругался просто. Оказалось, просто забыл Q_OBJECT в начале класса указать.
Now discuss on the forum
April 21, 2019, 4:16 p.m.
Евгений Легоцкой

Приветствую Нужно сохранять где-то выбранное значение, а потом восстанавливать его. Или использовать QSettings или добавить метод open(), в который передавать начальные значения для того...
R
April 19, 2019, 9:55 a.m.
RED_Spider

мені важко це зараз навіть перевірити, тому що знайшов коміт, це ще було в 2016 році, і цей код не буде працювати коректно зараз, єдине скажу що це були QThread
i
April 17, 2019, 3:03 p.m.
ilya.guzikov

BlinCT, на стороне ++ это делать необходимо так как в qml при использовании функции append происходит перерисовка всех точек лини(как я понимаю) и из-за этого при использовании больших массиво...
April 10, 2019, 11:20 a.m.
Алексей Внуков

может тоже кому надо будет - QML не принимает QVector<QVector<int>> , при попытке вывести полученый вектор QML показывает что это QVariant(QVector<QVector<int> ...
Join us in social networks

For registered users on the site there is a minimum amount of advertising