DDR爱好者之家 Design By 杰米
前言
最近老牌日历插件fullcalendar更新了v4版本,而且添加了Vue支持,所以用最新的fullcalendar v4制作一个完整日历体验一下,效果图:
安装
FullCalendar的功能被分解为“插件”。如果您需要它提供的功能,您只需要包含一个插件。
也就是说,FullCalendar v4所有插件都得单独安装引用。
npm install --save @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid
引用并初始化
引用、注册FullCalendar组件,得到一个月视图的日历。
<script> import FullCalendar from '@fullcalendar/vue' import dayGridPlugin from '@fullcalendar/daygrid' export default { components: { FullCalendar }, data() { return { calendarPlugins: [ dayGridPlugin ] } } } </script>
<template> <FullCalendar defaultView="dayGridMonth" :plugins="calendarPlugins" /> </template>
<style lang='less'> //用什么插件必须引入相应的样式表,否则不能正常显示 @import '~@fullcalendar/core/main.css'; @import '~@fullcalendar/daygrid/main.css'; </style>
功能定制
为了完成复杂功能,需要引用更多插件,插件列表:
https://fullcalendar.io/docs/plugin-index
语言设置简体中文
<FullCalendar locale="zh-cn" />
如果表头加了button的话,button文字要单独做处理,给每个button的英文名称加一个中文的映射,例:
<FullCalendar :header="{ left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek' }" :buttonText="buttonText" />
data () { return { buttonText: { today: '今天', month: '月', week: '周', day: '天' } } }
点击日历添加事件
想要触发dateClick事件必须先安装引用interaction插件,文档链接:https://fullcalendar.io/docs/dateClick
npm install --save @fullcalendar/interaction
<FullCalendar @dateClick="handleDateClick" />
handleDateClick (arg) { if (confirm('Would you like to add an event to ' + arg.dateStr + ' "htmlcode"><FullCalendar @eventClick="handleEventClick" />handleEventClick (info) { alert('Event: ' + info.event.title) }完整例子在我的github项目里,项目地址:https://github.com/Inspiration1/asteroid
官方文档:
https://fullcalendar.io/docs/vue
https://fullcalendar.io/docs#toc
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年04月19日
2024年04月19日
- 郭富城.1999-游园惊梦【华纳】【WAV+CUE】
- 蔡健雅《不够善良的我们 戏剧音乐设计专辑》[320K/MP3][95.77MB]
- 蔡健雅《不够善良的我们 戏剧音乐设计专辑》[FLAC/分轨][198.75MB]
- Beyond《光辉岁月Beyond精选》[WAV+CUE][480MB]
- 邰正宵1995-用情太深[香港][WAV+CUE]
- 薰妮1984-劲舞的女孩[香港永恒真存珍藏版][WAV+CUE]
- 薰妮1980-相逢有如梦中[香港永恒真存珍藏版][WAV+CUE]
- 吴俊宏.2012-无名的英雄【豪记】【WAV+CUE】
- 周国贤.2016-风起BreezeOut【维高文化】【FLAC分轨】
- 群星.2012-顾听生辉·乐坛大宗师经典半世纪3CD【环球】【WAV+CUE】
- 王瑞霞.1991-绝情雨【名冠】【WAV+CUE】
- 群星.2024-在暴雪时分电视剧影视原声带【SONY】【FLAC分轨】
- 陈楚生.2022-涂鸦森林【华声时代】【FLAC分轨】
- 《张国荣 金曲回顾》[WAV+CUE][460MB]
- 缇ゆ槦銆婃ⅵ閱夊績澹般€媅WAV+CUE][698M]