[Update]新增萬年曆

assets/script/otherUi/Calender.ts

@@ -0,0 +1,174 @@
+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()
+    }
+}

assets/script/otherUi/Calender.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.8",
+  "uuid": "af0570d3-1c4a-4134-9b22-835132ad0b53",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}

assets/script/otherUi/SingleDateItem.ts

@@ -0,0 +1,45 @@
+import { CustomToggle } from "../external/CustomToggleItem";
+
+const { ccclass, property } = cc._decorator;
+
+@ccclass
+export default class SingleDateItem extends CustomToggle {
+
+    @property(cc.Node)
+    checkNode: cc.Node = null
+    @property(cc.Node)
+    unCheckNode: cc.Node = null
+    @property(cc.Node)
+    dateLabelNode: cc.Node = null
+
+    protected _date: number
+    get date(): number {
+        return this._date
+    }
+
+    set date(d: number) {
+        this._date = d
+    }
+
+    reset() {
+        this.isChecked = false
+        this.checkNode.active = false
+        this.unCheckNode.active = true
+        this.dateLabelNode.active = true
+    }
+
+    /**
+     * 要讓calander使用layout自動排列,所以會把自己元件上有顯示東西都關掉
+     */
+    setBlank() {
+        this.isChecked = false
+        this.checkNode.active = false
+        this.unCheckNode.active = false
+        this.dateLabelNode.active = false
+    }
+
+    setDate(date: number) {
+        this.date = date
+        this.dateLabelNode.getComponent(cc.Label).string = `${date}`
+    }
+}

assets/script/otherUi/SingleDateItem.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.8",
+  "uuid": "35b869eb-18f6-4ac1-bbbc-83ed7e5c3e58",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}