vue-event-calendar 事件日历插件

Kaede 发布于2019-08-21 11:22 / 2136人阅读

摘要：这里拿到的是传入的单个所有数据组件事件可以监听的事件有两个，选择了哪天和当月是哪月，当发生改变时，会触发监听函数。

vue-event-calendar

vue-event-calendar是一款简单小巧的事件日历组件，针对Vue2开发。样式美观，且响应式。
在线例子

依赖

vue: ^2.0.0

使用方法 安装

 npm install vue-event-calendar --save

入口 Main.js

import "vue-event-calendar/dist/style.css" //1.1.10之后的版本，css被放在了多带带的文件中，方便替换
import vueEventCalendar from "vue-event-calendar"
Vue.use(vueEventCalendar, {locale: "en"}) //可以设置语言，支持中文和英文

用法示例

自定义事件模版（可以允许你展示更多信息）

vue-event-calendar允许自定义事件模版，但是这个功能需要Vue 2.1.0版本以上才可以使用。原因是我试用了2.1.0以上才有的新功能作用域插槽(Scoped Slots)。

组件事件

可以监听的事件有两个，选择了哪天和当月是哪月，当发生改变时，会触发监听函数。函数中的回调参数为改变后的日期。

Options

  // 当 Vue.use时, 可以设置的参数
  {
    locale: "en",
    color: "black", //Set main color
    className: "Custom className for current clicked date", // (default: "selected-day")
    weekStartOn: "week Start on which day"  // Can be: 1, 2, 3, 4, 5, 6, 0 (default: 0)
  }

API

// 下个月
this.$EventCalendar.nextMonth()

// 上个月
this.$EventCalendar.preMonth()

//到指定日期
this.$EventCalendar.toDate("2016/11/12")

可以看我写的Demo

开发

可以在github直接clone我的项目然后执行如下命令继续二次开发或发版，欢迎star&&issue

npm run dev  //develop
npm run build //production

Change log

1.3.6 -> 1.4.0

去除了当天的背景，改用一个在日期下面的小圆点替代

增加选中日期样式

混合云专线服务日历插件 js日历插件 html日历添加事件 php 日历插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86619.html

前端开源项目周报0321

摘要：由出品的前端开源项目周报第十三期来啦。我们的前端开源周报集合了一周来新收录的优质的前端开源项目，方便前端开发人员便捷的找到自己需要的项目工具等。由OpenDigg 出品的前端开源项目周报第十三期来啦。我们的前端开源周报集合了OpenDigg一周来新收录的优质的前端开源项目，方便前端开发人员便捷的找到自己需要的项目工具等。react-perimeter 在元素周围创建不可见paddin...

Lemon_95 2019-08-29 12:17 评论0 收藏0
前端开源项目周报0321

摘要：由出品的前端开源项目周报第十三期来啦。我们的前端开源周报集合了一周来新收录的优质的前端开源项目，方便前端开发人员便捷的找到自己需要的项目工具等。由OpenDigg 出品的前端开源项目周报第十三期来啦。我们的前端开源周报集合了OpenDigg一周来新收录的优质的前端开源项目，方便前端开发人员便捷的找到自己需要的项目工具等。react-perimeter 在元素周围创建不可见paddin...

OldPanda 2019-08-20 15:17 评论0 收藏0
Cordova创建系统日历事件

摘要：在制作一款打卡的时候有这么一个需求创建提醒到系统日历中，也就是利用系统日历来做事件的提醒，这么做的好处很明显，无需处理提醒的细节，也无需后台。在制作一款打卡App的时候有这么一个需求 -- 创建提醒到系统日历中，也就是利用系统日历来做事件的提醒，这么做的好处很明显，App无需处理提醒的细节，也无需后台。这个App是基于Cordova开发的，并没有访问系统日历的接口，我们只能通过插件来...

snowLu 2019-08-23 13:57 评论0 收藏0
FullCalendar插件的基本使用

摘要：插件的依赖文件插件的使用页面结构设置日历头部信息，如果设置为，则不显示头部信息。设置日历的高度，包括日历头部，默认未设置，高度根据值自适应。先说一下我的另一博客地址: https://home.cnblogs.com/u/bllx/ FullCalendar的选择前段时间，一直在开发考勤系统，当时为满足设计的需求，选了好几个插件，最后决定采用Fullcanlendar的插件。感觉这...

import. 2019-08-23 12:38 评论0 收藏0
FullCalendar插件的基本使用

摘要：插件的依赖文件插件的使用页面结构设置日历头部信息，如果设置为，则不显示头部信息。设置日历的高度，包括日历头部，默认未设置，高度根据值自适应。先说一下我的另一博客地址: https://home.cnblogs.com/u/bllx/ FullCalendar的选择前段时间，一直在开发考勤系统，当时为满足设计的需求，选了好几个插件，最后决定采用Fullcanlendar的插件。感觉这...

qpal 2019-08-05 15:19 评论0 收藏0