drone/assets/script/otherUi/Calender.ts

import BaseComp from "../external/BaseComp";
import { CustomToggle } from "../external/CustomToggleItem";
import SingleDateItem from "./SingleDateItem";

const { ccclass, property } = cc._decorator;

@ccclass
export default class Calender extends BaseComp {
    @property(cc.Prefab)
    dateItem: cc.Prefab = null

    @property(cc.Node)
    dateContent: cc.Node = null

    @property(cc.Label)
    yearLabel: cc.Label = null

    @property(cc.Label)
    monthLabel: cc.Label = null

    showMonth: number = 0
    showYear: number = 0

    nowSelectMonth: number = 0
    nowSelectYear: number = 0

    nowSelectDate: number = 0
    onLoad() {
        let date = new Date()
        let newYear = date.getFullYear()
        let newMonth = date.getMonth()
        let newDay = date.getDate()

        this.nowSelectMonth = newMonth
        this.nowSelectYear = newYear

        this.showMonth = newMonth + 1
        this.monthLabel.string = `${this.showMonth}`
        this.showYear = newYear
        this.yearLabel.string = `${this.showYear}`

        // 當月有多少天
        let currentDay = this.getMonthsDay(newYear, newMonth)
        // 當月第一天星期幾
        let firstDay = this.getMonthFirst(newYear, newMonth)

        //要給layout自動排列,所以每個月的第一天,前面會用空的item去填滿,因此會創造出空白天數 + 當月天數
        let totalDateItem = currentDay + firstDay
        for (let i = 0; i < totalDateItem; i++) {
            let dateItem = cc.instantiate(this.dateItem)
            dateItem.parent = this.dateContent

            let dateItemComp = dateItem.getComponent(SingleDateItem)
            if (i < firstDay) {
                dateItemComp.setBlank()
            } else {
                let date = i - (firstDay - 1)
                dateItemComp.reset()
                dateItemComp.setDate(date)
                if (date === newDay) {
                    dateItemComp.isChecked = true
                    this.nowSelectDate = newDay
                }
            }

        }
    }

    onChangeArrowClick(event: cc.Event, customEventData: string) {
        let delta = Number(customEventData)
        this.showMonth += delta
        if (this.showMonth > 12) {
            this.showYear += 1
            this.showMonth = 1
        }
        if (this.showMonth < 1) {
            this.showYear -= 1
            this.showMonth = 12
        }

        this.monthLabel.string = `${this.showMonth}`
        this.yearLabel.string = `${this.showYear}`

        this.updateAllDate()
    }

    updateAllDate() {
        let currentMonth = this.showMonth - 1 //date的month是0-base,即0 = 1月, 11 = 12月
        // 获取这月有多少天
        let currentDay = this.getMonthsDay(this.showYear, currentMonth)
        // 获取当月第一天星期几
        let firstDay = this.getMonthFirst(this.showYear, currentMonth)

        this.dateContent.children.forEach(item => {
            item?.getComponent(SingleDateItem).setBlank()
        })
        

        let totalDateItem = currentDay + firstDay
        for (let i = 0; i < totalDateItem; i++) {
            let date = i - (firstDay - 1)
            const isMatchSelectedDate = ():boolean => {
                return this.nowSelectDate === date && this.nowSelectMonth === currentMonth && this.nowSelectYear === this.showYear
            }

            let isExistItem = this.dateContent.children[i]
            let dateItemComp: SingleDateItem = null
            if (isExistItem) {
                //已經存在就改數字,改顯示
                dateItemComp = isExistItem.getComponent(SingleDateItem)
            } else {
                //表示沒item,那就創出來放上去
                let dateItem = cc.instantiate(this.dateItem)
                dateItem.parent = this.dateContent
                dateItemComp = dateItem.getComponent(SingleDateItem)
            }

            if (i < firstDay) {
                dateItemComp.setBlank()
            } else {
                dateItemComp.reset()
                dateItemComp.setDate(date)
                dateItemComp.isChecked = isMatchSelectedDate()
            }

        }
    }

    onDateSelected(toggle: CustomToggle) {
        this.nowSelectDate = toggle.node.getComponent(SingleDateItem).date
        this.nowSelectMonth = this.showMonth - 1
        this.nowSelectYear = this.showYear
    }

    // 那年那月有多少天
    getMonthsDay(year: number, month: number) {
        let _year = year
        let _month = month
        let date = new Date()
        if (arguments.length == 0) {
            _year = date.getFullYear()
            _month = date.getMonth()
        }

        if (arguments.length == 1) {
            _month = date.getMonth()
        }

        let monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]

        if ((_year % 4 == 0) && (_year % 100 != 0) || (_year % 400 == 0)) {
            monthDays[1] = 29
        }
        return monthDays[_month]
    }

    // 這個月第一天是星期幾
    getMonthFirst(year: number, month: number) {
        let _year = year
        let _month = month
        let date = new Date()
        if (arguments.length == 0) {
            _year = date.getFullYear()
            _month = date.getMonth()
        }

        if (arguments.length == 1) {
            _month = date.getMonth()
        }

        let newDate = new Date(_year, _month, 1)
        return newDate.getDay()
    }
}