Vue好用的日历组件vue-simple-calendar介绍

本来找了一下,感觉vue-fullcalendar 是比较合适我的想法。想找个类似QQ日历的开源项目。可惜作者已经一年没更新了。而且有点复杂。

介绍下vue-simple-calendar

Simple Vue component to show a month-grid calendar with events

作者也是和我想的差不多。不过这位仁兄自己写了一个,我就不造轮子了。

为什么用这个。

  • 支持拖拽(触摸手机设备还不行,作者说之后可能做)
  • vue2.0
  • 还在更新
  • 多语言
  • 轻量
  • flex box layout
  • 没有其他额外依赖(Moment, JQuery, etc.)
  • 使用事件。
  • 也许有机会再做些扩展。

我使用的效果是这样的。

好不好大家自己决定用不用哈。

这里还有个bug显示。。如果不加入enddate莫名会出两个…提Issues中。。。

属性:

Props,下列支持的属性请使用短横线

例如<calendar-month month-name-format=”long”>:

events:一个事件数组,下面详细解答。

disablePast:最好使用v-bind,决定是否可以浏览之前的月份。

disableFuture:和上面相反。

enableDragDrop:是否可以拖砖默认关闭false,最好也适用v-bind控制,打开的话可以捕获事件。

locale:支持47种语言来显示对应的标签。默认使用浏览器的语言。

showDate:默认显示月份。返回一个当前时间就可以了

data: function() {
return { showDate: new Date() }
},

startingDayOfWeek:每周的第一天,1是周一,默认是周日0

monthNameFormat:月份名字格式,默认long

weekdayNameFormat:默认short

Calendar Event Properties

每一个事件包含以下内容。

必须要有startDate,最好能加上title 和id。。PS:我本来就打算加的。

不解释太多了,包含属性startDate,endDate,title:显示在日历上的名字

id:每个事件的ID

url:wow这个厉害了,如果设置了,点击会跳转到对应事件。(对我反正有用)

classes:自定义CSS

Component Events

组件捕获的事件

clickDay:点击的日期

clickEvent:点击了事件

setShowDate:前往另外一个月份时。没太看懂The date passed is the first of the month in view (days before and after the month may also be visible).

dragEventEnterDate:当事件被拖拽到某个日期触发。

dragEventLeaveDate:拖拽离开日期时触发

dropEventOnDate:拖拽到某个日期时触发

Customizing the Look and Feel自定义样式。有点复杂不翻译了。

详细查看Demo

发表评论

邮箱地址不会被公开。