mirror of
https://github.com/zhuzichu520/FluentUI.git
synced 2024-11-24 03:30:59 +08:00
446 lines
14 KiB
QML
446 lines
14 KiB
QML
import QtQuick 2.15
|
|
import QtQuick.Controls 2.15
|
|
import FluentUI 1.0
|
|
|
|
Item {
|
|
|
|
id:control
|
|
property int displayMode: FluCalenderView.Month
|
|
|
|
property var date: new Date()
|
|
|
|
property var currentDate : new Date()
|
|
|
|
enum DisplayMode {
|
|
Month,
|
|
Year,
|
|
Decade
|
|
}
|
|
|
|
Component.onCompleted: {
|
|
updateMouth(date)
|
|
}
|
|
|
|
function createItemWeek(name){
|
|
return {type:0,name:name}
|
|
}
|
|
|
|
function createItemDay(date){
|
|
return {type:1,date:date}
|
|
}
|
|
|
|
function createItemMonth(date){
|
|
return {type:2,date:date}
|
|
}
|
|
|
|
function createItemYear(date){
|
|
return {type:3,date:date}
|
|
}
|
|
|
|
|
|
function updateDecade(date){
|
|
list_model.clear()
|
|
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)));
|
|
}
|
|
|
|
}
|
|
|
|
function updateYear(date){
|
|
list_model.clear()
|
|
var year = date.getFullYear()
|
|
for(var i = 0 ; i< 12 ; i++){
|
|
list_model.append(createItemMonth(new Date(year,i)));
|
|
}
|
|
for(var j = 0 ; j< 4 ; j++){
|
|
list_model.append(createItemMonth(new Date(year+1,j)));
|
|
}
|
|
title.text = year+"年"
|
|
}
|
|
|
|
function updateMouth(date){
|
|
list_model.clear()
|
|
list_model.append([createItemWeek("一"),createItemWeek("二"),createItemWeek("三"),createItemWeek("四"),createItemWeek("五"),createItemWeek("六"),createItemWeek("日")])
|
|
var year = date.getFullYear()
|
|
var month = date.getMonth()
|
|
var day = date.getDate()
|
|
var firstDayOfMonth = new Date(year, month, 1)
|
|
var dayOfWeek = firstDayOfMonth.getDay()
|
|
var headerSize = (dayOfWeek===0?7:dayOfWeek)-1
|
|
if(headerSize!==0){
|
|
var lastMonthYear = year;
|
|
var lastMonthMonth = month - 1
|
|
if (month === 0) {
|
|
lastMonthYear = year - 1
|
|
lastMonthMonth = 11
|
|
}
|
|
var lastMonthDays = new Date(lastMonthYear, lastMonthMonth+1, 0).getDate()
|
|
for (var i = headerSize-1; i >= 0; i--) {
|
|
list_model.append(createItemDay(new Date(lastMonthYear, lastMonthMonth,lastMonthDays-i)))
|
|
}
|
|
}
|
|
const lastDayOfMonth = new Date(year, month+1, 0).getDate()
|
|
for (let day = 1; day <= lastDayOfMonth; day++) {
|
|
list_model.append(createItemDay(new Date(year, month,day)))
|
|
}
|
|
var footerSize = 49-list_model.count
|
|
var nextMonthYear = year
|
|
var nextMonth = month + 1
|
|
if (month === 11) {
|
|
nextMonthYear = year + 1
|
|
nextMonth = 0
|
|
}
|
|
const nextDayOfMonth = new Date(nextMonthYear, nextMonth+1, 0).getDate()
|
|
for (let j = 1; j <= nextDayOfMonth; j++) {
|
|
list_model.append(createItemDay(new Date(nextMonthYear, nextMonth,j)))
|
|
}
|
|
title.text = year+"年"+(month+1)+"月"
|
|
}
|
|
|
|
|
|
Component{
|
|
id:com_week
|
|
Item{
|
|
height: 40
|
|
width: 40
|
|
FluText{
|
|
text:name
|
|
anchors.centerIn: parent
|
|
}
|
|
}
|
|
}
|
|
|
|
Component{
|
|
id:com_year
|
|
Button{
|
|
id:item_control
|
|
property bool isYear: control.date.getFullYear() === date.getFullYear()
|
|
height: 70
|
|
width: 70
|
|
onClicked:{
|
|
control.date = date
|
|
displayMode = FluCalenderView.Year
|
|
updateYear(date)
|
|
}
|
|
background: Item{
|
|
Rectangle{
|
|
width: 60
|
|
height: 60
|
|
radius: 4
|
|
anchors.centerIn: parent
|
|
color:{
|
|
if(FluTheme.isDark){
|
|
if(item_control.hovered){
|
|
return Qt.rgba(1,1,1,0.05)
|
|
}
|
|
return Qt.rgba(0,0,0,0)
|
|
}else{
|
|
if(item_control.hovered){
|
|
return Qt.rgba(0,0,0,0.05)
|
|
}
|
|
return Qt.rgba(0,0,0,0)
|
|
}
|
|
}
|
|
}
|
|
Rectangle{
|
|
id:backgound_selected
|
|
anchors.centerIn: parent
|
|
width: 50
|
|
height: 50
|
|
radius: 25
|
|
visible: isYear
|
|
color: FluTheme.primaryColor.dark
|
|
}
|
|
FluText{
|
|
text:date.getFullYear()
|
|
anchors.centerIn: parent
|
|
color: {
|
|
if(isYear){
|
|
return "#FFFFFF"
|
|
}
|
|
// if(isYear){
|
|
// return FluTheme.isDark ? "#FFFFFF" : "#1A1A1A"
|
|
// }
|
|
return Qt.rgba(150/255,150/255,150/255,1)
|
|
}
|
|
}
|
|
}
|
|
contentItem: Item{}
|
|
}
|
|
}
|
|
|
|
Component{
|
|
id:com_month
|
|
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()
|
|
height: 70
|
|
width: 70
|
|
onClicked:{
|
|
control.date = date
|
|
displayMode = FluCalenderView.Month
|
|
updateMouth(date)
|
|
}
|
|
background: Item{
|
|
Rectangle{
|
|
width: 60
|
|
height: 60
|
|
radius: 4
|
|
anchors.centerIn: parent
|
|
color:{
|
|
if(FluTheme.isDark){
|
|
if(item_control.hovered){
|
|
return Qt.rgba(1,1,1,0.05)
|
|
}
|
|
return Qt.rgba(0,0,0,0)
|
|
}else{
|
|
if(item_control.hovered){
|
|
return Qt.rgba(0,0,0,0.05)
|
|
}
|
|
return Qt.rgba(0,0,0,0)
|
|
}
|
|
}
|
|
}
|
|
Rectangle{
|
|
id:backgound_selected
|
|
anchors.centerIn: parent
|
|
width: 50
|
|
height: 50
|
|
radius: 25
|
|
visible: isMonth
|
|
color: FluTheme.primaryColor.dark
|
|
}
|
|
FluText{
|
|
text:(date.getMonth()+1)+"月"
|
|
anchors.centerIn: parent
|
|
color: {
|
|
if(isMonth){
|
|
return "#FFFFFF"
|
|
}
|
|
if(isYear){
|
|
return FluTheme.isDark ? "#FFFFFF" : "#1A1A1A"
|
|
}
|
|
return Qt.rgba(150/255,150/255,150/255,1)
|
|
}
|
|
}
|
|
}
|
|
contentItem: Item{}
|
|
}
|
|
}
|
|
|
|
|
|
Component{
|
|
id:com_day
|
|
Button{
|
|
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()
|
|
height: 40
|
|
width: 40
|
|
onClicked: {
|
|
currentDate = date
|
|
}
|
|
background: Item{
|
|
Rectangle{
|
|
width: 36
|
|
height: 36
|
|
radius: 4
|
|
anchors.centerIn: parent
|
|
color:{
|
|
if(FluTheme.isDark){
|
|
if(item_control.hovered){
|
|
return Qt.rgba(1,1,1,0.05)
|
|
}
|
|
return Qt.rgba(0,0,0,0)
|
|
}else{
|
|
if(item_control.hovered){
|
|
return Qt.rgba(0,0,0,0.05)
|
|
}
|
|
return Qt.rgba(0,0,0,0)
|
|
}
|
|
}
|
|
}
|
|
Rectangle{
|
|
id:backgound_selected
|
|
anchors.centerIn: parent
|
|
width: 30
|
|
height: 30
|
|
radius: 15
|
|
visible: isDay
|
|
color: FluTheme.primaryColor.dark
|
|
}
|
|
FluText{
|
|
text:date.getDate()
|
|
anchors.centerIn: parent
|
|
color: {
|
|
if(isDay){
|
|
return "#FFFFFF"
|
|
}
|
|
if(isMonth){
|
|
return FluTheme.isDark ? "#FFFFFF" : "#1A1A1A"
|
|
}
|
|
return Qt.rgba(150/255,150/255,150/255,1)
|
|
}
|
|
}
|
|
}
|
|
contentItem: Item{}
|
|
}
|
|
}
|
|
|
|
FluArea{
|
|
width: 280
|
|
height: 325
|
|
radius: 5
|
|
|
|
FluShadow{
|
|
radius: 5
|
|
}
|
|
|
|
Rectangle{
|
|
id:layout_divider
|
|
height: 1
|
|
width: parent.width
|
|
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
|
|
}
|
|
}
|
|
|
|
Item{
|
|
id:layout_top
|
|
anchors{
|
|
left: parent.left
|
|
right: parent.right
|
|
top: parent.top
|
|
bottom: layout_divider.top
|
|
}
|
|
|
|
FluTextButton{
|
|
id:title
|
|
leftPadding: 0
|
|
rightPadding: 0
|
|
anchors{
|
|
verticalCenter: parent.verticalCenter
|
|
left: parent.left
|
|
leftMargin: 14
|
|
}
|
|
disabled: displayMode === FluCalenderView.Decade
|
|
onClicked:{
|
|
if(displayMode === FluCalenderView.Month){
|
|
displayMode = FluCalenderView.Year
|
|
updateYear(date)
|
|
}else if(displayMode === FluCalenderView.Year){
|
|
displayMode = FluCalenderView.Decade
|
|
updateDecade(date)
|
|
}
|
|
}
|
|
}
|
|
|
|
FluIconButton{
|
|
id:icon_up
|
|
iconSource: FluentIcons.CaretUpSolid8
|
|
iconSize: 10
|
|
anchors{
|
|
verticalCenter: parent.verticalCenter
|
|
right: icon_down.left
|
|
rightMargin: 14
|
|
}
|
|
onClicked: {
|
|
var year = date.getFullYear()
|
|
var month = date.getMonth()
|
|
if(displayMode === FluCalenderView.Month){
|
|
var lastMonthYear = year;
|
|
var lastMonthMonth = month - 1
|
|
if (month === 0) {
|
|
lastMonthYear = year - 1
|
|
lastMonthMonth = 11
|
|
}
|
|
date = new Date(lastMonthYear,lastMonthMonth,1)
|
|
updateMouth(date)
|
|
}
|
|
if(displayMode === FluCalenderView.Year){
|
|
date = new Date(year-1,month,1)
|
|
updateYear(date)
|
|
}
|
|
}
|
|
}
|
|
|
|
FluIconButton{
|
|
id:icon_down
|
|
iconSource: FluentIcons.CaretDownSolid8
|
|
iconSize: 10
|
|
anchors{
|
|
verticalCenter: parent.verticalCenter
|
|
right: parent.right
|
|
rightMargin: 8
|
|
}
|
|
onClicked: {
|
|
var year = date.getFullYear()
|
|
var month = date.getMonth()
|
|
if(displayMode === FluCalenderView.Month){
|
|
var nextMonthYear = year
|
|
var nextMonth = month + 1
|
|
if (month === 11) {
|
|
nextMonthYear = year + 1
|
|
nextMonth = 0
|
|
}
|
|
date = new Date(nextMonthYear,nextMonth,1)
|
|
updateMouth(date)
|
|
}
|
|
if(displayMode === FluCalenderView.Year){
|
|
date = new Date(year+1,month,1)
|
|
updateYear(date)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
ListModel {
|
|
id:list_model
|
|
}
|
|
|
|
Item{
|
|
id:layout_bottom
|
|
anchors{
|
|
left: parent.left
|
|
right: parent.right
|
|
top: layout_divider.bottom
|
|
bottom: parent.bottom
|
|
}
|
|
|
|
GridView{
|
|
model: list_model
|
|
anchors.fill: parent
|
|
cellHeight: displayMode === FluCalenderView.Month ? 40 : 70
|
|
cellWidth: displayMode === FluCalenderView.Month ? 40 : 70
|
|
clip: true
|
|
boundsBehavior:Flickable.StopAtBounds
|
|
delegate: Loader{
|
|
property var modelData : model
|
|
property var name : model.name
|
|
property var date : model.date
|
|
sourceComponent: {
|
|
if(model.type === 0){
|
|
return com_week
|
|
}
|
|
if(model.type === 1){
|
|
return com_day
|
|
}
|
|
if(model.type === 2){
|
|
return com_month
|
|
}
|
|
if(model.type === 3){
|
|
return com_year
|
|
}
|
|
return com_day
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|