mirror of
https://github.com/zhuzichu520/FluentUI.git
synced 2025-07-07 12:07:40 +08:00
Qt5.15.2 compatible
This commit is contained in:
zhuzichu
435
src/Qt5/imports/FluentUI/Controls/FluCalendarView.qml
Normal file
435
src/Qt5/imports/FluentUI/Controls/FluCalendarView.qml
Normal file
@ -0,0 +1,435 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Controls 2.15
|
||||
import FluentUI 1.0
|
||||
|
||||
Item {
|
||||
property int displayMode: FluCalendarViewType.Month
|
||||
property var date: new Date()
|
||||
property var currentDate : new Date()
|
||||
property var toDay: new Date()
|
||||
signal dateClicked(var date)
|
||||
id:control
|
||||
width: 280
|
||||
height: 325
|
||||
Component.onCompleted: {
|
||||
updateMouth(date)
|
||||
}
|
||||
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.toDay.getFullYear() === date.getFullYear()
|
||||
height: 70
|
||||
width: 70
|
||||
onClicked:{
|
||||
control.date = date
|
||||
displayMode = FluCalendarViewType.Year
|
||||
updateYear(date)
|
||||
}
|
||||
background: Item{
|
||||
Rectangle{
|
||||
width: 60
|
||||
height: 60
|
||||
radius: 4
|
||||
anchors.centerIn: parent
|
||||
color:{
|
||||
if(FluTheme.dark){
|
||||
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(isDecade){
|
||||
return FluTheme.dark ? "#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.toDay.getFullYear() === date.getFullYear() && control.toDay.getMonth() === date.getMonth()
|
||||
height: 70
|
||||
width: 70
|
||||
onClicked:{
|
||||
control.date = date
|
||||
displayMode = FluCalendarViewType.Month
|
||||
updateMouth(date)
|
||||
}
|
||||
background: Item{
|
||||
Rectangle{
|
||||
width: 60
|
||||
height: 60
|
||||
radius: 4
|
||||
anchors.centerIn: parent
|
||||
color:{
|
||||
if(FluTheme.dark){
|
||||
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.dark ? "#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()
|
||||
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{
|
||||
width: 36
|
||||
height: 36
|
||||
radius: 4
|
||||
anchors.centerIn: parent
|
||||
color:{
|
||||
if(FluTheme.dark){
|
||||
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_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: isToDay
|
||||
color: FluTheme.primaryColor.dark
|
||||
}
|
||||
FluText{
|
||||
text:date.getDate()
|
||||
anchors.centerIn: parent
|
||||
color: {
|
||||
if(isToDay){
|
||||
return "#FFFFFF"
|
||||
}
|
||||
if(isMonth){
|
||||
return FluTheme.dark ? "#FFFFFF" : "#1A1A1A"
|
||||
}
|
||||
return Qt.rgba(150/255,150/255,150/255,1)
|
||||
}
|
||||
}
|
||||
}
|
||||
contentItem: Item{}
|
||||
}
|
||||
}
|
||||
FluArea{
|
||||
anchors.fill: parent
|
||||
radius: 5
|
||||
FluShadow{
|
||||
radius: 5
|
||||
}
|
||||
Rectangle{
|
||||
id:layout_divider
|
||||
height: 1
|
||||
width: parent.width
|
||||
color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
|
||||
anchors{
|
||||
top: parent.top
|
||||
topMargin: 44
|
||||
}
|
||||
}
|
||||
Item{
|
||||
id:layout_top
|
||||
anchors{
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
top: parent.top
|
||||
bottom: layout_divider.top
|
||||
}
|
||||
FluTextButton{
|
||||
id:title
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
leftMargin: 14
|
||||
}
|
||||
disabled: displayMode === FluCalendarViewType.Decade
|
||||
onClicked:{
|
||||
if(displayMode === FluCalendarViewType.Month){
|
||||
displayMode = FluCalendarViewType.Year
|
||||
updateYear(date)
|
||||
}else if(displayMode === FluCalendarViewType.Year){
|
||||
displayMode = FluCalendarViewType.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 === FluCalendarViewType.Month){
|
||||
var lastMonthYear = year;
|
||||
var lastMonthMonth = month - 1
|
||||
if (month === 0) {
|
||||
lastMonthYear = year - 1
|
||||
lastMonthMonth = 11
|
||||
}
|
||||
date = new Date(lastMonthYear,lastMonthMonth,1)
|
||||
updateMouth(date)
|
||||
}else if(displayMode === FluCalendarViewType.Year){
|
||||
date = new Date(year-1,month,1)
|
||||
updateYear(date)
|
||||
}else if(displayMode === FluCalendarViewType.Decade){
|
||||
date = new Date(Math.floor(year / 10) * 10-10,month,1)
|
||||
updateDecade(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 === FluCalendarViewType.Month){
|
||||
var nextMonthYear = year
|
||||
var nextMonth = month + 1
|
||||
if (month === 11) {
|
||||
nextMonthYear = year + 1
|
||||
nextMonth = 0
|
||||
}
|
||||
date = new Date(nextMonthYear,nextMonth,1)
|
||||
updateMouth(date)
|
||||
}else if(displayMode === FluCalendarViewType.Year){
|
||||
date = new Date(year+1,month,1)
|
||||
updateYear(date)
|
||||
}else if(displayMode === FluCalendarViewType.Decade){
|
||||
date = new Date(Math.floor(year / 10) * 10+10,month,1)
|
||||
updateDecade(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 === FluCalendarViewType.Month ? 40 : 70
|
||||
cellWidth: displayMode === FluCalendarViewType.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
|
||||
}
|
||||
if(model.type === 1){
|
||||
return com_day
|
||||
}
|
||||
if(model.type === 2){
|
||||
return com_month
|
||||
}
|
||||
if(model.type === 3){
|
||||
return com_year
|
||||
}
|
||||
return com_day
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
function createItemWeek(name){
|
||||
return {type:0,date:new Date(),name:name,isDecade:false}
|
||||
}
|
||||
function createItemDay(date){
|
||||
return {type:1,date:date,name:"",isDecade:false}
|
||||
}
|
||||
function createItemMonth(date){
|
||||
return {type:2,date:date,name:"",isDecade:false}
|
||||
}
|
||||
function createItemYear(date,isDecade){
|
||||
return {type:3,date:date,name:"",isDecade:isDecade}
|
||||
}
|
||||
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),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){
|
||||
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 <= footerSize; j++) {
|
||||
list_model.append(createItemDay(new Date(nextMonthYear, nextMonth,j)))
|
||||
}
|
||||
title.text = year+"年"+(month+1)+"月"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user