QML Календарь

@newline · Регистрация: 21.02.2011

Author24 — интернет-сервис помощи студентам

Приветствую

Требуется подсказеа относительно QML а именно календаря.
Вот картинка того, что у меня получилось. Отсутствие кнопки "следующий месяц" прошу игнорировать

Итак вопрос: Как вы видите есть проблема с полем где должеы отображаться названия дней недели. Я не могу понять, какой параметр у этого поля отвечает за цвет и толщину разделителей, а так же как сюда вернуть названия дней недели. Вот тот самый фрагмент кода

C++ (Qt)

    Calendar {
        id: calendar
        width: 716
        height: 322
        anchors.verticalCenterOffset: 25
        anchors.horizontalCenterOffset: -25
        anchors.centerIn: parent
        // it have its own style
        style: CalendarStyle {
            gridVisible: true
            gridColor: "#414142"
            
            //Day of week part customizatioт
           // style: dayOfWeekDelegate {
            //}
 
            dayOfWeekDelegate: Rectangle {
                height: 35
                color: "#231F20"
 
            }

По аналогии, по идее надо писать gridColor = "цвет", gridVisible = "true", но такие параметры не принимаются. Их нет. Как там показать названия дней недели тоже не понятно.
Прошу помощи в данном вопросе

@newline · 19.04.2019, 23:03 **[ТС]**

Уважаемые,
Совет бы пригодился.
не из тех это случаев похоже, когда я создаю тему и сам же потом пишу решение.

@newline · 22.04.2019, 23:34 **[ТС]**

Вот весь код моего календаря:

C++ (Qt)

Calendar {
        id: calendar
        width: 716
        height: 322
        anchors.verticalCenterOffset: 25
        anchors.horizontalCenterOffset: -25
        anchors.centerIn: parent
        // it have its own style
        style: CalendarStyle {
            gridVisible: true
            gridColor: "#414142"
 
            //Day of week part customizatioт
            /*
            dayOfWeekDelegate: Rectangle {
                height: 35
                color: "#231F20"
             */
 
            DayOfWeekRow  {
 
            }
            // navigationBar proprietary style
            navigationBar: Rectangle {
                /* It made of rectangle,
                 * which contain two buttons and some text
                 * */
                height: 48
                color: "#231F20"
 
                /* gorizontal bar/border,
                 * which eparates navigationBar and days field
                 * */
                Rectangle {
                    color: "#231F20"
                    height: 1
                    width: parent.width
                    anchors.bottom: parent.bottom
                }
 
                // Back button
                Button {
                    id: previousMonth
                    width: parent.height - 8
                    height: width
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: parent.left
                    anchors.leftMargin: 8
 
                    /* Once clicked, move dates back
                     * */
                    onClicked: control.showPreviousMonth()
 
                    // Button style
                    style: ButtonStyle {
                        background: Rectangle {
                            // Back paint for button
                            color: "#231F20"
                            /* It is possible
                              *to change image depends if button is pressed or not
                             */
                            Image {
                                source: control.pressed ? "Images/cal-arrow-left.png" : "Images/cal-arrow-left.png"
                                width: parent.height - 8
                                height: width
                            }
                        }
                    }
                }
 
                // custom style label
                Label {
                    id: dateText
                    /* Take data from calendar title,
                     * which is invisible in this case
                     * and will be replaced with label
                     */
                    text: styleData.title
                    color:  "#939598"
                    elide: Text.ElideRight
                    horizontalAlignment: Text.AlignHCenter
                    font.pixelSize: 16
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: previousMonth.right
                    anchors.leftMargin: 2
                    anchors.right: nextMonth.left
                    anchors.rightMargin: 2
                }
 
                // Forward month button
                Button {
                    id: nextMonth
                    width: parent.height - 8
                    height: width
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.right: parent.right
 
                    /* Button click calll the calendar bunction
                     * which move one month forward
                     * */
                    onClicked: control.showNextMonth()
 
                     // Button style
                    style: ButtonStyle {
                        // Button back color
                        background: Rectangle {
                            color: "#231F20"
                            /* Two option of image, depends
                             * button is pressed or not
                             */
                            Image {
                                source: control.pressed ? "Images/cal-arrow-right.png" : "Images/cal-arrow-right.png"
                                width: parent.height - 8
                                height: width
                            }
                        }
                    }
                }
            }
            dayDelegate: Rectangle {
                gradient: Gradient {
                    GradientStop {
                        position: 0.00
                        color: styleData.selected ? "#111" : (styleData.visibleMonth && styleData.valid ? "#231F20" : "#231F20");
                    }
                    GradientStop {
                        position: 1.00
                        color: styleData.selected ? "#444" : (styleData.visibleMonth && styleData.valid ? "#231F20" : "#231F20");
                    }
                    GradientStop {
                        position: 1.00
                        color: styleData.selected ? "#777" : (styleData.visibleMonth && styleData.valid ? "#231F20" : "#231F20");
                    }
                }
                Label {
                    text: styleData.date.getDate()
                    font.pointSize: 10
                    anchors.top: parent.top
                    color: styleData.valid ? "white" : "grey"
                }
 
                Rectangle {
                    width: parent.width
                    height: 1
                    color: "#231F20"
                    anchors.bottom: parent.bottom
                }
 
                Rectangle {
                    width: 1
                    height: parent.height
                    color: "#231F20"
                    anchors.right: parent.right
                }
            }
        }
    }

Как покрасить область с днями недели? Есть ли возможность уменьшить ширину области месяц/год и стрелками вперед назад не меняя ширины самого календаря?

Добавлено через 1 час 59 минут
Вопрос имеет решение. Оно найдено. Привожу его тут:

C++ (Qt)

//Attempt
            dayOfWeekDelegate:
                            Rectangle{
                                id: rec1
                                color: "#231F20"
                                height: 50
 
                                Text {
                                    id: weekTxt
                                    font.pixelSize: 20
                                    text:Qt.locale().dayName(styleData.dayOfWeek, control.dayOfWeekFormat)
                                    anchors.centerIn: rec1
                                    color: styleData.selected?"green":"gray"
                                }
                        }
            //EndOf this attempt

@newline 98 / 10 / 0 Регистрация: 21.02.2011 Сообщений: 415
	19.04.2019, 23:03 [ТС]	2
	Уважаемые, Совет бы пригодился. не из тех это случаев похоже, когда я создаю тему и сам же потом пишу решение. 0

	22.04.2019, 23:34