Calendar 日历组件自定义头部和内容，支持备注

先看效果图

 

 

 该日历接口入参是当前面板第一天和最后一天时间，查询区间数据。

接口返回数据格式：

        [{
            "date": "2023-05-29", // 日期
            "type": "nonWorkday", // 类型
            "description": "备注" // 备注
        }]

 

工作有点忙直接上原始代码了，有疑惑的地方可以评论留言讨论

<template>
  <div class="calendar-setting">
    <a-calendar :header-render="headerRender" @select="handleSelect" @panelChange="handlePanelChange">
      <div v-if="calendarList?.length" class="ant-fullcalendar-cell" slot="dateFullCellRender" slot-scope="value">
        <calendar-item :data="getListData(value)" />
      </div>
    </a-calendar>
    <supcon-modal
      ref="calendar_modal"
      :modal_attrs="{
        width: 475,
        height: 404,
      }"
      modal_title="日期设置"
      @modal_handle_ok="form_submit"
    >
      <div slot="content">
        <div class="modal-date">
          选择日期：<span>{
  { this.selectData }}</span>
        </div>
        <supcon-form
          ref="calendar_form"
          slot="content"
          :form_attrs="{ action: 'modal' }"
          :form_default="form_default"
          :form_setting="calendar_form_person(calendarEnums)"
        />
      </div>
    </supcon-modal>
  </div>
</template>
<script>
import API from '@/api/workforce-management/duty-scheduling'
import moment from 'moment'
import { calendar