vue3中基于dayjs实现日历

import dayjs from 'dayjs'
export const useCreateCander = () => {
  let calendarDay = []
  // 当前年，去年，明年
  let year = dayjs().year()
  let prvYear = year - 1
  let nextYear = year + 1
  // 当前月、上月、下月
  let month = dayjs().month() + 1
  let prvMonth = month - 1
  let nextMonth = month + 1
  // 当前月,上个月，下个月有几天
  let curentDay = dayjs(`${year}-${month}`).daysInMonth()
  let prvDay = dayjs(`${prvYear}-${prvMonth}`).daysInMonth()
  let nextDay = dayjs(`${nextYear}-${nextMonth}`).daysInMonth()
  // 判断当月的第一天是星期几
  let startDay = dayjs(`${year}-${month}-1`).day()
  // 当月的第一天是星期日时，设为7
  startDay = startDay === 0 ? 7 : startDay
  // 日历面板有6行，总共42个，需要在每个月的前后增加天数，凑够42天
  // 前面需要加的天数
  let addPrvDay = startDay - 1
  // 后面需要加的天数
  let addNextDay = 43 - curentDay - startDay

  for (let i = 0; i < curentDay; i++) {
    if ([8, 10, 12, 17, 22].includes(i)) {
      calendarDay.push({
        day: i + 1,
        type: 'current',
        color: 'rgba(255, 100, 100,0.7)',
        date: dayjs(`${year}-${month}-${i + 1}`).format('YYYY-MM-DD')
      })
    } else {
      calendarDay.push({
        day: i + 1,
        type: 'current',
        date: dayjs(`${year}-${month}-${i + 1}`).format('YYYY-MM-DD'),
        color: 'rgba(20, 255, 202,0.7)'
      })
    }
  }
  // 前面添加addPrvDay天
  for (let i = 0; i < addPrvDay; i++) {
    calendarDay.unshift({
      day: prvDay - i,
      type: 'prv',
      date: dayjs(`${year}-${prvMonth}-${prvDay - i}`).format('YYYY-MM-DD')
    })
  }
  // 后面添加addNextDay天
  for (let i = 0; i < addNextDay; i++) {
    calendarDay.push({
      day: i + 1,
      type: 'next',
      date: dayjs(`${year}-${nextMonth}-${i + 1}`).format('YYYY-MM-DD')
    })
  }
  console.log(calendarDay)
  return {
    calendarDay
  }
}

数据结构

日历样式

window日历