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

前言

最近老牌日历插件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 + ' ?')) {
    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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue与bootstrap实现时间选择器的示例代码

    一.下载bootstrap-datetimepicker时间选择器js,css文件. 1. github地址:bootstrap-datetimepicker 2. 官方网站地址:官网bootstrap-datetimepicker地址,有具体的例子与解释 二.在vue项目文件中引入 import './assets/css/bootstrap.min.css' import "./assets/css/bootstrap-datetimepicker.min.css" import

  • vue.js实现仿原生ios时间选择组件实例代码

    vue.js实现仿原生ios时间选择组件实例代码

    前言 最近几个月一直在看VUE,然后试着只用原生js+vue实现某些组件. PC端时间选择组件 这是最开始实现的pc上的时间选择,平时移动端也在做,所以就想实现一下移动端的时间选择器,下面分享一下我实现移动端滚轮特效时间选择器的思路和过程.整个组件是基于vue-cli来进行构建的 功能 1.时间选择[ A.年月日选择 B.年月日小时分钟选择 C.小时分钟选择 D.分钟选择] 2.滚轮效果[ A.构成一个圆环首尾相连 B.不构成首尾相连] 3.时间选择范围设置(所选时间超过范围将弹窗提示),分钟间

  • Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能

    具体代码如下所述: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue.js中使用iView日期选择器并设置开始时间结束时间校验</title> <!-- import Vue.js --> <script src="//vuejs.org/js/vue.min.js"></script

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

    前言 最近老牌日历插件fullcalendar更新了v4版本,而且添加了Vue支持,所以用最新的fullcalendar v4制作一个完整日历体验一下,效果图: 安装 FullCalendar的功能被分解为"插件".如果您需要它提供的功能,您只需要包含一个插件. 也就是说,FullCalendar v4所有插件都得单独安装引用. npm install --save @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid 引

  • vue 项目中使用Loading组件的示例代码

    什么是vue插件? 从功能上说,插件是为Vue添加全局功能的一种机制,比如给Vue添加一个全局组件,全局指令等: 从代码结构上说,插件就是一个必须拥有install方法的对象,这个方法的接收的第一个参数是Vue构造函数,还可以接收一个可选的参数,用于配置插件: var myplugin = { install:function(Vue, options){ ... } } 从意义上来说,正如jQuery的$.fn使jQuery有了一个庞大的生态一样,Vue的插件机制使Vue形成了一个生态系统,你

  • 在Vue项目中使用d3.js的实例代码

    之前写一个 Demo里面 有些东西要使用d3实现一些效果 但是在很多论坛找资源都找不到可以在Vue里面使用D3.js的方法,npm 上面的D3相对来说 可以说是很不人性化了 完全没有说 在webpack上怎么使用D3.js 最后折腾很久 看到某位外国大佬 看他的案例 成功的实现了在Vue项目里面实现D3的使用 首先安装 npm install d3 --save-dev 以防万一,然后看package.json 安装完成 在我们开始之前,让我们渲染一个Vue组件,它使用常规的D3 DOM操作呈现

  • electron + vue项目实现打印小票功能及实现代码

    一 需求: 公司项目需要通过electron调用系统打印机,实现打印小票的功能. 二.分析: electron打印大概有两种: 第一种:通过window的webcontent对象,使用此种方式需要单独开出一个打印的窗口,可以将该窗口隐藏,但是通信调用相对复杂. 第二种:使用页面的webview元素调用打印,可以将webview隐藏在调用的页面中,通信方式比较简单. 两个对象调用打印方法的使用方式都一样. 本文是通过第二种方法实现静默打印. 三.实现过程: 1.要实现打印功能,首先要知道我们的设备

  • vue项目base64字符串转图片的实现代码

    <img :onerror="errpic" class="customerHead" :src="param.customerHead" alt=""> data() { return { param:{ id:"", customerHead: "", } } } let _this = this let files = e.target.files[0] if (fil

  • Vue项目vscode 安装eslint插件的方法(代码自动修复)

    ESlint:是用来统一JavaScript代码风格的工具,不包含css.html等. 方法和步骤: 通常情况下vue项目都会添加eslint组件,我们可以查看webpack的配置文件package.json查看,也可以查看工程下是否有.eslintrc.js和.eslintignore查看到eslint是否开启. 当我们编写不符合eslint规范的代码时,启动项目会报错,比如 这个时候可以安装vscode eslint插件,就可以自动检测不符合规范的代码.打开vscode左侧扩展面板,搜索es

  • vue项目环境搭建 启动 移植操作示例及目录结构分析

    vue项目环境搭建 启动 移植操作示例及目录结构分析

    目录 项目搭建 项目创建 项目启动停止 项目目录结构分析 全局脚本配置 index.html详细介绍 main.js入口文件详细 App.vue跟组件介绍 router-index.js 路由介绍 项目搭建 下载node 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 安装cnpm,用淘宝源: npm install -g cnpm --registry=https://registry.npm.taobao.org 检测是否安装成功:cnpm -version

  • vue 2.0 购物车小球抛物线的示例代码

    本文介绍了vue 2.0 购物车小球抛物线的示例代码,分享给大家,具体如下: 备注:此项目模仿 饿了吗.我用的是最新的Vue, 视频上的一些写法已经被废弃了. 布局代码 <div class="ball-container"> <transition name="drop" v-for="ball in balls" @before-enter="beforeDrop" @enter="droppi

  • Vue微信公众号网页分享的示例代码

    前言 今天做了个分享功能,反正挺诡异的,下面就来说一说步骤 后端使用egg.js,代码如下: 'use strict'; const Subscription = require('egg').Subscription; class AccessToken extends Subscription { static get schedule() { return { interval: '2h',//2小时获取一次 type: 'all', }; } async subscribe() { co

  • vue+element实现动态换肤的示例代码

    vue+element实现动态换肤的示例代码

    有时候一个项目的主题并不能满足所有人的审美,这时候换肤功能就很友好,本项目基于vue+element实现后台管理项目的换肤功能 1.创建换肤组件 <template> <el-color-picker class="theme-picker" popper-class="theme-picker-dropdown" v-model="theme" :predefine="predefineColors" &g

随机推荐