[Update]新增萬年曆

2023-06-08 16:05:39 +08:00
parent 81d50ca5dc
commit 084e4f2696
17 changed files with 4423 additions and 16 deletions
@@ -0,0 +1,134 @@
+cc.Class({
+    extends: cc.Component,
+
+    properties: {
+    
+    },
+
+    // use this for initialization
+    onLoad: function () {
+        var date = new Date()
+        var newyear = date.getFullYear();
+        var newmonth = date.getMonth();
+        var newday = date.getDate();
+
+        // 获取这月有多少天
+        var currentDay = this.getMonthsDay(newyear, newmonth);
+
+        // 获取当月第一天星期几
+        var firstDay = this.getMonthFirst(newyear, newmonth);
+        
+
+        var lastMonth = (newmonth - 1) >= 0 ? (newmonth - 1) : 12;
+        
+        this.node.getChildByName('data').getChildByName(`year`).getComponent(cc.Label).string = newyear + " 年";
+        this.node.getChildByName('data').getChildByName(`month`).getComponent(cc.Label).string = (newmonth + 1) + " 月";
+
+        var lastDay = this.getMonthsDay(newyear, lastMonth);
+        var newlastDay = lastDay;
+        for(var i = firstDay - 1; i >= 0; i--) {
+             this.node.getChildByName('title1').getChildByName(`item${i}`).color = new cc.Color(192,192,192);
+             this.node.getChildByName('title1').getChildByName(`item${i}`).getComponent(cc.Label).string = newlastDay--;
+        }
+
+        cc.dd.log(`lastMonth:${lastMonth} newmonth:${newmonth} firstDay:${firstDay} currentDay:${currentDay} lastDay:${lastDay} `);
+
+        var newCurrentDay = 1;
+        for (var i = firstDay; i <= 6; i++) {
+            if (newCurrentDay == newday) {
+                this.node.getChildByName('title1').getChildByName(`item${i}`).color = new cc.Color(65,205,225);
+            }
+            this.node.getChildByName('title1').getChildByName(`item${i}`).getComponent(cc.Label).string = newCurrentDay++;
+        }
+
+        var num = 1;
+        var number = 0;
+        for(var i = newCurrentDay; i <= currentDay; i++) {
+            if ((i - newCurrentDay) % 7 === 0) {
+                num++;
+                number = 0;
+            }
+
+            if (i == newday) {
+                this.node.getChildByName(`title${num}`).getChildByName(`item${number}`).color = new cc.Color(65,205,225);
+            }
+            this.node.getChildByName(`title${num}`).getChildByName(`item${number++}`).getComponent(cc.Label).string = i;
+        }
+
+        if (number <= 6) {
+            var index = 1;
+            for (var i = number; i <=6; i++) {
+                this.node.getChildByName(`title${num}`).getChildByName(`item${number}`).color = new cc.Color(192,192,192);
+                this.node.getChildByName(`title${num}`).getChildByName(`item${number++}`).getComponent(cc.Label).string = index++;
+                
+            }
+        }
+       
+        
+
+        /**
+         *  var date = new Date()
+         *  
+         *  // 获取年份
+         *  var newyear = data.getFullYear()
+         * 
+         *  // 获取月份
+         *  var newmonth = data.getMonth()
+         * 
+         * 
+         *  // 获取今日日期
+         *  var newday = data.getDate()
+         * 
+         *  // 获取今天星期几
+         *  data.getDay()
+         * 
+         *  // 获取这月第一天星期几
+         *  var s = new Date(newYear, newmonth, 1);
+         *  firstday = s.getDay()
+         */
+    },
+
+    // 获取那年那月有多少天
+    getMonthsDay(year, month) {
+        var year = year;
+        var month = month;
+        if (arguments.length == 0) {
+            var date = new Date();
+            year = date.getFullYear();
+            month = data.getMonth();
+        }
+
+        if (arguments.length == 1) {
+            var date = new Date();
+            month = data.getMonth();
+        }
+        
+        var 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, month) {
+        var year = year;
+        var month = month;
+        if (arguments.length == 0) {
+            var date = new Date();
+            year = date.getFullYear();
+            month = data.getMonth();
+        }
+
+        if (arguments.length == 1) {
+            var date = new Date();
+            month = data.getMonth();
+        }
+        
+        var newDate = new Date(year, month, 1);
+        return newDate.getDay();
+    },
+
+
+});
@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.8",
+  "uuid": "2a23a12d-b7af-4528-a740-34286399a2fa",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}
@@ -0,0 +1,12 @@
+{
+  "ver": "1.1.2",
+  "uuid": "f84abc0e-cab4-47b4-8f78-98266a5ec04a",
+  "isBundle": false,
+  "bundleName": "",
+  "priority": 1,
+  "compressionType": {},
+  "optimizeHotUpdate": {},
+  "inlineSpriteFrames": {},
+  "isRemoteBundle": {},
+  "subMetas": {}
+}
@@ -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()
+    }
+}
@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.8",
+  "uuid": "af0570d3-1c4a-4134-9b22-835132ad0b53",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}
@@ -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}`
+    }
+}
@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.8",
+  "uuid": "35b869eb-18f6-4ac1-bbbc-83ed7e5c3e58",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}