在Vue项目中用fullcalendar制作日程表的示例代码


Posted in Javascript onAugust 04, 2019

前言

最近老牌日历插件fullcalendar更新了v4版本,而且添加了Vue支持,所以用最新的fullcalendar v4制作一个完整日历体验一下,效果图:

在Vue项目中用fullcalendar制作日程表的示例代码

安装

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 + ' ?')) {
    this.calendarEvents.push({ // add new event data
     title: 'New Event',
     start: arg.date,
     allDay: arg.allDay
    })
   }
  }

点击事件查看详情

<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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
北京奥运官方网站幻灯切换效果flash版打包下载
Jan 30 Javascript
基于jQuery UI CSS Framework开发Widget的经验
Aug 21 Javascript
js异步加载的三种解决方案
Mar 04 Javascript
js使用eval解析json(js中使用json)
Jan 17 Javascript
JS中数组重排序方法
Nov 11 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 Javascript
jquery实现简单实用的轮播器
May 23 jQuery
关于Vue.nextTick()的正确使用方法浅析
Aug 25 Javascript
微信小程序实现鼠标拖动效果示例
Dec 01 Javascript
JavaScript实现简单轮播图效果
Dec 01 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
Feb 22 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
Apr 22 Javascript
JS实现的tab切换并显示相应内容模块功能示例
Aug 03 #Javascript
原生JS 实现的input输入时表格过滤操作示例
Aug 03 #Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 #Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
Aug 03 #Javascript
jQuery实现的记住帐号密码功能完整示例
Aug 03 #jQuery
小程序中英文混合排序问题解决
Aug 02 #Javascript
详解JWT token心得与使用实例
Aug 02 #Javascript
You might like
PHP判断搜索引擎蜘蛛并自动记忆到文件的代码
2012/02/04 PHP
Linux下实现PHP多进程的方法分享
2012/08/16 PHP
PHP strcmp()和strcasecmp()的区别实例
2016/11/05 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
ExtJS Store的数据访问与更新问题
2010/04/28 Javascript
浅析Cookie中的Path与domain
2013/12/18 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
2015/03/04 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
javascript通过元素id和name直接取得元素的方法
2015/04/28 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
js学习笔记之事件处理模型
2016/10/31 Javascript
javascript跨域请求包装函数与用法示例
2016/11/03 Javascript
微信小程序 开发之快递查询功能的实现
2017/01/09 Javascript
微信小程序之picker日期和时间选择器
2017/02/09 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
Vue组件和Route的生命周期实例详解
2018/02/10 Javascript
vue中的使用token的方法示例
2020/03/10 Javascript
PHP读取远程txt文档到数组并实现遍历
2020/08/25 Javascript
python实现多线程采集的2个代码例子
2014/07/07 Python
在Python中执行系统命令的方法示例详解
2017/09/14 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
使用OpenCV获取图像某点的颜色值,并设置某点的颜色
2020/06/02 Python
Python学习之路安装pycharm的教程详解
2020/06/17 Python
Canvas制作旋转的太极的示例
2018/03/09 HTML / CSS
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
巴西葡萄酒商店:Divvino
2020/02/22 全球购物
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
2015重阳节座谈会主持词
2015/07/30 职场文书
详解JS数组方法
2021/11/20 Javascript
Python socket如何解析HTTP请求内容
2022/02/12 Python