vue 日程表组件_VUE也有自己的日历组件
哈哈, 就在昨天笔者刚刚在Github 上发布了一个基于VUE的日历组件。过去做日历都是需要引用 jquery moment 引用 fullCalendar.js 的。几者加起来体积庞大不说,也并不是很好使用在vue这种数据驱动的项目里。所以笔者经过一周的拍脑袋,做了一个十分简陋的版本。
日历组件的demo
简介
目前只支持月视图,该组件是 .vue 文件的形式。所以,大家在使用的时候 是需要node的咯~~~
安装npm install vue-fullcalendar
当然如果对于大陆用户 cnpm 也是十分推崇的,下载速度会快很多,一下 所有使用到npm命令地方 都可以用cnpm代替 笔者不再重复
DEMO
你可以直接访问简单的在线 demo
针对这个组件, 本人做了一个十分简单的 demo。进入到该项目后npm install
npm run dev
然后打开浏览器 输入 localhost:8080 你应该就能看到demo啦
使用
大致了解后肯定是使用的问题啦,你只需要把这个组件引入到你自己的vue项目中就可以自由使用啦,因为现在是比较初步的版本。所以笔者十分鼓励大家针对自己的需求做二次开发,import fullcalendar from 'vue-fullcalendar'
API
既然是组件,笔者自然预先定义了一些小属性。不过不用担心,都是基于VUE的
propsevents 是该组件唯一接受的参数 用来表示该日历上的所有日程事件,他的格式应该如下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或是下载后根据自己的需求二次开发。当然如果你心疼笔者的一点点努力的也请给我的项目 一个 Star 哦~~
作者:桑尼君
链接:https://www.jianshu.com/p/1b4858e06662
vue 日程表组件_VUE也有自己的日历组件相关推荐
- 组件分享之前端组件——甘特图时间表时间线日历组件
组件分享之前端组件--甘特图时间表时间线日历组件 背景 近期正在探索前端.后端.系统端各类常用组件与工具,对其一些常见的组件进行再次整理一下,形成标准化组件专题,后续该专题将包含各类语言中的一些常用组 ...
- vue多行文本框加组件_Vue的多功能文本编辑器组件
vue多行文本框加组件 Vue代码镜像 (Vue-Codemirror) codemirror component for vuejs. vuejs的codemirror组件. CodeMirror ...
- axure日期选择器组件_vue干货分享,超过六种组件通信方法讲解和精髓归纳
好消息:为了更好的规划和组织内容,今后每期内容之后能将预告下期的主题,欢迎大家补充 组件的分类 常规页面组件,由 vue-router 产生的每个页面,它本质上也是一个组件(.vue),主要承载当前页 ...
- vue 循环 递归组件_Vue一个案例引发的递归组件的使用
今天我们继续使用 Vue 的撸我们的实战项目,只有在实战中我们才会领悟更多,光纸上谈兵然并卵,继上篇我们的<Vue一个案例引发的动态组件与全局事件绑定总结> 之后,今天来聊一聊我们如何在项 ...
- echart vue 图表大小_vue之将echart封装为组件
最近的新项目里,有大量数据图表类的需求,为了增强代码的复用性,减少冗余,我开始思考如何将echart封装为组件调用.本文将会以雷达图为案例,一步步讲解在vue项目中如何使用echart,如何将其封装为 ...
- vue 圆形 水波_vue 开发波纹点击特效组件
最近在使用 vue2 做一个新的 material ui 库,波纹点击效果在 material design 中被多次使用到,于是决定把它封装成一个公共的组件,使用时直接调用就好啦. 开发之前的思考 ...
- vue使用ts 引入组件_vue中使用TS实现父子组件直接的通信
vue中使用ts 在vue中使用ts是需要有一定的ts基础的,如果对于ts小白的话还是推荐先看一下ts官网,先了解基础以后这样使用起来才会事半功倍. 1.下载依赖项 npm install --sav ...
- render注册一个链接组件_vue 动态加载并注册组件、 且通过 render动态创建该组件...
基于 iview Tabs 组件实现 功能:为每个 tab 动态创建不同的.特定的组件内容,而不需要大量的 import 组件并进行 component 注册 Index.vue import loa ...
- 可能是东半球最好看的vue3日历组件vue-baidu-calendar
前几天面试,被问到如何实现一个日历组件,然后发现百度的日历组件比较看,决定自己用vue3实现一下,并且还能巩固一下vue3的知识. 代码全部采用compositionAPI script-setup风 ...
- java 日历签到功能_快速简单的实现在日历上签到的功能,不需要日历组件,带后端实现讲解...
原本想使用日历组件,发现太麻烦,仅仅就签到而已,把当月的日期渲染一下就可以了,样式也可以自己随便写,用日历组件还得想办法改日历组件的样式. 以下使用到了vue,vant就用了弹窗.按钮,换成其他的也行 ...
最新文章
- keepalived介绍和配置
- Python 字符串改变
- 程序员or产品经理┃同是职场脱发人,光头何苦为难光头!
- 群星巨型计算机事件,群星 三种特殊事件介绍 特殊事件有几种
- .vb.net 执行js方法_Deno的执行机制
- 【数据分析学习】线性降维方法
- 最好的FLV视频下载器 维棠 (支持优酷视频下载、土豆视频下载等)
- linux 中断分上下部分的原因
- 微软关闭音乐服务器,微软关闭Zune音乐服务 Zune播放器变为MP3
- JAVA类的无参方法
- 对象创建从农业社会到共产主义的发展
- 一个屌丝程序猿的人生(一百零九)
- 零基础学Arcgis(十二)地图标注与注记
- win10虚拟显示器开发
- GP数据库(三)杀进程
- CGI入门一:使用C++实现CGI程序
- 视频编解码 GOP基本概念
- windows7 内部版本7601,此windows副本不是正版
- spark scala求PV,UV,topN
- 我的梦想是成为一名计算机程序员英语怎么说,我的梦想英语作文带翻译八篇(I have a dream)...