1.日历组件

2.自定义日历头部

<a-calendar:header-render="headerRender"@select="onSelect":fullscreen="false"
><div slot="dateCellRender" slot-scope="value" class="events"><template v-for="item in restDay"><span:key="item.holiday"class="restCls"v-if="moment(value).format('YYYY-MM-DD') == item.holiday"></span></template></div>
</a-calendar>

上面代码中的restDay就是目前休息日的对象数组，具体可以根据实际进行调整格式。

自定义头部的代码：

headerRender({ value, type, onChange, onTypeChange }) {const start = 0;const end = 12;const monthOptions = [];const current = value.clone();const localeData = value.localeData();const months = [];for (let i = 0; i < 12; i++) {current.month(i);months.push(localeData.monthsShort(current));}for (let index = start; index < end; index++) {monthOptions.push(<a-select-option class="month-item" key={`${index}`}>{months[index]}</a-select-option>);}const month = value.month();const year = value.year();const options = [];for (let i = year - 1; i < year + 2; i += 1) {options.push(<a-select-option key={i} value={i} class="year-item">{i}</a-select-option>);}return (<div style={{ padding: "10px" }}><a-row type="flex"><a-col><a-selectdropdownMatchSelectWidth={false}class="my-year-select"onChange={(newYear) => {const now = value.clone().year(newYear);onChange(now);}}value={String(year)}>{options}</a-select></a-col><a-col style="margin-left:10px;"><a-selectdropdownMatchSelectWidth={false}value={String(month)}onChange={(selectedMonth) => {const newValue = value.clone();newValue.month(parseInt(selectedMonth, 10));onChange(newValue);}}>{monthOptions}</a-select></a-col></a-row></div>);
},

上面的代码可以实现日历头部的年份下拉框数据的处理，为当前年份的前后两年。

3.选择的日期样式调整，需要用到`dateCellRender`插槽功能

对应的样式：

.restCls {position: relative;top: -10px;width: 28px;height: 28px;display: inline-block;left: 0px;border: 2px solid #67c23a;
}

如果日期跟restDay放假日期相对应的话，则会有上面的样式，也就是有个绿色的边框。

完成！！！

antd vue实现日历功能——添加放假时间功能——基础积累相关推荐

dedecms自定义表单如何添加发布时间功能
这篇文章给大家分享的是有关dedecms自定义表单如何添加发布时间功能的内容.小编觉得挺实用的,因此分享给大家做个参考.一起跟随小编过来看看吧. dedecms自定义表单怎么添加发布时间功能? d ...
vue 仿日历格式对账单下载功能
本次主要是使用vue+element UI来完成对账单功能的实现,需求是当前时间及之前一天不可点击,大于当前日期置灰不可点击. 模板简陋敬请谅解 - 先上效果图 vue 页面布局方便数据渲染 < ...
vue 实现日历功能
vue 实现日历功能说起日历功能,及得以前实现过一次 (C# unity)但是呢没有记录过程, 今天突然又要做一个. 所以重新又来一次. 前车之鉴这次记录下其实就是一个 6行7列的一个个 ...
纯前端vue+bootstrap实现图书管理系统的添加、删除功能
1.纯前端vue+bootstrap实现图书管理系统的添加.删除功能最终效果界面 2.添加效果 3.删除效果 4.前端代码:图书管理系统.html <!DOCTYPE html> < ...
【Vue实例四】利用Vue组件实现添加评论的功能
前面学到了Vue的组件功能,本文我们通过一个评论列表的案例来巩固下组件的内容,具体效果如下: <!DOCTYPE html> <html lang="en"> ...
java记事本获取当前时间_calendar 用Java写的日历，有查询时间日期，还有记事本以及到点提醒功能。 Develop 238万源代码下载- www.pudn.com...
文件名称: calendar下载收藏√ [ 5 4 3 2 1 ] 开发工具: Java 文件大小: 4465 KB 上传时间: 2013-06-30 下载次数: 3 提供者: 陈园园 ...
在 typecho 中添加文章的最后更新时间功能
我目前使用的主题中是没有在typecho中添加文章的最后更新时间功能的,而我们知道,随着时间的推移,或多或少地我们都会修改曾经发布的文章中的一些信息,所以在文章首或尾显示文章的最后更新时间. 首先,文 ...
使用Vue 简化用户查询/添加功能
使用Vue简化用户查询/添加功能 1. 查询功能 1.1 Vue核心对象: 1.2 brand.html: 1.3 selectAllServlet(无变化): 2. 添加功能 2.1 addBra ...
vue标准时间改为时间戳_正确的济南初中寒假放假时间安排出来啦！家长速戳→...
原标题:正确的济南初中寒假放假时间安排出来啦!家长速戳→ 今年济南初中寒假放假时间↓↓↓ 2021年1月30日-2月26日第一学期 1 寒假安排义务教育阶段学校寒假开始时间为2021年1月30日( ...

antd vue实现日历功能——添加放假时间功能——基础积累

1.日历组件

2.自定义日历头部

3.选择的日期样式调整，需要用到`dateCellRender`插槽功能

antd vue实现日历功能——添加放假时间功能——基础积累相关推荐

最新文章

热门文章

antd vue实现日历功能——添加放假时间功能——基础积累

1.日历组件

2.自定义日历头部

3.选择的日期样式调整，需要用到dateCellRender插槽功能

antd vue实现日历功能——添加放假时间功能——基础积累相关推荐

最新文章

热门文章

3.选择的日期样式调整，需要用到`dateCellRender`插槽功能