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

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
МК
Jan. 13, 2019, 8:35 p.m.
Мария Канева

C++ - Test 005. Structures and Classes

  • Result:91points,
  • Rating points8
МК
Jan. 13, 2019, 8:32 p.m.
Мария Канева

C ++ - Test 004. Pointers, Arrays and Loops

  • Result:70points,
  • Rating points1
МК
Jan. 13, 2019, 8:28 p.m.
Мария Канева

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

  • Result:78points,
  • Rating points2
Last comments
I
Jan. 16, 2019, 8:06 a.m.
IscanderChe

Заработало. Забыл model->select(); вписать.
I
Jan. 16, 2019, 8:02 a.m.
IscanderChe

Всё равно пусто, хотя строка с данными в базу добавляется.
Jan. 16, 2019, 7:51 a.m.
Евгений Легоцкой

потому, что нужно сохранять информацию для всех остальных ролей и столбцов через вызов переопределённого метода. Да к тому же вы ещё и зациклили вызов метода data. QVariant MySqlTableModel:...
I
Jan. 16, 2019, 7:43 a.m.
IscanderChe

Сделал вот так. В tableView ничего нет, кроме заголовка. QVariant MySqlTableModel::data(const QModelIndex &index, int role) const{ if (role == Qt::DisplayRole) { QTime ...
Now discuss on the forum
Jan. 15, 2019, 4:53 p.m.
Михаиллл

Спасибо, заработало.Но выдало обычный текст без форатирования HTML.Придется искать дальше
Jan. 15, 2019, 12:52 p.m.
BlinCT

Я же вам выше написал CLion умеет работать с ремоут машинами. И Qt так же собирает.
ПБ
Jan. 14, 2019, 2:27 p.m.
Павел Богдевич

Да
m
Jan. 13, 2019, 4:52 p.m.
mihamuz

И так может кому будет интересно решил свою проблему следующим путем.Через дизайнер в базовый виджет добавил QQuickWidget (назвал его listProducts)Это соответственно убрал. this->m_qu...
Join us in social networks

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