vue 日历翻拍效果_VUE实现日历组件功能
哈哈, 就在昨天笔者刚刚在Github 上发布了一个基于VUE的日历组件。过去做日历都是需要引用 jquery moment 引用 fullCalendar.js 的。几者加起来体积庞大不说,也并不是很好使用在vue这种数据驱动的项目里。所以笔者经过一周的拍脑袋,做了一个十分简陋的版本。
简介
目前只支持月视图,该组件是 .vue 文件的形式。所以,大家在使用的时候 是需要node的咯~~~
安装
npm install vue-fullcalendar
DEMO
针对这个组件, 本人做了一个十分简单的 demo。进入到该项目后
npm install
npm run dev
然后打开浏览器 输入 localhost:8080 你应该就能看到demo啦
使用
大致了解后肯定是使用的问题啦,你只需要把这个组件引入到你自己的vue项目中就可以自由使用啦,因为现在是比较初步的版本。所以笔者十分鼓励大家针对自己的需求做二次开发,
import fullcalendar from 'vue-fullcalendar'
API
既然是组件,笔者自然预先定义了一些小属性。不过不用担心,都是基于VUE的
props
1、events 是该组件唯一接受的参数 用来表示该日历上的所有日程事件,他的格式应该如下
events = [
{
title : 'event1',
start: '2016-07-01',
YOUR_DATA : {}
},
{
title : 'event2',
start : '2016-07-02',
end : '2016-07-03',
YOUR_DATA : {}
}
]
title 自然就是事件的标题啦 会直接显示在日历上
start 事件的开始日期 必填哦
end 事件的结束日期 没填就默认是开始日期
YOUR_DATA 你自己定义的一些数据 变量名随意 在后续都会被vue的广播事件传递
events
这里的events 可不是上面说的 props 里的events 哦 而是 你在使用日历 时 一些行为的 反馈。 比如你点击 某一天 某个时间 日历组件都会向外部 dispatch 一个对应的事件和相应的参数
'changeMonth' 事件, 当你切换月份时触发
this.$dispatch('changeMonth', start, end)
start是这个月视图(并不是这个月)的第一天 yyyy-MM-dd
end是这个月视图(并不是这个月)的最后一天 yyyy-MM-dd
'eventClick' : 当你点击某个日历事件时触发
this.$dispatch('eventClick', event, jsEvent, pos)
event就是这个日历事件对象啦 参考 上面的props
jsEvent这次点击的原生 javascript 事件
pos这个事件的相对于日历的相对坐标 在slot中使用
'dayClick' : 当你点击某一天触发
this.$dispatch('eventClick', day, jsEvent)
day你点击的这一天的 Date 对象
jsEvent这次点击的原生 javascript 事件
slots
为了方便开发者的自由定制我在组件中加了很多slots 来填写大家自己需要的东西 比如 事件卡片 筛选器,下图是一张我自己项目的 事件卡片 和筛选。当然我并没有把他们放进组件里。 I find my roof, you find yours.
结尾
因为这个组件还是比较初级的阶段,可能有不少问题,所以十分鼓励大家提issue或是下载后根据自己的需求二次开发。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
vue 日历翻拍效果_VUE实现日历组件功能相关推荐
- vue 日历翻拍效果_Vue实现日历渲染
需求制作一个签到日历,先简单的将日历的效果做出来,直接分享一下源码,有需要直接取用就好. {{item}} {{item}} // 实现每行7个自动换行 .calenderTitle, .calend ...
- vue 日历翻拍效果_vue实现简单的日历效果
最近在项目中遇到了一个需求,在vue中创建一个组件,这个组件显示的是当前的日期,以及在当前的日需要处理的事项,处理的事项的信息会以后端的接口的形式返回. 需求确认后,搭建了一下,在这里记录了一下,现在 ...
- vue搜索好友_Vue实现类似通讯录功能(中)
本来想一篇文章写完,但是又截图又分析什么的,如果用一篇文章写,太长了,估计都没耐心看完,所以分成了几篇来写. 这篇主要说的是实现点击右侧字母索引,左边能自动滚动到相应城市功能. 兄弟组件联动 去字母索 ...
- vue变量传值_VUE 学习——父组件传值给子组件
在我们编写前端代码时,经常遇到的一种场景,子组件需要使用父组件的值,这种情况下,我们可以使用props帮助我们进行父子组件间的通信.这里我们先模拟一个场景,展示如何使用. 场景:在父组件修改值,传递给 ...
- vue项目通讯录_Vue实现类似通讯录功能(下)
字母索引滚动监听 修改字母索引组件,绑定三个touch事件,分别是touchStart.touchMove.touchEnd. 定义三个touch事件 只有当touchstart之后,才执行touch ...
- vue项目通讯录_vue 自定义组件实现通讯录功能
在线demo:http://tangyupeng.top/dist/index.html#/phone 首页 + 确认 取消 import Vue from 'vue'; import Vuex fr ...
- vue多行文本框加组件_Vue的多功能文本编辑器组件
vue多行文本框加组件 Vue代码镜像 (Vue-Codemirror) codemirror component for vuejs. vuejs的codemirror组件. CodeMirror ...
- vue ElementUI实现的记事日历
vue ElementUI Calendar calendar日历 一.vue ElementUI实现的记事日历 二.vue ElementUI实现的考勤日历 一.vue ElementUI实现的记事 ...
- vue就地复用不是更快吗_Vue.js从零开始——组件(1)
其实本来应该把这个章节也放在入门里面的,但是想想这个部分是 Vue 的核心功能之一,所以就独立出来吧,专门进行介绍也挺好的. 这个章节主要是对 Vue 的组件(Component)有个基础的了解先,也 ...
最新文章
- linux怎么重命名多个文件,在Linux中如何一次重命名多个文件详解
- svn的一些相关资料
- Java《剑指Offer》面试题2:替换空格
- iOS开发-Xcode入门ObjC程序
- C# 按部门拆分excel文件
- 一步步学习汇编系列(7)
- ctf实验平台-成绩单
- Floppy Zip Disk Rescue注册码分析
- C#用域账号登陆,访问网络路径
- android6.0 framework修改使用两个声卡
- digester java_Java XML解析之Digester的使用
- microbit python下mp3_语音 — BBC micro:bit MicroPython中文版 0.0.1 文档
- threejs特效:扫光shader
- 使用SVG.Net生成svg格式文字图片
- 信号与系统学习笔记(大纲)
- 示例-Luat示例-MQTT
- 教学相长——什么是真正的学习型人才
- poj3046 Ant Counting
- SWFObject 2.0
- js中appendChild()用法
热门文章
- IC layout 培训班招收学员啦
- 面试题03.01 三合一
- 如何用python下载股票交易数据
- emlog php7,emlog5.3.1兼容PHP7
- 计算机多媒体在化学教学中应用论文,化学实验教学多媒体技术论文
- PHP 使用word模板生成word文档示例
- 【论文推荐】 2021-11-10 云间周报 | 十月初六 | 星期三 | 今日宜运动
- 项目经理成长之路-初入职场(二)
- 关于Android项目相机使用(一)-------相机调用
- 山石网科防火墙DNAT配置-StoneOS5.5