Vue实现的年历（适用于考勤，备忘）

部份代码

<script>

        var vm = new Vue({
            el: '#app',
            data: {
                year: 2019,
                months: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                zh_month: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'],
                zh_day: ['日', '一', '二', '三', '四', '五', '六'],
                tr_list:[1,2,3,4,5,6],
                firstDay: '',
                calendarData:[]
            },
            created: function () {
                this.initData();
            },
            computed: {
                _module() {
                    return function (td, month) {
                        var that = this;  
                        var lastDay = new Date(that.year, month, 0);
                        var classStr = "";
                        if (td.date <= 0 || td.date > lastDay.getDate()) {
                            classStr = "day old";
                        }
                        else {
                            classStr =  "day"; 
                        }
                        if (td.select) {
                            classStr += " new";
                        }
                        return classStr;
                        
                    }
                }
            },
            methods: {
                initData: function () {
                    var that = this;
                    var calendarData = [];
                    $.each(that.months, function (e, m) {
                        
                        var count = -(new Date(that.year, e, 1).getDay()) + 1;
                        console.log(that.year, m, count);
                        var tr_list = [];
                        var num = 0;
                        for (var i = 0; i < 6; i++) {
                            var tr = [];
                            for (var j = 0; j < 7; j++) {
                                var newcount = count + num;

                                tr.push({ date: newcount, select: 0 });
                                num++;
                            }
                            tr_list.push(tr);
                        }
                        calendarData.push(tr_list);
                    });
                    that.calendarData = calendarData;
                },
                tdSelect: function (i, j, z) {
                    console.log(i, j);
                    var calendarData = this.calendarData;
                    var lastDay = new Date(this.year, i+1, 0);
                    if (this.calendarData[i][j][z].date > 0 && this.calendarData[i][j][z].date <= lastDay.getDate()) {
                        this.calendarData[i][j][z].select = !this.calendarData[i][j][z].select;
                    }
                    console.log(this.calendarData);
                }
            },
            watch: {
                'year': function (val, oldVal) {
                    console.log(val);
                    this.initData();

                },

            }

        })
    </script>

源码下载：

Github_https://github.com/Jireh012/Examples/tree/main/Vue/AttendanceCalendar

考勤日历.zip