vue-full-calendar的使用方法【亲测】
由于项目需要,所以要用到一个vue-full-calendar的这个插件,今天弄了一天,测试了很多,踩了不少的坑。做个简单的记录。首先要注意插件的使用,需要安装的插件是:vue-full-calendar 而不是 vue-fullcalendar 也不是 calendar,因为我以为vue-fullcalendar和vue-full-calendar是一样的,虽然也能显示,但是具体的配置和vue.
由于项目需要,所以要用到一个vue-full-calendar的这个插件,今天弄了一天,测试了很多,踩了不少的坑。做个简单的记录。
首先要注意插件的使用,需要安装的插件是:vue-full-calendar 而不是 vue-fullcalendar 也不是 calendar,因为我以为vue-fullcalendar和vue-full-calendar是一样的,虽然也能显示,但是具体的配置和vue-full-calendar完全不一样,所以这里需要注意。
安装成功后使用:
import { FullCalendar } from 'vue-full-calendar'
components:{FullCalendar},
但是这里会提示在vue-full-calendar下没有moment,需要安装这个 comment,然后引入
import moment from "moment";
看到样式布局错乱,需要引入CSS
import 'fullcalendar/dist/fullcalendar.css'
到这里基本上就可以使用,具体看图:
简单代码示例:
<full-calendar
:events="events"
:config="config"
class="test-fc"
locale="fr"
@event-drop="eventDrop">
</full-calendar>
js:示例
import moment from "moment";
import 'fullcalendar/dist/fullcalendar.css'
import { FullCalendar } from 'vue-full-calendar'
/* calendar */
events:[
{title : '赵子龙',start : '2019-07-01T12:30',end : '2019-07-01T13:30',},
{title : '刘备',start : '2019-07-02T10:20',end : '2019-07-02T11:00',color:'red'},
{title : '关羽',start : '2019-07-03T14:20',end : '2019-07-03T15:20',backgroundColor:'green',},
{title : '张飞',start : '2019-07-04T16:00',end : '2019-07-04T17:00',color:'orange',editable:true},
{title : '曹操',start : '2019-07-05T18:40',end : '2019-07-05T19:20',}
],
config:{
firstDay:1,
locale:'zh-cn',
defaultView: 'agendaWeek',
height:'auto',
header:{
left:'title',
center:'',
right:'prev,today,next',
},
/* agenda 模式 */
allDaySlot:false,
slotLabelFormat:'H:mm', // axisFormat 'H(:mm)'
slotLabelInterval:1,
slotDuration:'00:30:00',
minTime:'8:00',
maxTime:'20:00',
editable:true,
/* 设置按钮文字 */
buttonText:{
today:'今天',
}
},
具体使用参考:
http://www.maomikeji.cn/
https://www.npmjs.com/package/vue-full-calendar
vue-full-calendar具体配置参考文档:
https://blog.csdn.net/supingemail/article/details/48371927
vue-full-calendar 中文API参考:
https://blog.csdn.net/qw_xingzhe/article/details/44920943
更多推荐
所有评论(0)