Rectangle {
            id: navigationbar
            width: (parent.width > parent.height ? parent.width * 0.6 - parent.spacing : parent.width)
            height: (parent.height > parent.width ? parent.height - (parent.height- 50) - parent.spacing : parent.height - (parent.height-50))
            Rectangle {
                anchors.fill: parent
                gradient: Gradient {//...}
                border.width: 1.3

                Image {
                    id: settingsDate
                    // ...
                    MouseArea {
                        id: mouseAreaSett
                        anchors.fill: parent
                        onClicked: {
                            console.debug(aNewMonth)
                            aNewMonth--;
                            // increment the month
                            calendar.selectedDate.setFullYear(aNewYear, aNewMonth, aNewDay);
                            // this code not work
                        }
                    }

                }

                Image {
                    id: prevDay
                    // ...
                    MouseArea {
                        id: mouseAreaPrev
                        anchors.fill: parent
                        onClicked: {
                            // prevDay actions ...
                            calendar.selectedDate.setFullYear(aNewYear, aNewMonth, aNewDay);
                            // nope
                        }
                    }

                }

                TextEdit {
                    id: displayDate
                    // ...
                    MouseArea {
                        id: mouseAreaDisp
                        anchors.fill: parent
                        onClicked: {
                            var d = new Date();
                            aNewDay = d.getDate();
                            aNewMonth = d.getMonth();
                            aNewYear = d.getFullYear();
                            calendar.selectedDate.setFullYear(aNewYear, aNewMonth, aNewDay);
                            // the calendar does not respond the choosen date
                        }
                    }

                }

                Image {
                    id: nextDay
                    // ...
                    MouseArea {
                        id: mouseAreaNext
                        anchors.fill: parent
                        onClicked: {
                            aNewDay++
                            // nextDay actions
                            calendar.selectedDate.setFullYear(aNewYear, aNewMonth, aNewDay);
                            calendar.update();
                            // this does not work
                        }
                    }
                }

                Image {
                    id: plusMonth
            // ...
                    MouseArea {
                        id: mouseAreaPlus
                        anchors.fill: parent
                        onClicked: {
                            aNewMonth++;
                            // plus month actions
                            calendar.selectedDate.setFullYear(aNewYear, aNewMonth, aNewDay);
                            // I don't know how to past the choosen date to calendar?
                        }
                    }
                }
            }
        Calendar {
            id: calendar
            width: (parent.width > parent.height ? parent.width * 0.6 - parent.spacing : parent.width)
            height: (parent.height > parent.width ? parent.height * 0.6 - parent.spacing : parent.height)
            frameVisible: true
            weekNumbersVisible: false
            navigationBarVisible: false

            selectedDate: currentDate
            focus: true
            style: CalendarStyle {
                dayDelegate: Item {
                    readonly property int dpi: Screen.pixelDensity*1.4
                    readonly property color sameMonthDateTextColor: "#444"
                    readonly property color selectedDateColor: Qt.platform.os === "osx" ? "#3778d0" : systemPalette.highlight
                    readonly property color selectedDateTextColor: "white"
                    readonly property color differentMonthDateTextColor: "#bbb000"
                    readonly property color invalidDatecolor: "#dddddd"

                    Rectangle {
                        id: selectedDayRect
                        anchors.fill: parent
                        border.color: "transparent"
                        color: styleData.date !== undefined && styleData.selected ? selectedDateColor : "transparent"
                        anchors.margins: styleData.selected ? -1 : 0
                    }
                    // code of my own imags, not relevant here ...
                    Label {
                        id: dayDelegateText
                        text: styleData.date.getDate()
                        anchors.top: parent.top
                        anchors.right: parent.right
                        anchors.margins: 0
                        color: {
                            var color = invalidDatecolor;
                            if (styleData.valid) {
                                // Date is within the valid range.
                                color = styleData.visibleMonth ? sameMonthDateTextColor : differentMonthDateTextColor;
                                if (styleData.selected) {
                                    color = selectedDateTextColor;
                                }
                            }
                            color;
                        }
                    }

               }