定制化日历组件

效果图

---

<template>

    <div class="calendar">

        <div class="header">

            <span @click="previous">&lt;</span>

            <span>

                <select v-model="currentMonth" @change="selectMonth">

                    <option v-for="(item, index) in monthNames" :value="index" :key="index">{{ item }}</option>

                </select>

                <select v-model="currentYear" @change="selectYear">

                    <option v-for="(item, index) in yearList" :value="item" :key="index">{{ item }}</option>

                </select>

            </span>

            <span @click="next">&gt;</span>

        </div>

        <table>

            <thead>

                <tr>

                    <th v-for="day in weekDays" :key="day">{{ day }}</th>

                </tr>

            </thead>

            <tbody>

                <tr v-for="(week, index) in calendar" :key="index" style="padding-bottom: 10px;">

                    <td v-for="(dayObj, cindex) in week" :key="cindex" :id="dayObj.day === -1 ? 'kong' : ''"

                        :class="{ today: isToday(dayObj.date) }" @click="dayObj.day !== -1 && selectDate(dayObj)">

                        {{ dayObj.day > 0 ? dayObj.day : '' }}

                    </td>

                </tr>

            </tbody>

        </table>

    </div>

</template>

<script>

export default {

    data() {

        return {

            monthNames: [

                '一月', '二月', '三月', '四月', '五月', '六月',

                '七月', '八月', '九月', '十月', '十一月', '十二月'

            ],

            weekDays: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],

            currentYear: new Date().getFullYear(),

            currentMonth: new Date().getMonth(),

            calendar: [],

            selectedDate: null,

            isActivenum: null,

            yearShow: false,

            monthShow: false,

            yearList: [],

            monthText: null,

            selectDates: new Date(),

            day: null

        };

    },

    created() {

        this.generateCalendar();

        this.generateYearList(); // 在实例创建时生成年份数组

    },

    methods: {

        generateCalendar() {

            const firstDay = new Date(this.currentYear, this.currentMonth, 1).getDay();

            const daysInMonth = new Date(this.currentYear, this.currentMonth + 1, 0).getDate();

            let date = 1;

            for (let i = 0; i < 6; i++) {

                const week = [];

                for (let j = 0; j < 7; j++) {

                    if ((i === 0 && j < firstDay) || date > daysInMonth) {

                        week.push({ day: -1, date: null });

                    } else {

                        week.push({ day: date, date: new Date(this.currentYear, this.currentMonth, date) });

                        date++;

                    }

                }

                this.calendar.push(week);

                if (date > daysInMonth) break;

            }

        },

        isToday(date) {

            const today = this.selectDates

            console.log(date && date.toDateString() === today.toDateString());

            return date && date.toDateString() === today.toDateString();

        },

        previous() {

            if (this.currentMonth === 0) {

                this.currentMonth = 11;

                this.currentYear--;

            } else {

                this.currentMonth--;

            }

            this.refreshCalendar();

        },

        next() {

            console.log(123);

            if (this.currentMonth === 11) {

                this.currentMonth = 0;

                this.currentYear++;

            } else {

                this.currentMonth++;

            }

            this.refreshCalendar();

        },

        refreshCalendar() {

            this.calendar = [];

            this.generateCalendar();

        },

        selectDate(dateObj) {

            this.selectDates = dateObj.date

            if (dateObj.day <= 9) {

                this.day = '0' + dateObj.day

            } else {

                this.day = dateObj.day

            }

            this.selectedDate = this.day;

            this.$emit('date-selected', { year: this.currentYear, month: this.currentMonth, date: this.selectedDate });

        },

        isSelected(date) {

            console.log(date, 111);

            return date && this.selectedDate && date.toDateString() === this.selectedDate.toDateString();

        },

        isActive(i) {

            this.isActivenum = i

        },

        selectYear(event) {

            const selectedYear = event.target.value;

            // 处理选中年份的逻辑

 

            this.currentYear = selectedYear

            this.refreshCalendar()

        },

        selectMonth(event) {

            this.currentMonth = event.target.value; // 更新当前月份

            this.refreshCalendar();

        },

        generateYearList() {

            const currentYear = new Date().getFullYear(); // 获取当前年份

            const startYear = currentYear - 10; // 计算前十年的起始年份

            // 使用循环生成年份数组

            for (let year = currentYear; year >= startYear; year--) {

                this.yearList.push(year); // 将年份添加到 yearList 数组中

            }

        },

    },

};

</script>

<style scoped>

.calendar {

    font-family: Arial, sans-serif;

    width: 220px;

    margin: 0 auto;

    text-align: center;

    background-color: #fff;

}

.header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    color: #ffffff;

    height: 30px;

    background-color: #697076;

    padding: 0 5px;

    cursor: pointer;

}

table {

    width: 100%;

    background-color: #4b4d50;

}

th {

    color: #94999d;

}

#kong {

    cursor: default;

}

#kong:hover {

    background-color: #4b4d50 !important;

}

th,

td {

    width: 18px;

    height: 15px;

    font-size: 12px;

    cursor: pointer;

}

td:hover {

    background-color: cadetblue;

    border-radius: 4px;

    color: #ffffff;

    cursor: pointer;

}

td:hover::before {

    content: attr(data-title);

    position: absolute;

    top: -30px;

    left: 50%;

    transform: translateX(-50%);

    background: #333;

    color: #fff;

    padding: 5px;

    border-radius: 4px;

    font-size: 12px;

    display: none;

}

td:hover::before {

    display: none;

}

.today {

    background-color: #003366;

    border-radius: 4px;

}

/* 隐藏 <select> 元素的默认下拉箭头 */

select {

    /* 隐藏默认样式 */

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    /* 添加背景颜色 */

    background-color: #697076;

    /* 修改成你想要的颜色 */

    color: #ffff;

    text-align: center;

    /* 添加一些右边距以便让箭头图标显示 */

    /* 可以根据需要调整右边距 */

}

/* 去除select点击状态下的默认样式 */

select:focus {

    outline: none;

    /* 去除默认的轮廓线条 */

    border: none;

    /* 去除默认的边框 */

    box-shadow: none;

    /* 去除默认的阴影 */

}

 

.yearSelect {

    border: 0;

    display: inline-block;

 

}

</style>