在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 相关文章推荐
jQuery get和post 方法传值注意事项
Nov 03 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
Dec 16 Javascript
自写的jQuery异步加载数据添加事件
May 15 Javascript
jquery自定义插件——window的实现【示例代码】
May 06 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
Oct 27 Javascript
node操作mysql数据库实例详解
Mar 17 Javascript
Node.js 8 中的 util.promisify的详解
Jun 12 Javascript
解决layer图标icon不加载的问题
Sep 04 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
Oct 30 Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
使用Typescript和ES模块发布Node模块的方法
May 25 Javascript
webpack4从0搭建组件库的实现
Nov 29 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检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
php计算两个日期时间差(返回年、月、日)
2014/06/19 PHP
php实现excel中rank函数功能的方法
2015/01/20 PHP
php 从指定数字中获取随机组合的简单方法(推荐)
2017/04/05 PHP
PHP实现用户异地登录提醒功能的方法【基于thinkPHP框架】
2018/03/15 PHP
可缩放Reloaded-一个针对可缩放元素的复用组件
2007/03/10 Javascript
JQuery 将元素显示在屏幕的中央的代码
2010/02/27 Javascript
利用JS延迟加载百度分享代码,提高网页速度
2013/07/01 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
2015/08/06 Javascript
详解Angular路由 ng-route和ui-router的区别
2017/05/22 Javascript
Vuex 使用 v-model 配合 state的方法
2018/11/13 Javascript
Django+vue跨域问题解决的详细步骤
2019/01/20 Javascript
详解vue在项目中使用百度地图
2019/03/26 Javascript
使用vue自定义指令开发表单验证插件validate.js
2019/05/23 Javascript
jquery传参及获取方式(两种方式)
2020/02/13 jQuery
详解Webpack4多页应用打包方案
2020/07/16 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
2020/10/29 Javascript
Flexible.js可伸缩布局实现方法详解
2020/11/13 Javascript
python动态监控日志内容的示例
2014/02/16 Python
python获取当前运行函数名称的方法实例代码
2017/04/06 Python
简述Python2与Python3的不同点
2018/01/21 Python
对django views中 request, response的常用操作详解
2019/07/17 Python
Django框架组成结构、基本概念与文件功能分析
2019/07/30 Python
使用python制作一个解压缩软件
2019/11/13 Python
Python Lambda函数使用总结详解
2019/12/11 Python
python中tab键是什么意思
2020/06/18 Python
python 视频下载神器(you-get)的具体使用
2021/01/06 Python
CSS3中的Media Queries学习笔记
2016/05/23 HTML / CSS
php优化查询foreach代码实例讲解
2021/03/24 PHP
水产养殖学应届生求职信
2013/09/29 职场文书
升职自荐信
2013/11/28 职场文书
男性健康日的活动方案
2014/08/18 职场文书
学雷锋日活动总结
2015/02/06 职场文书
Python自动操作神器PyAutoGUI的使用教程
2022/06/16 Python
Nginx如何获取自定义请求header头和URL参数详解
2022/07/23 Servers