前端设置工作日日历

示例图如下所示 ：

主要功能为根据年份 ，单双休状态设置节假日 ， 单休状态默认所有周日标为红色 ，双休所有周六周日标为红色 ， 点击具体日期标红点击保存按钮后根据页面上标红日期设置节假日

具体代码：

_____________________________________________________________________________

html

_____________________________________________________________________________

data中定义

 

---

css
 

.calendar-container {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    padding: 10px;

    overflow-y: auto;

    max-height: 75vh;

}

.calendar {

    width: calc(100% / 4 - 10px);

    margin: 5px;

    border: 1px solid #ccc;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

}

.calendar-header {

    height: 35px;

    display: flex;

    justify-content: center;

    align-items: center;

    font-weight: bold;

    color: #fff;

    background-color: #3370ff;

    padding: 5px;

}

.calendar-top {

    width: 100%;

    height: 50px;

    display: flex;

    justify-content: flex-start;

    align-items: center;

    padding-left: 10px;

}

select {

    width: 120px;

    height: 30px;

    margin-left: 10px;

    border: 1px solid #dcdfe6;

    border-radius: 3px;

}

.save-btn {

    margin-left: 10px;

}

.calendar-grid {

    display: grid;

    grid-template-columns: repeat(7, 1fr);

    gap: 5px;

    padding: 10px;

}

.calendar-day-header {

    text-align: center;

    font-weight: bold;

}

.calendar-day {

    text-align: center;

    padding: 5px;

    cursor: pointer;

}

.marked-date {

    background-color: red;

    color: #fff;

}
_____________________________________________________________________________

js
 

  mounted() {

        this.generateYearOptions();

        this.getworkCalendar();

    },

    methods: {

        // 通过年份查非工作日日期

        getworkCalendar() {

            const params = {

                year: this.selectedYear,

                dateType: this.weekendMode

            };

            this.$service.department.getWorkDays(params).then((res) => {

                if (res.head.code === '000000') {

                    this.markedDates = res.body || [];

                    this.generateCalendarData(this.markedDates);

                } else {

                    this.$message.error(res.head.message);

                }

            });

        },

        changeCalendar() {

            this.generateCalendarData();

            this.getworkCalendar();

        },

        changeMode() {

            this.generateCalendarData();

            this.getworkCalendar();

        },

        generateCalendarData() {

            // 清空之前的数据

            this.monthData = [];

            // 生成每个月的日期日历

            for (let i = 1; i <= 12; i++) {

                const days = this.generateMonthDays(this.selectedYear, i);

                // 将每个月的日期数据保存到 monthData 数组中

                this.monthData.push({ month: i, days });

            }

        },

        // 生成日历

        generateMonthDays(year, month) {

            const firstDayOfMonth = new Date(year, month - 1, 1);

            const startingDay = firstDayOfMonth.getDay();

            const daysInMonth = new Date(year, month, 0).getDate();

            const days = [];

            // 补充前面的空白日期

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

                days.push({ date: '', isCurrentMonth: false });

            }

            // 当月日期

            for (let i = 1; i <= daysInMonth; i++) {

                const date = new Date(year, month - 1, i);

                const dayOfWeek = date.getDay();

                days.push({ date: i, isCurrentMonth: true, dayOfWeek });

            }

            return days;

        },

        // 年份为2023年到2060年

        generateYearOptions() {

            for (let i = 2023; i <= 2060; i++) {

                this.years.push(i);

            }

        },

        // 判断日期是否需要标记为红色

        shouldMarkRed(day, monthData) {

            // 如果markedDates数组中包含当前日期，则标记为红色

            if (

                this.markedDates.includes(

                    `${this.selectedYear}-${monthData.month.toString().padStart(2, '0')}-${day.date

                        .toString()

                        .padStart(2, '0')}`

                )

            ) {

                return true;

            }

            // 如果markedDates为空，根据weekendMode来判断是否标记周六或周日

            if (this.markedDates.length === 0) {

                if (this.weekendMode === '') {

                    // 单休，周日标红

                    return day.dayOfWeek === 0;

                } else if (this.weekendMode === '双') {

                    // 双休，周六周日标红

                    return day.dayOfWeek === 0 || day.dayOfWeek === 6;

                }

            }

            return false;

        },

        selectDate(event, day) {

            if (day.date === '') return;

            // 如果已经标记，则取消标记

            if (event.target.classList.contains('marked-date')) {

                event.target.classList.remove('marked-date');

            } else {

                // 否则添加标记

                event.target.classList.add('marked-date');

            }

        },

        saveSelectedDate() {

            const markedDateElements = document.querySelectorAll('.marked-date');

            const markedDates = [];

            markedDateElements.forEach((element) => {

                const year = this.selectedYear;

                const calendarHeader = element

                    .closest('.calendar')

                    .querySelector('.calendar-header')

                    .textContent.trim();

                const month = calendarHeader.split(' ')[2].replace('月', '').padStart(2, '0');

                const date = element.textContent.trim();

                // 组合成 yyyy-mm-dd 格式

                const formattedDateString = `${year}-${month}-${date.padStart(2, '0')}`;

                markedDates.push(formattedDateString);

            });

            const params = {

                year: this.selectedYear,

                dateType: this.weekendMode,

                days: markedDates

            };

            this.$service.department.addWorkDays(params).then((res) => {

                if (res.head.code === '000000') {

                    this.$message.success('日历保存成功!');

                    this.getworkCalendar();

                } else {

                    this.$message.error('日历保存失败!');

                }

            });

        }

    }

};

________________________________默认加载当前年份的当年日历 点击哪年去加载哪个年份的日历 一次性加载可能会造成资源负载