vue 自定义日历

接了一个需求，实现日历功能，但是并不完全是正常看到的日历，需要用接口返回的数据进行展示，并且需要和星期对上，用element UI上的日历并不能实现 想要的效果，所以自己写了一个组件，供大家参考。

首先下载 moment 包 npm i moment

// html

     

            
{{item}}
            

              
                

                  
{{item.allocationDate.slice(5).replace('-', '月')}}日
                  
有号
                  
无号
                  
约满
                
              
            
          


// 引入 moment
import moment from 'moment'

data () {
    return {
      time: '', // 用来高亮日期
      colorList: { 0: 'black', 1: 'blue', 2: 'red' }, // 不同状态展示不同颜色
      timeData: [], // 日历
      week: ['一', '二', '三', '四', '五', '六', '日'],
      array: [], // 补日历的数据
    }
  }


methods:{
    
    btn () {
         // 这里写请求接口
        const res = await getDailyAllocation(params)
        if (res.code === 200) {

        this.timeData = res.data

        // 数据处理展示成日历
        let startDate = moment(res.data[0].allocationDate)
        let endDate = null

        let week = moment(startDate).weekday()

        // week 为0 说明是周日
        if (week === 0) {
          week = 7
        }
        if (week > 1) {
          week = week - 1
          startDate = moment(startDate).subtract(week, 'days')
          endDate = moment(res.data[0].allocationDate)
          // 存储大于接口返回的数据日期
          const arr = []
           // 如果想展示大于接口返回的数据初始日期，那就放开这段代码，我这里只需要展示接口的数                    
           据，所以注释了
          // arr.push({ allocationDate: startDate.format('YYYY-MM-DD') })
          arr.push({ allocationDate: '' })
          while (startDate.add(1, 'days').isBefore(endDate)) {
            // 注意这里add方法处理后SDate对象已经改变。
           // arr.push({ allocationDate: endDate.format('YYYY-MM-DD') })
            arr.push({ allocationDate: '' })
          }
          this.timeData = [...arr, ...this.timeData]
          // 拿到补的数据
          this.array = arr.map(item => item.allocationDate)
        }
      } 
    },
    
    // 点击日期高亮
     selectDay (item) {
      this.time = item.allocationDate
    },

}

//以下是接口返回的数据 

res.data = [
    {orgId: 107, screenType: null, allocationSum: 10, bookedSum: 2, allocationDate: "2023-04-16",…}
1
: 
{orgId: 107, screenType: null, allocationSum: 10, bookedSum: 0, allocationDate: "2023-04-17",…}
2
: 
{orgId: 107, screenType: null, allocationSum: 10, bookedSum: 2, allocationDate: "2023-04-18",…}
3
: 
{orgId: 107, screenType: null, allocationSum: 10, bookedSum: 2, allocationDate: "2023-04-19",…}
4
: 
{orgId: 107, screenType: null, allocationSum: 10, bookedSum: 2, allocationDate: "2023-04-20",…}
]