QML Calendar not showing week day or month year (however it does seem to be there....)

Question

I am using Qt 5.13 and in general Qt.Controls 2 however the calendar only exists in v1.0 or the labs version (which I can't get to work, so using V1).

My code is

import QtQuick 2.2
import QtQuick.Controls 1.4 as Old

import Tree 1.0
import "."

ApplicationWindow {
    id: window
    width: 800; height: 1000
    title: "TreeView Example"
    visible: true
    Old.Calendar {
        anchors.centerIn: parent
        id: calendar
    }
}

However when I do this, I don't see the day of the week, nor the month/year in the navivagation bar, although I can see where they should be:

I have tried to add a navigationBar delegate, but this then gets rid of the navigation arrows.

style: CalendarStyle {
  navigationBar: Text {
    text: "hello"
  }
}

So, how do I have the nav arrows, show the month/year and show the days of week? The documentation seems to suggest I would get these out of the box... Now... I thought I could add drop downs as a work around to choose month/year and place them in the nav bar... however when I do that I can actually see that the days of the week are there, just their text colour is white, so I feel I am missing a trick with regard to the navigation bar...?

Answer 1

Worth reading the comments in response to @Aleph0's post, but to get it working I had to copy the default styles and place them within my element. The final code (stripping out the bits that aren't specifically about the calendar then), looks like

import QtQuick.Controls 2.4
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.3
import QtQuick 2.2
import QtQuick.Controls 1.4 as Old
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls.Private 1.0

ApplicationWindow {
  id: window
  width: 300; height: 300
  title: "Calendar Example"
  visible: true
  ColumnLayout {
      anchors.fill: parent
    Old.Calendar {
      id: calendar
      style: CalendarStyle {
          gridVisible: true
      dayOfWeekDelegate: Rectangle {
          color: gridVisible ? "#fcfcfc" : "transparent"
          implicitHeight: Math.round(TextSingleton.implicitHeight * 2.25)
          Label {
              text: control.locale.dayName(styleData.dayOfWeek, control.dayOfWeekFormat)
              anchors.centerIn: parent
          }
      }
        navigationBar: Rectangle {
          height: Math.round(TextSingleton.implicitHeight * 2.73)
          color: "#f9f9f9"

          Rectangle {
              color: Qt.rgba(1,1,1,0.6)
              height: 1
              width: parent.width
          }

          Rectangle {
              anchors.bottom: parent.bottom
              height: 1
              width: parent.width
              color: "#ddd"
          }

          HoverButton {
              id: previousMonth
              width: parent.height
              height: width
              anchors.verticalCenter: parent.verticalCenter
              anchors.left: parent.left
              source: "./assets/leftanglearrow.png"
              onClicked: control.showPreviousMonth()
          }
          Label {
              id: dateText
              text: styleData.title
              elide: Text.ElideRight
              horizontalAlignment: Text.AlignHCenter
              font.pixelSize: TextSingleton.implicitHeight * 1.25
              anchors.verticalCenter: parent.verticalCenter
              anchors.left: previousMonth.right
              anchors.leftMargin: 2
              anchors.right: nextMonth.left
              anchors.rightMargin: 2
          }
          HoverButton {
              id: nextMonth
              width: parent.height
              height: width
              anchors.verticalCenter: parent.verticalCenter
              anchors.right: parent.right
              source: "./assets/rightanglearrow.png"
              onClicked: control.showNextMonth()
          }
        } 
      }
    }
  }
}

That results in

In an ideal world, there would be an alternative to a) using Private controls as that seems like I am using Qt internal modules, but thats an easy fix by using an Image with a mouse area, and if I didn't have to use any 1.x controls either, but there doesn't seem to be a 2.x way of graphically displaying dates etc. Anyway, hopefully this can be useful to someone - it's literally a copy paste job of the default styling so it can be simplified alot...