vue日历组件
栏目: JavaScript · 发布时间: 6年前
内容简介：最近业务需求需要一个日历组件，要求可切换周视图和月视图，并且可以显示日程安排及事件标注。看了下网上已有的日历组件，整体思路如下：
最近业务需求需要一个日历组件，要求可切换周视图和月视图，并且可以显示日程安排及事件标注。
看了下网上已有的日历组件， fullcalendar 插件star还挺多的，文档也挺全面的，但是使用起来不够简便，和我司的应用场景也有些许出入，考虑再三决定还是重新封装一个日历组件。
组件封装
整体思路如下：
1、将涉及日期时间计算的逻辑封装到组件内部，对外暴露change方法，可获取当前日历展示的时间段；
2、另外除接收一些配置信息外，还可以接收事件集合，用于渲染到对应时间格子上，相应的点击事件及日期改变也已经暴露出来，可以根据需要自行封装修改。
<full-calendar :events="fcEvents" @eventClick="fetchEvent" lang="zh" @change="changeDateRange"></full-calendar> 复制代码
3、除此之外，考虑到不同业务逻辑都可能用到日历组件，事件卡片的展示没有封装进去，通过slot暴露出来进行自由编码（参考Element的table元素）。
<!--子组件-->
<slot name="fc-body-card"></slot>
<!--父组件-->
<template slot="fc-body-card">
<!------>
</template>
复制代码
以上所述就是小编给大家介绍的《vue日历组件》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
- 可视化搭建平台的地图组件和日历组件方案选型
- vue写一个炫酷的日历组件
- React 组件库 uiw 1.5.5 发布，日历插件增强
- 手把手教你写一个微信小程序日历组件
- 原生JavaScript实现造日历轮子
- 第二章 使用VUX建立日历
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
