ant-design-vue日历面板 a-calendar自定义属性及日期默认选择展示 或手动实现

实现效果

想实现一个日历能正常筛选日期且能在日历看板上标注出给定的日期范围，如下图所示

依附组件 a-calendar原本样式

实现主要思路

官网描述：
dateFullCellRender 作用域插槽，自定义渲染日期单元格，返回内容覆盖单元格
headerRender 自定义头部内容

实现主要过程

 <a-calendar
        @panelChange="onPanelChange"
        :value="value1"
        :fullscreen="false"
      >
        <template slot="headerRender">
          <div>
            <div class="calendar_select">
              <div class="calendar_s_select">
                //年、月筛选可通过a-select组件实现，想在改变年、月时改变日历，只需要改变a-calendar组件绑定的value即可
              </div>
            </div>
          </div>
        </template>
        //利用dateFullCellRender返回的date日期，能返回每个日期点，比较返回的日期点返回不同className，实现自定义样式
        <!--主要： 	作用域插槽，自定义渲染日期单元格，返回内容覆盖单元格 -->
        <template slot="dateFullCellRender" slot-scope="date">
          <div :class="['date_default', getDateCss(date)]">
            {{ date.date() }}
          </div>
        </template>
      </a-calendar>

//例如给定的数据如下，当yaxis数值大于0时才返回date_select，在css文件中定义date_selec样式即可
 getDateCss(val) {
      const _data = {
        xaxis: [
          "2024-03-24",
          "2024-03-22",
          "2024-03-20",
          "2024-03-15",
          "2024-03-10",
          "2024-01-21"
        ],
        yaxis: [0, 124, 69, 0, 103, 0]
      };
      let _className = "";
      _data.yaxis.forEach((e, i) => {
        if (e > 0 && _data.xaxis[i] == val.format("YYYY-MM-DD")) {
          _className = "date_select";
          return;
        }
      });
      return _className;
    }

最后

如果上述利用作用域插槽的方法 不能满足日常应用，也可进行基于ant-design-vue 组件手动开发日历项。
详情可见另一篇文章