update

example/T_Calendar.qml

@@ -7,17 +7,17 @@ import FluentUI 1.0
 
 FluScrollablePage{
 
-    title:"Calender"
+    title:"Calendar"
 
 
     FluArea{
         width: parent.width
         Layout.topMargin: 20
-        height: 400
+        height: 350
         paddings: 10
 
 
-        FluCalenderView{
+        FluCalendarView{
 
         }
 

example/T_CalendarPicker.qml

@@ -0,0 +1,33 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+
+FluScrollablePage{
+
+    title:"CalendarPicker"
+
+
+    FluArea{
+        width: parent.width
+        Layout.topMargin: 20
+        height: 80
+        paddings: 10
+
+        ColumnLayout{
+
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+
+            FluCalendarPicker{
+            }
+
+        }
+    }
+
+
+
+}

example/page/AboutPage.qml

@@ -1,4 +1,5 @@
 import QtQuick 2.15
+import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import FluentUI 1.0
 
@@ -69,7 +70,6 @@ FluWindow {
                 }
             }
         }
-
         RowLayout{
             spacing: 14
             Layout.topMargin: 20
@@ -90,10 +90,5 @@ FluWindow {
                 }
             }
         }
-
-
     }
-
-
-
 }

example/page/MainPage.qml

@@ -72,6 +72,13 @@ FluWindow {
             }
         }
 
+        FluPaneItem{
+            title:"CalendarPicker"
+            onTap:{
+                nav_view.push("qrc:/T_CalendarPicker.qml")
+            }
+        }
+
         FluPaneItemHeader{
             title:"Surface"
         }
@@ -91,9 +98,9 @@ FluWindow {
         }
 
         FluPaneItem{
-            title:"Calender"
+            title:"Calendar"
             onTap:{
-                nav_view.push("qrc:/T_Calender.qml")
+                nav_view.push("qrc:/T_Calendar.qml")
             }
         }
 

example/qml.qrc

@@ -42,6 +42,7 @@
         <file>page/ChatPage.qml</file>
         <file>T_Tooltip.qml</file>
         <file>T_Badge.qml</file>
-        <file>T_Calender.qml</file>
+        <file>T_Calendar.qml</file>
+        <file>T_CalendarPicker.qml</file>
     </qresource>
 </RCC>

src/Fluent.cpp

@@ -43,8 +43,8 @@ void Fluent::registerTypes(const char *uri){
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluPaneItemSeparator.qml"),uri,major,minor,"FluPaneItemSeparator");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluNavigationView.qml"),uri,major,minor,"FluNavigationView");
 
-    qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluCalendarDatePicker.qml"),uri,major,minor,"FluCalendarDatePicker");
+    qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluCalendarPicker.qml"),uri,major,minor,"FluCalendarPicker");
-    qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluCalenderView.qml"),uri,major,minor,"FluCalenderView");
+    qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluCalendarView.qml"),uri,major,minor,"FluCalendarView");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluDatePicker.qml"),uri,major,minor,"FluDatePicker");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTimePicker.qml"),uri,major,minor,"FluTimePicker");
 

src/controls/FluCalendarDatePicker.qml

@@ -1,5 +0,0 @@
-import QtQuick 2.15
-
-Item {
-
-}

src/controls/FluCalendarPicker.qml

@@ -0,0 +1,92 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+
+Rectangle {
+
+    id:root
+
+    property color dividerColor: FluTheme.isDark ? Qt.rgba(77/255,77/255,77/255,1) : Qt.rgba(239/255,239/255,239/255,1)
+    property color hoverColor: FluTheme.isDark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
+    property color normalColor: FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
+    property var window : Window.window
+
+    color: {
+        if(mouse_area.containsMouse){
+            return hoverColor
+        }
+        return normalColor
+    }
+    height: 30
+    width: 120
+    radius: 4
+    border.width: 1
+    border.color: dividerColor
+
+    MouseArea{
+        id:mouse_area
+        hoverEnabled: true
+        anchors.fill: parent
+        onClicked: {
+            popup.showPopup()
+        }
+    }
+
+    FluText{
+        id:text_date
+        anchors{
+            left: parent.left
+            right: parent.right
+            rightMargin: 30
+            top: parent.top
+            bottom: parent.bottom
+        }
+        verticalAlignment: Text.AlignVCenter
+        horizontalAlignment: Text.AlignHCenter
+        text:"请选择日期"
+    }
+
+    FluIcon{
+        iconSource: FluentIcons.Calendar
+        iconSize: 14
+        color: text_date.color
+        anchors{
+            verticalCenter: parent.verticalCenter
+            right: parent.right
+            rightMargin: 12
+        }
+    }
+
+
+    Popup{
+        id:popup
+        height: container.height
+        width: container.width
+        background: FluCalendarView{
+            id:container
+            onDateClicked:
+                (date)=>{
+                    popup.close()
+                    var year = date.getFullYear()
+                    var month = date.getMonth()
+                    var day =  date.getDate()
+                    text_date.text = year+"-"+(month+1)+"-"+day
+                }
+        }
+        contentItem: Item{}
+        function showPopup() {
+            var pos = root.mapToItem(null, 0, 0)
+            if(window.height>pos.y+root.height+popup.height){
+                popup.y = root.height
+            } else if(pos.y>popup.height){
+                popup.y = -popup.height
+            } else {
+                popup.y = window.height-(pos.y+popup.height)
+            }
+            popup.x = -(popup.width-root.width)/2
+            popup.open()
+        }
+    }
+}

src/controls/FluCalendarView.qml

@@ -5,12 +5,19 @@ import FluentUI 1.0
 Item {
 
     id:control
-    property int displayMode: FluCalenderView.Month
+    property int displayMode: FluCalendarView.Month
 
     property var date: new Date()
 
     property var currentDate : new Date()
 
+    property var toDay: new Date()
+
+    signal dateClicked(var date)
+
+    width: 280
+    height: 325
+
     enum DisplayMode {
         Month,
         Year,
@@ -22,19 +29,19 @@ Item {
     }
 
     function createItemWeek(name){
-        return {type:0,name:name}
+        return {type:0,date:new Date(),name:name,isDecade:false}
     }
 
     function createItemDay(date){
-        return {type:1,date:date}
+        return {type:1,date:date,name:"",isDecade:false}
     }
 
     function createItemMonth(date){
-        return {type:2,date:date}
+        return {type:2,date:date,name:"",isDecade:false}
     }
 
-     function createItemYear(date){
+    function createItemYear(date,isDecade){
-        return {type:3,date:date}
+        return {type:3,date:date,name:"",isDecade:isDecade}
     }
     
 
@@ -43,9 +50,12 @@ Item {
         var year = date.getFullYear()
         const decadeStart = Math.floor(year / 10) * 10;
         for(var i = decadeStart ; i< decadeStart+10 ; i++){
-            list_model.append(createItemYear(new Date(i,0,1)));
+            list_model.append(createItemYear(new Date(i,0,1),true));
         }
-
+        for(var j =  decadeStart+10 ; j< decadeStart+16 ; j++){
+            list_model.append(createItemYear(new Date(j,0,1),false));
+        }
+        title.text = decadeStart+"-"+(decadeStart+10)
     }
 
     function updateYear(date){
@@ -93,7 +103,7 @@ Item {
             nextMonth = 0
         }
         const nextDayOfMonth = new Date(nextMonthYear, nextMonth+1, 0).getDate()
-        for (let j = 1; j <= nextDayOfMonth; j++) {
+        for (let j = 1; j <= footerSize; j++) {
             list_model.append(createItemDay(new Date(nextMonthYear, nextMonth,j)))
         }
         title.text = year+"年"+(month+1)+"月"
@@ -116,12 +126,12 @@ Item {
         id:com_year
         Button{
             id:item_control
-            property bool isYear: control.date.getFullYear() === date.getFullYear()
+            property bool isYear: control.toDay.getFullYear() === date.getFullYear()
             height: 70
             width: 70
             onClicked:{
                 control.date = date
-                displayMode = FluCalenderView.Year
+                displayMode = FluCalendarView.Year
                 updateYear(date)
             }
             background: Item{
@@ -160,9 +170,9 @@ Item {
                         if(isYear){
                             return "#FFFFFF"
                         }
-//                        if(isYear){
+                        if(isDecade){
-//                            return FluTheme.isDark ? "#FFFFFF" : "#1A1A1A"
+                            return FluTheme.isDark ? "#FFFFFF" : "#1A1A1A"
-//                        }
+                        }
                         return Qt.rgba(150/255,150/255,150/255,1)
                     }
                 }
@@ -176,12 +186,12 @@ Item {
         Button{
             id:item_control
             property bool isYear: control.date.getFullYear() === date.getFullYear()
-            property bool isMonth: control.currentDate.getFullYear() === date.getFullYear() && control.currentDate.getMonth() === date.getMonth()
+            property bool isMonth: control.toDay.getFullYear() === date.getFullYear() && control.toDay.getMonth() === date.getMonth()
             height: 70
             width: 70
             onClicked:{
                 control.date = date
-                displayMode = FluCalenderView.Month
+                displayMode = FluCalendarView.Month
                 updateMouth(date)
             }
             background: Item{
@@ -238,10 +248,12 @@ Item {
             id:item_control
             property bool isMonth: control.date.getMonth() === date.getMonth()
             property bool isDay: control.currentDate.getFullYear() === date.getFullYear() && control.currentDate.getMonth() === date.getMonth() && control.currentDate.getDate() === date.getDate()
+            property bool isToDay: control.toDay.getFullYear() === date.getFullYear() && control.toDay.getMonth() === date.getMonth() && control.toDay.getDate() === date.getDate()
             height: 40
             width: 40
             onClicked: {
                 currentDate = date
+                control.dateClicked(date)
             }
             background: Item{
                 Rectangle{
@@ -263,20 +275,34 @@ Item {
                         }
                     }
                 }
+
+                Rectangle{
+                    id:backgound_today
+                    anchors.centerIn: parent
+                    width: 36
+                    height: 36
+                    radius: 18
+                    color:"#00000000"
+                    visible: isDay
+                    border.color: FluTheme.primaryColor.dark
+                    border.width: 1
+                }
+
                 Rectangle{
                     id:backgound_selected
                     anchors.centerIn: parent
                     width: 30
                     height: 30
                     radius: 15
-                    visible: isDay
+                    visible: isToDay
                     color: FluTheme.primaryColor.dark
                 }
+
                 FluText{
                     text:date.getDate()
                     anchors.centerIn: parent
                     color: {
-                        if(isDay){
+                        if(isToDay){
                             return "#FFFFFF"
                         }
                         if(isMonth){
@@ -291,8 +317,7 @@ Item {
     }
 
     FluArea{
-        width: 280
+        anchors.fill: parent
-        height: 325
         radius: 5
 
         FluShadow{
@@ -306,7 +331,7 @@ Item {
             color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
             anchors{
                 top: parent.top
-                topMargin: 45
+                topMargin: 44
             }
         }
 
@@ -328,13 +353,13 @@ Item {
                     left: parent.left
                     leftMargin: 14
                 }
-                disabled: displayMode === FluCalenderView.Decade
+                disabled: displayMode === FluCalendarView.Decade
                 onClicked:{
-                    if(displayMode === FluCalenderView.Month){
+                    if(displayMode === FluCalendarView.Month){
-                        displayMode = FluCalenderView.Year
+                        displayMode = FluCalendarView.Year
                         updateYear(date)
-                    }else if(displayMode === FluCalenderView.Year){
+                    }else if(displayMode === FluCalendarView.Year){
-                        displayMode = FluCalenderView.Decade
+                        displayMode = FluCalendarView.Decade
                         updateDecade(date)
                     }
                 }
@@ -352,7 +377,7 @@ Item {
                 onClicked: {
                     var year = date.getFullYear()
                     var month = date.getMonth()
-                    if(displayMode === FluCalenderView.Month){
+                    if(displayMode === FluCalendarView.Month){
                         var lastMonthYear = year;
                         var lastMonthMonth = month - 1
                         if (month === 0) {
@@ -361,10 +386,12 @@ Item {
                         }
                         date = new Date(lastMonthYear,lastMonthMonth,1)
                         updateMouth(date)
-                    }
+                    }else if(displayMode === FluCalendarView.Year){
-                    if(displayMode === FluCalenderView.Year){
                         date = new Date(year-1,month,1)
                         updateYear(date)
+                    }else if(displayMode === FluCalendarView.Decade){
+                        date = new Date(Math.floor(year / 10) * 10-10,month,1)
+                        updateDecade(date)
                     }
                 }
             }
@@ -381,7 +408,7 @@ Item {
                 onClicked: {
                     var year = date.getFullYear()
                     var month = date.getMonth()
-                    if(displayMode === FluCalenderView.Month){
+                    if(displayMode === FluCalendarView.Month){
                         var nextMonthYear = year
                         var nextMonth = month + 1
                         if (month === 11) {
@@ -390,10 +417,12 @@ Item {
                         }
                         date = new Date(nextMonthYear,nextMonth,1)
                         updateMouth(date)
-                    }
+                    }else if(displayMode === FluCalendarView.Year){
-                    if(displayMode === FluCalenderView.Year){
                         date = new Date(year+1,month,1)
                         updateYear(date)
+                    }else if(displayMode === FluCalendarView.Decade){
+                        date = new Date(Math.floor(year / 10) * 10+10,month,1)
+                        updateDecade(date)
                     }
                 }
             }
@@ -415,14 +444,17 @@ Item {
             GridView{
                 model: list_model
                 anchors.fill: parent
-                cellHeight: displayMode === FluCalenderView.Month ? 40 : 70
+                cellHeight: displayMode === FluCalendarView.Month ? 40 : 70
-                cellWidth: displayMode === FluCalenderView.Month ? 40 : 70
+                cellWidth: displayMode === FluCalendarView.Month ? 40 : 70
                 clip: true
                 boundsBehavior:Flickable.StopAtBounds
                 delegate: Loader{
                     property var modelData : model
                     property var name : model.name
                     property var date : model.date
+                    property var isDecade: {
+                        return model.isDecade
+                    }
                     sourceComponent: {
                         if(model.type === 0){
                             return com_week

src/controls/FluDatePicker.qml

@@ -97,8 +97,11 @@ Rectangle {
     }
 
     Popup{
-        id:popup
+        width: container.width
+        height: container.height
+        contentItem: Item{}
         background: Rectangle{
+            id:container
             width: 300
             radius: 4
             color: FluTheme.isDark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1)

src/controls/FluTimePicker.qml

@@ -105,7 +105,11 @@ Rectangle {
 
     Popup{
         id:popup
+        width: container.width
+        height: container.height
+        contentItem: Item{}
         background: Rectangle{
+            id:container
             width: 300
             radius: 4
             color: FluTheme.isDark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1)

src/res.qrc

@@ -44,8 +44,8 @@
         <file>controls/FluArea.qml</file>
         <file>res/font/Segoe_Fluent_Icons.ttf</file>
         <file>controls/FluDatePicker.qml</file>
-        <file>controls/FluCalenderView.qml</file>
+        <file>controls/FluCalendarView.qml</file>
-        <file>controls/FluCalendarDatePicker.qml</file>
+        <file>controls/FluCalendarPicker.qml</file>
         <file>controls/FluFocusRectangle.qml</file>
         <file>controls/FluCarousel.qml</file>
         <file>controls/FluBadge.qml</file>