JS：绘制日历，结合vue3食用

思路解析：假设展示2023年12月的日历

①通过new Date(new Date(2023,12).setDate(0)).getDate()获取2023.12月的天数lastDay

②通过new Date(2023,11,1).getDay()获取2023.12月第一天的起始位置startDay

③根据自己的需求在startDay和lastDay的前后补0，当前值为0的不显示

具体实现：

html部分

<div class="calendar"&gt;
    <header&gt;
       <span&gt;日</span&gt;<span&gt;一</span&gt;<span>二</span><span>三</span><span>四</span><span>五</span><span>六</span>
    </header>
    <section>
        <div v-for="item in data.dateArr" :key="item.key" :style="{ height: `${100 / data.num}%` }">
          <div v-if="item.text != 0">{{ item.text }}</div>
        </div>
    </section>
</div>

js部分

let data=reactive({
    dateArr:[],
    num:null
})

onMounted(()=>{
    getCanlendar()
})

const getCanlendar=()=>{
  const startDay = new Date(2023,11,1).getDay()
  const lastDay = new Date(new Date(2023,12).setDate(0)).getDate()
  const allDay = Math.ceil((lastDay + startDay) / 7) * 7
  data.dateArr = []
  data.num = Math.ceil((lastDay + startDay) / 7)
  for (let i = 1; i <= allDay; i++) {
    data.dateArr.push({
      text: (i - startDay) >= 1 &amp;&amp; (i - startDay) <= lastDay ? i - startDay : 0,
      key: i
    })
  }
}

scss部分

.calendar{
    width:700px;
    height:500px;
    header{
        display:flex;
        width:100%;
        height:30px;
        span{
            width:14.2%;
            height:30px;
            line-height:30px;
            text-align:center;
        }
    }
    section{
        height:calc(100% - 30px);
        >div{
            display:inline-black;
            width:14.2%;
            div{
                height:100%;
                text-align:center;
            }
        }
    }
}

【ps:以上代码未经过测试，如有错误，请自己改正。】

代码007普通

打赏 收藏 海报 链接