下载安装：

提示：下载安装请查看FullCalendar官网文档：https://fullcalendar.io/docs/vue

安装适配的vue，我使用的是vue2，根据文档提示下载：

npm install --save @fullcalendar/vue @fullcalendar/core

安装所需的FullCalendar插件，根据文档提示下载：

下面包是日历的周视图、日视图等插件包：
npm install --save @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/list @fullcalendar/timegrid

开始编写利用该组件的父组件：

使用：

导入HTML：
<template><div><FullCalendar ref="calendar" :options="calendarOptions"/></div>
</template>导入js
<script>
import '@fullcalendar/core/vdom'
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import listPlugin from '@fullcalendar/list'
export default {components: {FullCalendar},data () {return {calendarOptions: {// 引入的插件，比如fullcalendar/daygrid，fullcalendar/timegrid引入后才可显示月，周，日plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin ],initialView: 'dayGridMonth', // 默认为那个视图（月：dayGridMonth，周：timeGridWeek，日：timeGridDay）firstDay: 1, // 设置一周中显示的第一天是哪天，周日是0，周一是1，类推locale: 'zh-cn', // 切换语言，当前为中文eventColor: '#3BB2E3', // 全部日历日程背景色themeSystem: 'bootstrap', // 主题色(本地测试未能生效)initialDate: moment().format('YYYY-MM-DD'), // 自定义设置背景颜色时一定要初始化日期时间timeGridEventMinHeight: '20', // 设置事件的最小高度aspectRatio: 1.65, // 设置日历单元格宽度与高度的比例。// displayEventTime: false, // 是否显示时间// allDaySlot: false, // 周，日视图时，all-day 不显示eventLimit: true, // 设置月日程，与all-day slot的最大显示数量，超过的通过弹窗显示headerToolbar: { // 日历头部按钮位置left: '',center: 'prevYear,prev title next,nextYear',right: 'today dayGridMonth,timeGridWeek,timeGridDay'},buttonText: {today: '今天',month: '月',week: '周',day: '日'},slotLabelFormat: {hour: '2-digit',minute: '2-digit',meridiem: false,hour12: false // 设置时间为24小时},eventLimitNum: { // 事件显示数量限制(本地测试未能生效)dayGrid: {eventLimit: 5},timeGrid: {eventLimit: 2 // adjust to 6 only for timeGridWeek/timeGridDay}},// 事件// eventClick: this.handleEventClick, // 点击日历日程事件eventDblClick: this.handleEventDblClick, // 双击日历日程事件 (这部分是在源码中添加的)eventClickDelete: this.eventClickDelete, // 点击删除标签事件 (这部分是在源码中添加的)eventDrop: this.eventDrop, // 拖动日历日程事件eventResize: this.eventResize, // 修改日历日程大小事件select: this.handleDateSelect, // 选中日历格事件eventDidMount: this.eventDidMount, // 安装提示事件// loading: this.loadingEvent, // 视图数据加载中、加载完成触发（用于配合显示/隐藏加载指示器。）// selectAllow: this.selectAllow, //编程控制用户可以选择的地方，返回true则表示可选择，false表示不可选择eventMouseEnter: this.eventMouseEnter, // 鼠标滑过allowContextMenu: false,editable: true, // 是否可以进行（拖动、缩放）修改eventStartEditable: true, // Event日程开始时间可以改变，默认true，如果是false其实就是指日程块不能随意拖动，只能上下拉伸改变他的endTimeeventDurationEditable: true, // Event日程的开始结束时间距离是否可以改变，默认true，如果是false则表示开始结束时间范围不能拉伸，只能拖拽selectable: true, // 是否可以选中日历格selectMirror: true,selectMinDistance: 0, // 选中日历格的最小距离dayMaxEvents: true,weekends: true,navLinks: true, // 天链接selectHelper: false,slotEventOverlap: false // 相同时间段的多个日程视觉上是否允许重叠，默认true允许}}},methods: {eventMouseEnter (event, jsEvent, view) { // 鼠标划过的事件if (event.event.classNames.length) {// console.log(event)}},eventDrop (event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {console.log(event)}}
}
</script>

event: [ ]：

（event能否进行操作真正取决于开始日期和结束日期的格式，即使是设置了editable，时间还是会影响 ，一共有四种情况，当日期时间为00：00到23：59时为全天）events: [{title : '可以拖动但不能缩放',start : '2019-07-01 12:30',end : '2019-07-01 13:30',　　     editable: true},//可以拖动但不能缩放，但在周、日视图中是可以进行缩放的{title : '可以拖动、缩放',start : '2019-07-02 00:00',end : '2019-07-02 23:59',color:'red',        editable: true}, //可以拖动、缩放　　  {title : 'event 2',start : '2019-07-02',end : '2019-07-02',color:'red',        editable: true},   { title: 'event 1',date: '2020-06-01', classNames:['cal'],       editable: true},{start: '2020-07-24',end: '2020-07-28',overlap: false,display: 'background',color: '#ff9f89'},//背景色 (添加相同时间的背景色时颜色会重叠) 一点要初始化日期时间 initialDate: '2020-07-10',],

添加约束（日程只能在设置了 groupId: ‘availableForMonthStart’ 中进行拖动以及缩放功能

{ id: '添加约束',title: '添加约束',start: '2020-07-11 00:00',end: '2020-07-11 12:00',classNames: ['continuousClass'],color: '#75a7c8',editable: true,constraint: 'availableForMonthStart'
},{id: 'constraintDom',groupId: 'availableForMonthStart',start: '2020-07-11 00:00',end: '2020-07-11 23:59',display: 'background',color: '#ff9f89'}

推荐几个方法来修改样式（这几个方法都可以操作日程中的样式）：

   eventDidMount: this.eventDidMount，// 渲染时eventDragStart: this.eventDragStart, // 日程开始拖拽时触发eventDragStop: this.eventDragStop, // 日程拖拽结束时触发eventResizeStart: this.eventResizeStart, // 日程大小调整开始时触发eventResizeStop: this.eventResizeStop, // 日程大小调整结束时触发

月/周视图增加农历

calendarOptions中增加views数据；
通过dayCellContent来设置日期里显示的数据；
引入calendar.js计算农历 https://github.com/jjonline/calendar.js；

import calenderFormate from "../utils/calendar" //农历计算方法
import {formatDate} from "../utils/index" //将日期对象转换成 2020-01-01 格式的日期//data中calendarOptions修改：
calendarOptions: {views:{//对应月视图dayGridMonth:{displayEventTime:false,//是否显示时间dayCellContent(item){let _date=formatDate(item.date).split('-')let _dateF=calenderFormate.solar2lunar(_date[0],_date[1],_date[2])return {html:`<p><label>${_dateF.cDay}</label><span>${_dateF.IDayCn}</span></p>`}},//对应周视图调整timeGridWeek:{slotMinTime:"09:00",//周视图开始时间slotMaxTime:"20:00",//周视图结束时间displayEventTime:false,//是否显示时间dayHeaderContent(item){let _date=formatDate(item.date).split('-')let _dateF=calenderFormate.solar2lunar(_date[0],_date[1],_date[2])return {html:`<h3>${_dateF.ncWeek.slice(2)}</h3><p><label>${_dateF.cDay}</label><span>${_dateF.IDayCn}</span></p>`}}}}},
}

FullCalendar插件的使用相关推荐

基于FullCalendar插件的个人日程安排系统(4)
这一篇开始要用到FullCalendar插件,由于我自己也是头一次用,也不是很了解,所以只能简单介绍一下,大家可以一起讨论. 效果图 customer_index.jsp <%@ page la ...
农历版的FullCalendar插件
分享一个农历版的FullCalendar插件: 精简版如下图: 代码同样适用ajax异步,带有order排序: $(function(){ var dayDate = new Date ...
js 排班插件_js jquery 实现排班,轮班，日历，日程。使用fullcalendar 插件
如果想用fullcalendar实现排班功能,或者日历.日程功能.那么只需要简单的几步: 这里先挂官网链接: fullcalendar fullcalendar官网下载链接一.下载及简单配置 1.这 ...
vue使用FullCalendar插件实现会议预约功能，个性化实现周视图
此案例是做一个会议预约的页面,可以通过会议室下拉框切换会议室,通过选择日期跳转到某一天的周视图,其中一些个性化的设置包括title和左右切换按钮的样式修改.左侧时间栏显示半点.每列头部用日期加星期上下 ...
js jquery 实现排班,轮班，日历，日程。使用fullcalendar 插件
如果想用fullcalendar实现排班功能,或者日历.日程功能.那么只需要简单的几步: 这里先挂官网链接: fullcalendar fullcalendar官网下载链接一.下载及简单配置 1.这 ...
FullCalendar插件月视图正常显示周视图不正常显示问题解决方法
2019独角兽企业重金招聘Python工程师标准>>> renderCalendarView : function(){var height = $(window).height() ...
fullCalendar插件的使用简单教程
转载请标明出处: 原文首发于:http://www.zhangruibin.com 本文出自RebornChang的博客厚颜打广告亲,博主的微信公众号 '程序员小圈圈'开始持续更新了哟~~ 关注公 ...
基于FullCalendar插件的简单个人日程安排系统(3)
(这里的代码有点多不过都不是特别复杂,慢慢看,O(∩_∩)O哈哈~) LoginServlet.java package cn.javaee.controller;import java.io.IOE ...
Fullcalendar v5.5.1 设计一个考勤日历插件
前言最近公司HR项目新增一个考勤日历需求,发现Fullcalendar插件功能齐全,完美支持JQuery.Vue.React 和 Angular,支持TypeScript,开源,并托管在GitHub ...

FullCalendar插件的使用

下载安装：

使用：

event: [ ]：

月/周视图增加农历

FullCalendar插件的使用相关推荐

最新文章

热门文章