首页，效果如图所示：

<!-- 日历的第一行 -->
          <tr>
            <td align="center" colspan="3">
              <span style="display: block; width: 90px; text-align: center"
                >月</span
              >
            </td>
            <td v-for="index1 in 31" :key="index1" colspan="1" align="center">
              <span style="display: block; width: 28px; text-align: center"
                >{{ index1 }}
              </span>
            </td>
          </tr>
          <tr v-for="index in 12" :key="index">
            <!-- 循环出月份 -->
            <td align="center" colspan="3">
              <span style="display: block; width: 90px; text-align: center">{{
                index
              }}</span>
            </td>
            <!-- 循环出每月的天数 -->
            <td
              :bgColor="dateArr.includes(`${index}-${index1}`)"
              style="
                -webkit-print-color-adjust: exact;
                -moz-print-color-adjust: exact;
                -ms-print-color-adjust: exact;
                print-color-adjust: exact;
              "
              colspan="1"
              v-for="index1 in 31"
              :key="index1"
              align="center"
              @click="dayClick(index, index1)"
            >
              <span style="display: block; width: 28px; text-align: center">
                {{
                  signDayArr.indexOf(
                    `${index > 9 ? index : "0" + index}-${
                      index1 > 9 ? index1 : "0" + index1
                    }`
                  ) > -1
                    ? "√"
                    : index1
                }}
              </span>
            </td>
          </tr>

　变量的声明：

dateArr: ["2-30", "2-31", "4-31", "6-31", "9-31", "11-31"], //本年份不存在的日期，即为黑色区域
signDayArr: [], //传入的日期