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日历组件》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Approximation Algorithms

Approximation Algorithms

Vijay V. Vazirani / Springer / 2001-07-02 / USD 54.95

'This book covers the dominant theoretical approaches to the approximate solution of hard combinatorial optimization and enumeration problems. It contains elegant combinatorial theory, useful and inte......一起来看看 《Approximation Algorithms》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

URL 编码/解码
URL 编码/解码

URL 编码/解码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具