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

最新推荐文章于 2025-03-25 16:27:59 发布

昊谦Dad

最新推荐文章于 2025-03-25 16:27:59 发布

阅读量1.9k

点赞数

文章标签：前端开发语言 typescript vue.js anti-design-vue

本文链接：https://blog.csdn.net/weixin_43558117/article/details/131087978

版权

本文介绍如何使用 TypeScript 和 Vue.js 开发一个日历组件，该组件允许自定义头部和内容，并支持添加备注。日历通过传入当前面板的第一天和最后一天时间来获取区间数据。示例中提供了接口返回数据的格式，由于工作繁忙，直接给出了原始代码。读者如有疑问，可在评论区留言讨论。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看效果图

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

接口返回数据格式：

        [{
            "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'

最低0.47元/天解锁文章