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

S
Feb. 16, 2020, 1:05 p.m.
Satrey

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

  • Result:20points,
  • Rating points-10
S
Feb. 16, 2020, 12:52 p.m.
Satrey

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

  • Result:50points,
  • Rating points-4
S
Feb. 16, 2020, 12:39 p.m.
Satrey

Qt - Test 001. Signals and slots

  • Result:84points,
  • Rating points4
Last comments
B
Feb. 16, 2020, 1:36 p.m.
BahaMeirman

Добрый вечер! Монжно по подробней о теге get_companion? ссылка не работает.
Feb. 16, 2020, 9:35 a.m.
Evgenij Legotskoj

Добрый день. На GitHub исходники, можете посмотреть в официальном репозитории
B
Feb. 16, 2020, 9:29 a.m.
BahaMeirman

Здравстсвуйте Евгений, непонятно мне где эти исходники найти?
PB
Feb. 12, 2020, 3:30 a.m.
Pavel Bogdevich

Это не то, мне нужно именно делегат отредактировать (без изображения)
Now discuss on the forum
Feb. 16, 2020, 2:13 p.m.
BlinCT

Всем привет. есть те кто сталкивался с данной прогой? Нужна наводка просто как правильно из кучи инфы что содержит файл trace.dat и скармливается kernelshark вытащить причину долгого с…
IP
Feb. 16, 2020, 11:35 a.m.
Igor' Poroshin

#include <QSqlError>#include <QSqlQuery>...if (!model->select()) { qDebug() << model->lastError().text(); qDebug() << model->query().lastQue…
Feb. 16, 2020, 11:25 a.m.
BlinCT

Вот моя модель так выглядит SupportedPowerStatesModels::SupportedPowerStatesModels(QVector<SupportedPowerStates * > vector) : m_vector(std::move(vector)){}int SupportedPowerState…
t
Feb. 16, 2020, 10:34 a.m.
tantrido

Yes, I can but I do not like to spend much time on this. And not sure I can subclass from QAbstractSeries as it does not have custom delegates examples and put any item inside it. PathView insid…
Feb. 14, 2020, 8:49 a.m.
Ruslan Polupan

Нашел функцию с тарых исходниках php function IntToColor ($v){ return sprintf("%02X%02X%02X",$v&0xFF,($v>>0x8)&0xFF,($v>>0x10)&0xFF);} Может кто помочь адапти…
EVILEG
About
Services
© EVILEG 2015-2019
Recommend hosting TIMEWEB