最終預覽圖

html

<div class="data_box"><div class="list list_top">週日</div><div class="list list_top">週一</div><div class="list list_top">週二</div><div class="list list_top">週三</div><div class="list list_top">週四</div><div class="list list_top">週五</div><div class="list list_top">週六</div><div :class="[item.can==0?'list list_deep':current_data==item.detail?'list list_active':'list']"v-for="(item,index) in dataList" @click="choose_index(index)"><div>{{item.day}}</div><div><img src="../assets/img/final/clock.png" alt="" v-show="current_data==item.detail"></div></div></div>

css

.data_box {display: grid;width: 100%;grid-template-columns: calc(100%/7) calc(100%/7) calc(100%/7) calc(100%/7) calc(100%/7) calc(100%/7) calc(100%/7);grid-template-rows: 70px 70px 70px 70px 70px 70px;border-left: 1px solid #d8d8d8;}.list {border-right: 1px solid #d8d8d8;border-bottom: 1px solid #d8d8d8;display: flex;align-items: center;justify-content: center;cursor: pointer;}.list img {width: 18px;margin-top: 4px;margin-left: 8px;}.list_dis {background: #fbfbfb;color: #999999;}.list_deep {background: #fbfbfb;color: #d8d8d8;}.list_active {background: #f48a2b;color: white;}.list_top {border-top: 1px solid #d8d8d8;}

js邏輯暫時自己做的本地時間判斷，太長了不放了，后面要從后端獲取，可以注意判斷一下當月前面補幾天后面補幾天以及跨年的情況

總結

以上是生活随笔為你收集整理的vue+css漂亮的定制日历的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。