日历并标记

  <div class="calender-date">
                    <table cellspacing="0" cellpadding="0" class="calender-table" width="100%">
                        <tr class="calender-week">
                            <th class="blank-title"></th>
                            <th class="week-title" v-for="(item,index) in weekTitle" :key="index">{{item}}</th>
                        </tr>

                        <tr v-for="(week, w_index) in dataSet" :key="w_index">
                            <td class="dates"
                                v-for="(day, d_index) in week"
                                :key="d_index"
                                :class="{ active:day.active, showWeek: day.isWeek }">
                                <div class="date-head">
                                    <span v-if="day.isWeek"> {{ day.week }} </span>
                                    <span v-if="!day.isWeek" class="day" :class="{ bg:day.checked }"> {{ day.Label }} </span>
                                </div>
                                <div class="schedules">
                                    <ul>
                                        <li v-for="(item, index) in day.list" :key="index"
                                            style="float:left;line-height: 13px;margin-bottom: 3px;margin-right: 6px;">
                                            <span class="hand listItemWrap" :class="color(item.plan_status)" :title="item.equipment_name">
                                                   [{{item.equipment_code}}]{{item.equipment_name}}
                                            </span>
                                            <span :class="item.maintenance_level == '1'?'firstStyle':'secondStyle'">{{item.maintenance_level}}</span>
                                            <input type="checkbox"  name="inputCheckbox" @click="handleChangeCheckbox(item)">
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>

 <script>
 export default {
   name: 'test',
   computed: {
   },
   data() {
     return {
        weekTitle: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],  //周标题
        dataSet: [],
     }
   },
   mounted(){
       this.setData()

   },
   methods: {
    resetSelection(){
            var checkboxes = document.getElementsByTagName('input');
            for (var i=0; i<checkboxes.length; i++)  {
                if (checkboxes[i].type == 'checkbox'&&checkboxes[i].name == "inputCheckbox")   {
                    checkboxes[i].checked = false;
                }
            }
        },
        handleChangeCheckbox(item){

        },
      setData(){
        let list= [
        {
            "week": 44,
            "Label": "29",
            "active": false,
            "list": [],
            "Date": "2023-10-29"
        },
        {
            "week": 44,
            "Label": "30",
            "active": false,
            "list": [ {
                    "name": "标记12255",
                    "sid": "16987337561461698733802544",
    
                }],
            "Date": "2023-10-30"
        }]
        let monthWeeks = [];
                let week = [];
                //按7天拆分
                for (let i = 0; i < list.length; i++) {
                    if (i % 7 === 0) {
                        week = [];
                        week.push({week: list[i].week, isWeek: true});
                        week.push(list[i]);
                    } else if (i % 7 === 6) {
                        week.push(list[i]);
                        monthWeeks.push(week);
                    } else {
                        week.push(list[i]);
                    }
                }
                vueData.dataSet.pushArray(monthWeeks, true);
      }
   }
 }
 </script>
 <style lang="scss">
  .firstStyle{
        width: 15px;
        height: 15px;
        line-height: 15px;
        text-align: center;
        display: inline-block;
        border-radius: 50%;
        background-color: #67C23A;
        color: #fff;
        margin-left: 3px;
    }
    .secondStyle{
        width: 15px;
        height: 15px;
        line-height: 15px;
        text-align: center;
        display: inline-block;
        border-radius: 50%;
        background-color: #F7A930;
        color: #fff;
        margin-left: 3px;
    }
 </style>