js日历相关函数使用详解

getMonthStartDay(year, month, index) {
    let monthFirstDay = Number(new Date(year, month, 1).getDay())
    return monthFirstDay
}

this.getMonthStartDay(2021, 06, 1)

getWeek(year, month, day) {
     //计算当年一月第一天是周几
     let yearFirstDay = Number(new Date(year + '-' + 1 + '-' + 1).getDay())
     //计算某天是第几周
     let dateDay = year + '-' + month + '-' + day
     let d1 = new Date(dateDay)
     let d2 = new Date(dateDay)
     d2.setMonth(0)//设置月份
     d2.setDate(0)//设置一月中的第一天
     let days = Math.ceil((d1 - d2) / (24 * 60 * 60 * 1000))
     let num = Math.ceil((days + yearFirstDay) / 7)
     return num
 }
 this.getWeek(2021, 06, 1)

getDaysInMonth(year, month, index) {
    const daysOfMonth = []
    month = parseInt(month, 10)
    const lastDayOfMonth = new Date(year, month, 0).getDate()
    for (let i = 1; i <= lastDayOfMonth; i++) {
        let obj = {
            value: i
        }
        daysOfMonth.push(obj)
    }
    return daysOfMonth
}
this.getDaysInMonth(2021, 06, 1)

<template>
    <!--年视图日历-->
    <el-scrollbar class="calendar" ref="calendarRef">
        <div v-for="(temp, index) in monthArr" :key="'S' + index" style="width: 100%;height: auto" :id="'S' + index">
            <div style="width: 100%;display: flex">
                <p style="width: 50px;max-width: 50px;min-width:50px;background: #f5f4f4;height: 43px;line-height: 43px;font-size: 12px;cursor: pointer;text-align: center" @click="handleMonth(temp.index)">
                    {{temp.index}} 月
                </p>
                <p style="height: 43px;line-height: 43px;font-weight: 600;padding-left: 10px;font-size: 14px">{{temp.value}}</p>
            </div>
            <ul class="calendartitle">
                <li v-for="(item, index) in calendarTitleArr" :key="index" class="calendarItem">{{item}}</li>
            </ul>
            <div style="width: 100%;display: flex">
                <div class="calendarItem sumWeekIndex">
                    <div v-for="(item, index) in temp.sumWeek" :key="'W' + index"
                         class="sumWeekClass"
                         :class="item.Num === activeCalendarItem ? 'activeCalendarItem' : ''"
                         :style="item.Num === activeCalendarItem ? 'color: #FF6A39;':''"
                         @click="handleWeekNumber(temp,item)">{{item.Num}}{{item.Num === activeCalendarItem ? '周' : ''}}</div>
                </div>
                <div class="calendarContent">
                    <div v-for="item in temp.monthFirstDay" :key="'N' + item" class="calendarItem"></div>
                    <div v-for="(item, index) in temp.calendarDateArr" :key="index"
                         class="calendarItem"
                         :class="((item.Num === activeCalendarItem) || (item.focu === 1)) ? 'activeCalendarItem' : ''"
                         @click="handleDay(temp.key, temp.index, item)">
                        <div :class="item.logDateFlag === 1 ?'span':''">
                            <span :style="temp.key ==  redMonth ? (item.value == redDay ? 'color: #EE1B24' : '') : ''">{{item.value}}</span>
                            <span class="calendarItemFlag">
                               <i class="iconfont icon-yipiyue1" v-if="item.reviewFlag === '1'"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </el-scrollbar>
</template>

<script>
    export default {
        name: 'calendar',
        data() {
            return {
                calendarTitleArr: [
                    '',
                    '日',
                    '一',
                    '二',
                    '三',
                    '四',
                    '五',
                    '六'
                ],
                // calendarDateArr: [],//每月多少天
                // monthFirstDay: '',//某月第一天是周几
                //sumWeek: '',//某月共几周
                // month: 1,
                monthArr: [
                    {key: '01', value: '一月', index: 1, calendarDateArr: [], monthFirstDay: '', sumWeek: []},
                    {key: '02', value: '二月', index: 2, calendarDateArr: [], monthFirstDay: '', sumWeek: []},
                    {key: '03', value: '三月', index: 3, calendarDateArr: [], monthFirstDay: '', sumWeek: []},
                    {key: '04', value: '四月', index: 4, calendarDateArr: [], monthFirstDay: '', sumWeek: []},
                    {key: '05', value: '五月', index: 5, calendarDateArr: [], monthFirstDay: '', sumWeek: []},
                    {key: '06', value: '六月', index: 6, calendarDateArr: [], monthFirstDay: '', sumWeek: []},
                    {key: '07', value: '七月', index: 7, calendarDateArr: [], monthFirstDay: '', sumWeek: []},
                    {key: '08', value: '八月', index: 8, calendarDateArr: [], monthFirstDay: '', sumWeek: []},
                    {key: '09', value: '九月', index: 9, calendarDateArr: [], monthFirstDay: '', sumWeek: []},
                    {key: '10', value: '十月', index: 10, calendarDateArr: [], monthFirstDay: '', sumWeek: []},
                    {key: '11', value: '十一月', index: 11, calendarDateArr: [], monthFirstDay: '', sumWeek: []},
                    {key: '12', value: '十二月', index: 12, calendarDateArr: [], monthFirstDay: '', sumWeek: []}
                ],
                activeCalendarItem: 1,//选中的某一周
                day: 1,
                fORM: {
                    content: '',
                    startDate: '',
                    endDate: '',
                    createBy: {
                        id: ''
                    }
                },
                dataList: [],//左侧日历
                redDay: '01',
                redMonth: '01'
            }
        },
        props: {
            year: {
                type: String,
                default: () => {
                    return '1970'
                }
            },
            startDay: {
                type: Array,
                default: () => {
                    return [1,1]
                }
            },
            endDay: {
                type: Array,
                default: () => {
                    return [1,31]
                }
            },
            changeDay: {
                type: Number,
                default: () => {
                    return 0
                }
            },
            refresh: {
                type: Number,
                default: () => {
                    return 0
                }
            }
        },
        mounted() {
            this.redMonth = this.moment(new Date()).format('MM')
            this.redDay = this.moment(new Date()).format('D')
            this.init()
            this.initHandle()
        },
        computed: {
            evidenceHeight () {
                let height = this.$store.state.common.documentClientHeight - 243
                return {height: height + 'px'}
            }
        },
        methods: {
            
            getDaysInMonth(year, month, index) {
                const daysOfMonth = []
                month = parseInt(month, 10)
                const lastDayOfMonth = new Date(year, month, 0).getDate()
                for (let i = 1; i <= lastDayOfMonth; i++) {
                    let obj = {
                        value: i
                    }
                    daysOfMonth.push(obj)
                }
                let calendarDateArr = daysOfMonth
                calendarDateArr.forEach(temp => {
                    this.$set(temp, 'Num', this.getWeek(year, month, temp.value))
                })
                this.monthArr.forEach(item => {
                    if (index === item.index) {
                        this.monthArr[index - 1].sumWeek = []
                        this.monthArr[index - 1].calendarDateArr = calendarDateArr
                        this.monthArr[index - 1].calendarDateArr.forEach(i => {
                            
                            if (item.sumWeek.indexOf(i) === -1) {
                                item.sumWeek.push(i)
                                item.sumWeek = this.unique(item.sumWeek, 'Num')
                                item.sumWeek = item.sumWeek.sort(this.compare('Num'))
                            }
                        })
                    }
                })
            },
            

            
            getMonthStartDay(year, month, index) {
                let monthFirstDay = Number(new Date(year, month - 1,1).getDay())
                this.monthArr.forEach(item => {
                    if (index === item.index) {
                        this.monthArr[index - 1].monthFirstDay = monthFirstDay
                    }
                })
                //某月有几周
                
            },
            

            
            getWeek(year, month, day) {
                //计算当年一月第一天是周几
                let yearFirstDay = Number(new Date(year + '-' + 1 + '-' + 1).getDay())
                //计算某天是第几周
                let dateDay = year + '-' + month + '-' + day
                let d1 = new Date(dateDay)
                let d2 = new Date(dateDay)
                d2.setMonth(0)//设置月份
                d2.setDate(0)//设置一月中的第一天
                let days = Math.ceil((d1 - d2) / (24 * 60 * 60 * 1000))
                let num = Math.ceil((days + yearFirstDay) / 7)
                return num
            },

            

            init(params) {
                this.refreshData()
                this.initHandle()
                let moment = require('moment')
                this.monthArr.forEach((item) => {
                    this.getDaysInMonth(this.year, item.key, item.index)
                    this.getMonthStartDay(this.year, item.key, item.index)
                    this.getWeek(this.year, item.key, '01')
                })
                let tempMonth = moment(new Date()).format('MM')
                let tempDay = moment(new Date()).format('D')
                this.activeCalendarItem = this.getWeek(this.year, tempMonth, tempDay)
                let val = this.year + '-' + tempMonth + '-' + tempDay
                let valObj = {
                    onlyOnce: '0',
                    flagDate: 'week',
                    dayDate: '',
                    weekDate: val,
                    monthDate: '',
                    day: this.day
                }
                if (!params) {
                    this.$emit('getValue', valObj)
                }
            },

            
            chooseFocus() {
                let startDay = this.startDay
                let endDay = this.endDay
                
                // this.activeCalendarItem = 0
                this.monthArr.forEach((item, index) => {
                    item.calendarDateArr.forEach(temp => {
                        this.$set(temp, 'focu', 0)
                    })
                    if (((Number(startDay[0]) - 1) <= index) && (index <= (Number(endDay[0]) - 1)) && startDay[0] === endDay[0]) {
                        
                        this.monthArr[index].calendarDateArr.forEach(temp => {
                            if ((Number(startDay[1]) <= temp.value) && (temp.value <= Number(endDay[1]))) {
                                temp.focu = 1
                            }
                        })
                    } else if (((Number(startDay[0]) - 1) <= index) && (index <= (Number(endDay[0]) - 1)) && Number(startDay[0]) !== Number(endDay[0])) {
                        
                        
                        this.monthArr[startDay[0] - 1].calendarDateArr.forEach(temp => {
                            // if ((Number(startDay[1]) <= temp.value) && (temp.value <= this.monthArr[index].calendarDateArr.length)) {
                            if (temp.value >= Number(startDay[1])) {
                                temp.focu = 1
                            }
                        })
                        
                        this.monthArr[endDay[0] - 1].calendarDateArr.forEach(temp => {
                            if (temp.value <= Number(endDay[1])) {
                                temp.focu = 1
                            }
                        })
                        
                        let diff = Number(endDay[0]) - Number(startDay[0])
                        if (diff > 1) {
                            let step = Number(startDay[0])
                            for (let i = step; i < Number(endDay[0]); i++) {
                                if (i < Number(endDay[0]) - 1) {
                                    this.monthArr[i].calendarDateArr.forEach(temp => {
                                        temp.focu = 1
                                    })
                                }
                            }
                        }
                    }
                })
            },

            
            handleMonth(number){
                this.activeCalendarItem = 0
                this.monthArr.forEach((item, index) => {
                    if (index === (number - 1)) {
                        this.day = this.monthArr[index].calendarDateArr.length
                    }
                    item.calendarDateArr.forEach(temp => {
                        if (index === (number - 1)) {
                            this.$set(temp, 'focu', 1)
                        } else {
                            this.$set(temp, 'focu', 0)
                        }
                    })
                })
                let valObj = {
                    flagDate: 'month',
                    dayDate: '',
                    weekDate: '',
                    monthDate: number,
                    day: this.day
                }
                this.$emit('getValue', valObj)
            },

            
            handleWeekNumber(temp,item){
                this.day = 0
                temp.calendarDateArr.forEach(itep => {
                    if (item.Num === itep.Num) {
                        this.day++
                    }
                })
                let val = this.year + '-' + temp.key + '-' + item.value
                let valObj = {
                    flagDate: 'week',
                    dayDate: '',
                    weekDate: val,
                    monthDate: '',
                    day: this.day
                }
                this.$emit('getValue', valObj)
                this.activeCalendarItem = item.Num
                this.monthArr.forEach((item, index) => {
                    item.calendarDateArr.forEach(temp => {
                        this.$set(temp, 'focu', 0)
                    })
                })
            },

            //点击当前具体时间
            handleDay(temp, number, item) {
                this.activeCalendarItem = 0
                this.day = 1
                this.monthArr.forEach((i, iIndex) => {
                    i.calendarDateArr.forEach((j, jIndex) => {
                        if (((number - 1) === iIndex) && ((item.value - 1) === jIndex)) {
                            this.$set(j, 'focu', 1)
                        } else {
                            this.$set(j, 'focu', 0)
                        }
                    })
                })
                let time = this.year + '-' + temp + '-' + item.value
                let valObj = {
                    flagDate: 'day',
                    dayDate: time,
                    weekDate: '',
                    monthDate: '',
                    day: this.day,
                    hasWorkLog: item.logDateFlag
                }
                this.$emit('getValue', valObj)
            },

            
            unique(arr, val) {
                const res = new Map()
                return arr.filter((item) => !res.has(item[val]) && res.set(item[val], 1))
            },

            
            compare(property){
                return function(a,b){
                    var value1 = a[property]
                    var value2 = b[property]
                    return value1 - value2
                }
            },

            refreshData() {
                let moment = require('moment')
                this.loading = true
                this.form.startDate = this.year + '-' + '01-01'
                this.form.endDate = this.year + '-' + '12-31'
                this.$Http({
                    url: '/workLogInfo/list/workLog',
                    method: 'post',
                    data: {
                        ...this.form
                    }
                }).then(({data}) => {
                    if (data && data.code === 200){
                        this.dataList = data.list
                        this.dataList.forEach(data => {
                            let dataTemp = data.logDate
                            let reviewFlag = data.reviewFlag
                            
                            this.monthArr.forEach((item, index) => {
                                if (Number(moment(dataTemp).format('M')) === item.index) {
                                    item.calendarDateArr.forEach((temp, index) => {
                                        if (Number(moment(dataTemp).format('D')) === temp.value) {
                                            this.$set(temp, 'logDateFlag', 1)
                                            this.$set(temp, 'reviewFlag', reviewFlag)
                                        }
                                    })
                                }
                            })
                        })
                        this.loading = false
                    }
                }).catch(() => {
                    this.loading = false
                })
            },

            
            initHandle() {
                let moment = require('moment')
                let tempId = 'S' + (moment(new Date()).format('M') - 1)
                this.$nextTick(() => {
                    if (this.$refs.calendarRef) {
                        let monthIdOffsetTop = document.getElementById(tempId).offsetTop
                        let scrollbarEl = this.$refs.calendarRef.wrap
                        scrollbarEl.scrollTop = monthIdOffsetTop
                    }
                })
            }
        },
        watch: {
            changeDay(newVal, oldVal) {
                if (newVal !== oldVal) {
                    this.chooseFocus()
                }
            },
            year(newVal, oldVal) {
                if (newVal !== oldVal) {
                    this.refreshData()
                }
            },
            refresh(newVal, oldVal) {
                if (newVal !== oldVal) {
                    this.monthArr.forEach((item, index) => {
                        item.calendarDateArr.forEach(temp => {
                            this.$set(temp, 'logDateFlag', 0)
                            this.$set(temp, 'reviewFlag', '0')
                        })
                    })
                    this.refreshData()
                }
            }
        }
    }
</script>

<style scoped lang="sCSS">
    .calendar {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        overflow-y: auto;
        background: #FFFFFF;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        p{
            
            width: 100%;
            text-align: left;
            box-sizing: border-box;
        }
        .calendarTitle {
            width: 100%;
            outline-style: none;
            display: flex;
            justify-items: center;
            align-items: center;
            padding: 0;
            .calendarItem{
                color: #919191;
                &:first-child{
                    width: 50px;
                    max-width: 50px;
                    min-width: 50px;
                    background: #f5f4f4;
                }
            }
        }

        .calendarContent {
            width: calc(100% - 50px);
            display: flex;
            justify-items: flex-start;
            align-items: center;
            flex-flow: wrap;
            padding: 0;

            .calendarItem {
                cursor: pointer;
                .span {
                    display: inline-block;
                    width: 21px;
                    height: 21px;
                    background: #40BD37;
                    color: white;
                    border-radius: 50%;
                    font-size: 12px;
                    line-height: 21px;
                    position: relative;
                    text-align: center;
                }
            }
        }

        .calendarItem {
            width: calc(100% / 7);
            height: 27px;
            
            
            font-size: 12px;
            box-sizing: border-box;
            list-style: none;
            display: flex;
            justify-content: center;
            align-items: center;
            .calendarItemFlag {
                position: absolute;
                right: -5px;
                top: -9px;
                transform: scale(0.5);
                color: #FF6A39;
            }
        }
        .activeCalendarItem{
            background: #FEDAA4;
        }
        .sumWeekIndex{
            width: 50px;
            max-width: 50px;
            background: #f5f4f4;
            height: auto;
            margin: 0;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            padding: 0px;
            .sumWeekClass{
                width: 32px;
                margin-top: 5px;
                margin-bottom: 4px;
                height: 27px;
                font-size: 12px;
                
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                border-radius: 50%;
            }
        }
    }
</style>
<style lang="scss">
    .calendar{
        p,ul,li{
            margin: 0;
            padding: 0;
        }
    }
    .calendar::-WEBkit-scrollbar {
        width: 6px;
        height: 6px;
        background: transparent;
    }
    .calendar::-webkit-scrollbar-thumb {
        background: transparent;
        border-radius: 4px;
    }
    .calendar:hover::-webkit-scrollbar-thumb {
        background: hsla(0, 0%, 53%, 0.4);
        box-shadow: 0 0 0 5px #DDDEE0 inset;
    }

    .calendar:hover::-webkit-scrollbar-track {
        background: hsla(0, 0%, 53%, 0.1);
    }
</style>

<Calendar :year="year" :startDay="startDay" :endDay="endDay" ref="Calendar" @getValue="getCalendarValue"></Calendar>