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

We recommend hosting TIMEWEB
We recommend hosting TIMEWEB
Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.
Support the author Donate
M

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

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

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

Спасибо)

U

Привет. Вопрос именно по старой версии календаря(controls 1.4).
1. Подскажите как календарь определяет выбранный день.
2. В styleData.selected возвращается true если дата выбрана, но я так и не нашёл как вручную выбирается дата...
3. ...если работать с onClicked в области делегата, то автоматический механизм выбора ячейки календаря перестаёт работать. Как быть?
Подытожу. Без onClicked подсветка выбранного дня работает, но если мне нужно производить какие нибудь действия по нажатии на ячейку через onClicked, то всё ломается. Это же касается и onPressed, onReleased и пр.
П.С. Пробовал в onClicked менять градиент выбранного дня - получилось, но мозгов допилить изменение градиента остальных дней не хватает.

U

Отвечу сам себе.
Чтоб подсветка ячейки менялась при нажатии применил следующее:

MouseArea{
    anchors.fill: daydel//id делегата дня
    onClicked: {
    //curDate, curD, curM, curY - стринговые переменные объявленные в коренном объекте(property string curDate)
        curDate = styleData.date.toLocaleDateString("dd.MM.yyyy")
        curD = curDate.slice(0,2)//вернет день дд
        curM = curDate.slice(3,5)//вернет месяц мм
        curY = curDate.slice(-4)//вернет год гггг
        calendar.selectedDate = curY+"-"+curM+"-"+curD
    }
}

Но пока что имеются проблемы с правильным переходом на предыдущий/следующий месяц и получением правильной даты при нажатии на дату не находящуюся в текущем месяце.

U

.

Вы перекрываете события этим MouseArea, попробуйте пропихнуть всё дальше включив следующее свойство

MouseArea {
    propagateComposedEvents: true
}

Comments

Only authorized users can post comments.
Please, Log in or Sign up
Donate

Hello, Dear Users of EVILEG!!!

If the site helped you, then support the development of the site financially, please.

You can do it by following ways:

Thank you, Evgenii Legotckoi

DK
April 1, 2020, 8:03 a.m.
Dmitry Kozhinov

C++ - Test 001. The first program and data types

  • Result:40points,
  • Rating points-8
A
March 30, 2020, 12:47 p.m.
Anna

C++ - Test 001. The first program and data types

  • Result:60points,
  • Rating points-1
A
March 29, 2020, 12:14 p.m.
Alexanderv66

C++ - Тест 003. Условия и циклы

  • Result:71points,
  • Rating points1
Last comments
April 3, 2020, 8:06 a.m.
Konstantin Grudnitskiy

Я надеюсь вы уже разобрались в чем дело, но если вдруг нет, то проблема состоит в том, что вы пытаетесь запустить программу из интерпретатора питона. Файл main.py это уже готова…
April 3, 2020, 6:18 a.m.
Konstantin Grudnitskiy

>>> text = 'hello world'>>> ' '.join(word for word in text.split()[:-1])'hello'>>> def remove_last_word(text):... return text and ' '.join(word for word in text.s…
March 27, 2020, 2:40 p.m.
Evgenij Legotskoj

Добрый день. В конце пятой статьи скачать можете.
March 27, 2020, 2:28 p.m.
mkdir _

Здравствуйте, а можно, пожалуйста, ссылку на целые исходники, если есть?
March 27, 2020, 4:36 a.m.
Evgenij Legotskoj

Скорее всего также, как и для установки всех остальных переменых в CMake, через использование set
Now discuss on the forum
April 3, 2020, 12:53 p.m.
BlinCT

Само собою на компе этого незаметно.
April 3, 2020, 8:48 a.m.
Intruder

Евгений, добрый день. Спасибо!
s
April 3, 2020, 7:52 a.m.
solmik

да вроде много чего установленно, если неправильный путь указать то же самое, пробовал запустить видео через плей лист (по примерам из док)и из него назад путь взять, не получилось
April 3, 2020, 5:50 a.m.
Jurij-V

Спасибо ! Поковырявшись и посмотрев интерфейс QSvgRender и т.д. понимаю что похоже нужно будет лезть в реализацию ::render(..). Кто может подсказать как и где выкачать актуальные исходники…
April 2, 2020, 2:46 a.m.
Evgenij Legotskoj

Я думаю, что это где-то описано, но в такой глубине документации и максимум в самых базовых вещах, то есть отдельно в классах этого не пишут, просто потому, что придётся писать для каждого класс…
EVILEG
About
Services
© EVILEG 2015-2019
Recommend hosting TIMEWEB