fullcalendar日历控件知识点集合

fullcalendar日历控件知识点集合1、基本语法：首先，fullcalendar和JQUERY一样，以面向对象的方式来组织代码。

当然，这里的面向对象仅仅是指可以把整个fullcalendar理解为一个类，这个类里包括有很多的属性、方法、委托(函数回调)作为成员变量。

通过为这些成员变量赋值，即可实例化出一个符合自己需求的fullcalendar实例出来，即最终在浏览器里渲染出的日历。

换句话说，我们所做的绝大多数工作就是按照fullcalendar的语法约定去配置出一个符合我们需求的fullcalendar实例。

除非对于极少的特殊需求，fullcalendar向我们提供的接口不足以满足，才会去修改fullcalendar本身的js文件。

作为一种JQUERY插件，可以把fullcalendar理解为向jquery对象集里添加了一个日历相关的对象，这个对象里相关方法、属性、的调用方式，即为fullcalendar的基本语法。

整个语法分为两种：第一种和日历本身无关，仅仅是利用fullcalendar提供的方法来进行字符串和日期间的转换，形式如下：$.fullCalendar.formatDate();第二种则是与和配置fullcalendar实例相关的，这最终会影响到fullcalendar在浏览器里的渲染，形式如下$(‘#someId’) .fullCalendar(content);$(‘#someId’)将得到一个jquery对象，其中someId为你希望渲染日历的元素id。

重点是后面一部分.fullCalendar(content);Content有三种形式：①为属性赋值{key:value,…}$('#calendar').fullCalendar({weekends: false // will hide Saturdays and Sundays});这里即得到一个fullcalendar实例，其中weekends属性为false,即月日历不会显示周末。

fullcalendar changeview用法FullCalendar ChangeView 用法FullCalendar 是一个功能强大的日历插件，可以很方便地在网页中创建交互式的日历。

其中的 ChangeView 功能允许用户切换不同的视图模式，以适应不同的需求。

下面是一些 ChangeView 的常见用法。

使用changeView方法切换视图通过调用 FullCalendar 的changeView方法，可以在日历中切换不同的视图。

$('#calendar').fullCalendar('changeView', 'listWeek ');以上代码将把日历切换到listWeek视图模式。

列出所有支持的视图FullCalendar 支持多种视图模式，可以通过getView方法获取当前可用的视图。

var views = $('#calendar').fullCalendar('getView');使用上述代码，可以将当前的视图模式列表存储在views变量中。

通过按钮切换视图为了提供更好的用户体验，我们可以在页面上添加一些按钮，让用户可以直接切换视图。

$('#button-day').click(function() {$('#calendar').fullCalendar('changeView', 'agendaDay'); });$('#button-week').click(function() {$('#calendar').fullCalendar('changeView', 'agendaWeek ');});// ...以上代码展示了如何通过按钮点击事件，调用changeView方法切换到不同的视图。

FullCalendar 是一个功能强大的JavaScript事件日历插件，可用于创建可定制的日历界面，并实现互动事件管理。

下面将按照以下主题和内容进行文章撰写：1. FullCalendar 简介FullCalendar 是一个开源的日历插件，可以与现代网络应用程序完美集成，并提供了丰富的功能和灵活的定制选项。

它支持多种视图，包括月视图、周视图、日视图等，还可以展示事件、任务和日程安排。

因其灵活、易用且功能全面而备受开发者的青睐。

2. FullCalendar 的基本用法使用 FullCalendar 可以轻松地在网页中创建一个交互式的日历界面。

基本的用法包括导入 FullCalendar 的 JavaScript 和 CSS 文件，然后在页面中初始化日历，添加事件，设置自定义样式和交互行为等。

在各种项目中，开发者可以通过简单的配置和API调用，实现日历的各类功能。

3. FullCalendar 的功能特性FullCalendar 不仅支持静态的展示功能，还提供了丰富的交互式特性。

比如可以实现拖拽事件调整时间、点击事件查看详细信息、动态加载数据等功能。

这些功能使得FullCalendar 能够被广泛应用于各种场景，如会议日程管理、在线预约系统、个人日程安排等。

4. FullCalendar 的定制化FullCalendar 提供了丰富的定制选项，允许开发者根据需求改变日历的外观和行为。

通过调整参数、使用回调函数以及自定义 CSS 样式，可以实现各种定制化效果，使得日历能够与项目整体风格相匹配，满足用户的个性化需求。

5. FullCalendar 的兼容性FullCalendar 具有良好的跨评台和跨浏览器兼容性，能够在主流的现代浏览器和移动设备上正常运行。

开发者可以放心地将其用于各种Web 应用开发项目中，而无需过多关注兼容性问题。

6. FullCalendar 的社区支持FullCalendar 拥有庞大的用户社区和活跃的开发者团队，提供了丰富的文档和示例，以及及时的技术支持。

vue-lunar-full-calendar用法-回复vuelunarfullcalendar是一个基于Vue.js的全功能日历组件，它为开发者提供了一种简单而灵活的方法来实现日程安排、事件管理和日期选择功能。

在本文中，我们将一步一步地介绍vuelunarfullcalendar的用法，帮助你快速上手并实现你的日历需求。

第一步：安装和引入vuelunarfullcalendar首先，我们需要在你的Vue项目中安装vuelunarfullcalendar。

可以通过以下命令在终端中执行来进行安装：bashnpm install vuelunarfullcalendar安装完成后，你可以在你的Vue组件中引入vuelunarfullcalendar：javascriptimport VuelunarFullCalendar from 'vuelunarfullcalendar'import 'vuelunarfullcalendar/dist/VueLunarFullCalendar.css'export default {components: {VuelunarFullCalendar},...}通过以上步骤，你已经成功地将vuelunarfullcalendar集成到你的Vue项目当中。

第二步：使用vuelunarfullcalendar组件在使用vuelunarfullcalendar之前，我们需要了解一些常用的参数和事件。

vuelunarfullcalendar提供了一些可配置的选项，以便你自定义日历的外观和行为。

以下是一些常用的参数：- events: 数组，用于定义要显示在日历上的事件列表。

- options: 对象，用于配置日历的外观和行为。

可以配置的选项非常多，详情请查阅vuelunarfullcalendar的官方文档。

在你的Vue组件模板中，你可以使用vuelunarfullcalendar组件来展示日历：html<template><div><VuelunarFullCalendar:events="events":options="calendarOptions"/></div></template>第三步：初始化和配置事件接下来，我们需要初始化vuelunarfullcalendar并配置事件。

fullcalendar buttontext 事件-回复FullCalendar buttontext 事件详解：自定义按钮文本引言：FullCalendar 是一个功能强大且灵活的日历插件，广泛应用于各种应用程序和网站中。

它为开发者提供了许多定制化选项，以满足不同用户的需求。

本文将重点介绍FullCalendar buttontext 事件，该事件允许开发者自定义日历控件中的按钮文本。

我们将逐步解释buttontext 事件的使用，并提供相关示例和最佳实践。

第一步：了解buttontext 事件的作用和功能buttontext 事件是FullCalendar 插件中非常有用的一个事件，它允许开发者根据自己的需求自定义日历控件中的按钮文本。

通过使用buttontext 事件，开发者可以将默认的按钮文本改为更符合应用程序要求的文本，这样可以提高用户体验和交互性。

在FullCalendar 中，有许多按钮，如"today"（今天）、"prev"（上一个）、"next"（下一个）等。

当用户点击这些按钮时，会触发一些特定的动作和事件。

通过使用buttontext 事件，开发者可以自定义这些按钮的文本，使其更加适合应用程序的需求。

第二步：了解buttontext 事件的触发时机和参数buttontext 事件在初始化FullCalendar 实例时触发，并传递一个参数对象。

在这个参数对象中，有一个属性`let buttonInfo`，它包含了当前按钮的信息，如按钮的名称、CSS 类名、操作等。

开发者可以通过修改这些信息来自定义按钮文本。

以下是参数对象的示例：javascript{buttonInfo: {buttonName: 'prev',buttonText: 'Previous Month',buttonClass: 'fc-prevButton'}}在这个示例中，`buttonName` 表示当前按钮的名称，`buttonText` 表示当前按钮的默认文本，`buttonClass` 表示当前按钮的CSS 类名。

fullcalendar 是一个用于创建日程安排和事件日历的开源JavaScript 库。

它提供了丰富的功能和灵活的定制选项，使得用户可以轻松地创建各种类型的日历和日程安排。

在fullcalendar中，中间区域是日历的核心部分，它承载着用户的事件和日程信息。

中间区域的样式对用户体验和视觉效果至关重要。

中间区域样式的设计需要考虑以下几个方面：1. 布局中间区域的布局要能够清晰地显示用户的事件和日程安排。

通常情况下，日历会按照日期和时间的顺序排列，因此布局应该以时间轴为主导，让用户一目了然地看到各项活动的安排情况。

另外，还需要考虑到不同屏幕尺寸的适配，确保在各种设备上都能够良好地显示。

2. 样式在样式的设计上，中间区域需要具有一定的美观性和可读性。

可以通过设置合适的字体、颜色和边框等来增强用户的视觉感受，同时也要保证文字和图标的清晰度和舒适度，避免出现混乱或视觉疲劳的情况。

3. 交互中间区域的样式设计还要考虑用户的交互体验。

用户可以通过点击或拖拽来添加、修改或删除事件，因此样式设计需要充分考虑到这些交互操作的可行性和友好性。

在样式上可以通过添加一些动画效果或提示信息来增强用户的操作体验，让用户更加方便地管理日程安排。

针对以上几点，fullcalendar提供了丰富的样式定制选项，用户可以根据自己的实际需求来自定义中间区域的样式。

下面是一些关于fullcalendar中间区域样式定制的常用方法：1. 使用主题fullcalendar提供了一些预定义的主题样式，用户可以直接引入这些主题来快速定制中间区域的样式。

这些主题包含了不同的颜色、字体和布局风格，用户可以根据自己的喜好来选择合适的主题进行使用或修改。

2. 自定义样式除了使用预定义的主题外，用户还可以通过自定义CSS样式来灵活地定制中间区域的样式。

通过修改日历元素的样式属性，用户可以实现各种自定义效果，如修改字体、调整布局、添加背景图片等。

3. 使用插件fullcalendar还支持各种插件的使用，这些插件可以扩展日历的功能和样式。

2.表头信息agenda带有具体的时间格子month,basicWeek,basicDay,agendaWeek,agendaDay 是5种不同的视图空格和,的区别header:{left:'month,basicWeek,basicDay,agendaWeek,agendaDay',center:'title',right:'prevYear,prev,today,next,nextYear'}3.是否使用jquery的主题(我用的是start主题)<link type="text/css" href="css/start/jquery-ui-1.7.2.custom.css" rel="stylesheet" /><script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script><script type='text/javascript' src='js/jquery.js'>theme:true4.buttonText:{prev:'昨天',next:'明天',prevYear:'去年',nextYear:'明年',today:'今天',month:'月',week:'xx',day:'日'}5.每周的第一天是哪天Sunday=0, Monday=1, Tuesday=2, etc. firstDay:16.日期从右向左显示...不知道什么时候会这么用isRTL:7.是否显示周末weekends:true8.在月视图里显示周的模式，因为可能每月周数不同，所以月视图高度不一定，注意引号fixed 固定显示6周高，高度永远保持不变liquid 不固定xx数，xx高度可变化variable 不固定周数，但高度固定weekMode:'fixed'9.日历高度,包括表头height:850内容高度，不包括表头contentHeight:60010.xx宽与高度的比值注意：此属性不能与日历高度同时存在aspectRatio:11.切换视图的时候要执行的操作view是一个对象，后面将说道具体的属性viewDisplay:function(view){}12.窗口大小变化时执行的操作windowResize:function(view){}13.把日历绑定到一个id的xxxx$('#id').fullCalendar('render');14.销毁id日历把日历回复到初始化前，删除了所有元素，时间，和初始化数据$('#id').fullCalendar('destroy');15.默认显示的视图，注意引号defaultView:'month'16.view对象的属性name:包括month,basicWeek,basicDay,agendaWeek,agendaDaytitle:标题内容(例如"September 2009" or "Sep 7 - 13 2009")Date类型,该view下的第一天.end:Date类型,该view下的最后一天.由于是一个闭合的值,所以,比如在month view下,10月这个月份,那么end对应的应该是11月的第一天.visStart:Date类型.在该view下第一个可以访问的day. month view下,该值是当月的第一天,week view下,则通常和start一致.visEnd:Date类型,最后一个可访问的day17.集中设定初始化值可以设置的属性有dragOpacity, titleFormat, columnFormat, and timeFormat 被应用的视图有{month:// month viewweek:// basicWeek & agendaWeek viewsday:// basicDay & agendaDay viewsagenda:// agendaDay & agendaWeek viewsagendaDay:// agendaDay viewagendaWeek:// agendaWeek viewbasic:// basicWeek & basicDay viewsbasicWeek:// basicWeek viewbasicDay:// basicDay view'':// (an empty string) when no other properties match}18.取得视图对象.fullCalendar('getView')->View Objectvar view = $('#calendar').fullCalendar('getView');alert("The view's title is " + view.title);19.改变当前视图.fullCalendar('changeView',viewName)20.20里以下属性都是在agenda视图里起作用的在agenda开头的视图里，是否显示最上面all-day那一栏allDaySlot:true默认的文字:allDayText:'今天的任务'左边那一列时间的格式: axisFormat:'h(:mm)tt'()表示整点就不显示里面的内容支持的xx占位符1. s:秒2. ss:秒,两位3. m:分钟4. mm:分钟,两位5. h:小时, 12小时制6. hh:小时, 12小时制,两位7. H:小时, 24小时制8. HH:小时, 24小时制,两位9. d:日期数字10. dd:日期数字,两位11. ddd:日期名称,缩写12. dd:日期名称,全名13. M:月份数字14. MM:月份数字,两位15. MMM:月份名称,缩写16. MM:月份名称,全名17. yy:两位的年份18. yy:4位的年份19. t:上下午加a或者p20. tt:上下午加am或pm21. T:上下午加A 或者P22. TT:上下午加AM或PM23. u:ISO8601格式24. S:给日期加上st, nd, rd, th等后缀,表明是第几天每行的时间间隔slotMinutes:10滚动条滚动到得起始时间firstHour:7每天从几点起开始显示minTime:7minTime:'7:30'如果加上了分钟需要设置时间间隔每天显示到几点结束maxTime:24maxTime:'23:10'事件默认的时间执行xxdefaultEventMinutes:120此时，如果事件对象没有指定执行多长时间，则默认执行两个小时，后面将说到事件对象21.当前日期year:必须是4位数字，如果不指定，则是当前年month:当前月，从0开始，如果当前年和月都未指定，则月显示为1月date:日期的一个月，这个属性只和周视图和日视图有关，如果没指定，并且年月也没有指定，则显示一个月的第一天以下8个关于操作日期的方法.fullCalendar('prev')返回到上一个____年__月__日，与视图的种类有关.fullCalendar('next').fullCalendar('prevYear').fullCalendar('nextYear').fullCalendar('today').fullCalendar( 'gotoDate', year [, month, [ date ]] )注意月从0开始.fullCalendar( 'incrementDate', years [, months, [ days ]] ).fullCalendar( 'getDate' ) -> Date取得一个日期对象$('#my-button').click(function() {var d = $('#calendar').fullCalendar('getDate');alert("The current date of the calendar is " + d);});22.指定默认的时间格式timeFormat:h(:mm)tt23.指定默认的列格式columnFormat:{month:'ddd',// Monday:'dd M/d'}24.标题xxtitleFormat:{month:'MM yy',// September 2009week:"MMM d[ yy]{ '&#8212;'[ MMM] d yy}", // Sep 7 - 13 2009 day:'dd, MMM d, yy'// Tuesday, Sep 8, 2009}25.月显示的名字monthNames:['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] monthNames:['一月','二月', '三月', '四月', '五月', '六月', '七月','八月', '九月', '十月', '十一月', '十二月']月名字的简写monthNamesShort:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun''Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']26.星期显示的名字dayNames:['Sunday', 'Monday', 'Tuesday', 'Wednesday','Thursday', 'Friday', 'Saturday']dayNames:['星期日', '星期一', '星期二', '星期三','星期四', '星期五', '星期六']星期名字的缩写dayNamesShort:['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']27.4个关于鼠标的回调方法当点击某一天时触发此操作dayClick:function( date, allDay, jsEvent, view ) { }dayClick:function(date, allDay, jsEvent, view) {if (allDay) {alert('Clicked on the entire day:' + date);}else{alert('Clicked on the slot:' + date);}alert('Coordinates:' + jsEvent.pageX + ',' + jsEvent.pageY);alert('Current view:' + );// change the day's background color just for fun$(this).css('background-color', 'red');}当点击某一个事件时触发此操作eventClick:function( event, jsEvent, view ) { }eventClick:function(calEvent, jsEvent, view) {alert('Event:' + calEvent.title);alert('Coordinates:' + jsEvent.pageX + ',' + jsEvent.pageY);alert('View:' + );// change the border color just for fun$(this).css('border-color', 'red');}当鼠标悬停在一个事件上触发此操作eventMouseover:function( event, jsEvent, view ) { }当鼠标从一个事件上移开触发此操作eventMouseout:function( event, jsEvent, view ) { }28.事件对象fullcalendar用来存储一个日历事件信息的标准对象一下属性中，只有title和start是必须的id:String/Integer (optional)title:StringallDay:true or false (optional)指定是否是全天事件start:Date 事件开始时间，格式如下IETF format (ex:"Wed, 18 Oct 2009 13:00:00 EST")ISO8601 format (ex:"2009-11-05T13:15:30Z")end:Date (optional)事件结束时间如果事件是一个全天事件，则结束时间包括在内如果事件不是全天事件，结束时间是0:00，则结束时间的第二天不包括在内url:String (optional)当用户点击时，将会访问的网址className:String/Array (optional)这个事件使用的css 类名editable:true or false (optional)事件是否可编辑source:Array/String/Function (automatically populated)事件源，自动指定除了以上属性外，你可以自己指定属性和值29.事件数组events (as an array)events:[{title :'event1',start :'2010-01-01'},{title :'event2',start :'2010-01-05',end :'2010-01-07'},{title :'event3',start :'2010-01-09 12:30:00',allDay :false // will make the time show }]。

jQuery⽇程管理插件fullcalendar使⽤详解FullCalendar⽤来做⽇程管理功能⾮常强⼤，但是唯⼀不⾜的地⽅是没有将中国农历历法加进去，今天我将结合实例和⼤家分享如何将中国农历中的节⽓和节⽇整合到FullCalendar中，从⽽增强其实⽤性。

HTML⾸先是要载⼊jQuery库和fullcalendar插件。

<script src='js/jquery-1.9.1.min.js'></script><script src='js/fullcalendar.min.js'></script>然后在body中，建⽴⽇历容器div#calendar。

<div id="calendar"></div>jQuery使⽤jQuery调⽤fullcalendar插件，⽅法如下，值得⼀提的是events数据源来⾃json.php，这个PHP⽂件负责读取数据并返回json格式的⽇程安排数据给前端。

$(function() {$('#calendar').fullCalendar({header: {left: 'prev,next today',center: 'title',right: 'month,agendaWeek,agendaDay'},selectable: true,events: 'json.php' //数据源});});以上代码就可以展⽰⼀个⽇历界⾯，但是需要加⼊农历，则需要将农历算法代码整合到fullCalendar中，并且需要将fullCalendar.js中的代码稍微改动下，以下是⽹友@太空⾶豬以及/可爱/玫瑰提供的中国农历算法javascript版，再此⼀并感谢！function RunGLNL() {var today = new Date();var d = new Array("周⽇", "周⼀", "周⼆", "周三", "周四", "周五", "周六");var DDDD = d[today.getDay()];DDDD = DDDD + " " + (CnDateofDateStr(today)); //显⽰农历DDDD = DDDD + SolarTerm(today); //显⽰⼆⼗四节⽓document.write(DDDD);}function DaysNumberofDate(DateGL) {return parseInt((Date.parse(DateGL) - Date.parse(DateGL.getFullYear() + "/1/1")) / 86400000) + 1;}function CnDateofDate(DateGL) {var CnData = new Array(0x16, 0x2a, 0xda, 0x00, 0x83, 0x49, 0xb6, 0x05, 0x0e, 0x64, 0xbb, 0x00, 0x19, 0xb2, 0x5b, 0x00,0x87, 0x6a, 0x57, 0x04, 0x12, 0x75, 0x2b, 0x00, 0x1d, 0xb6, 0x95, 0x00, 0x8a, 0xad, 0x55, 0x02,0x15, 0x55, 0xaa, 0x00, 0x82, 0x55, 0x6c, 0x07, 0x0d, 0xc9, 0x76, 0x00, 0x17, 0x64, 0xb7, 0x00,0x86, 0xe4, 0xae, 0x05, 0x11, 0xea, 0x56, 0x00, 0x1b, 0x6d, 0x2a, 0x00, 0x88, 0x5a, 0xaa, 0x04,0x14, 0xad, 0x55, 0x00, 0x81, 0xaa, 0xd5, 0x09, 0x0b, 0x52, 0xea, 0x00, 0x16, 0xa9, 0x6d, 0x00,0x84, 0xa9, 0x5d, 0x06, 0x0f, 0xd4, 0xae, 0x00, 0x1a, 0xea, 0x4d, 0x00, 0x87, 0xba, 0x55, 0x04);var CnMonth = new Array();var CnMonthDays = new Array();var CnBeginDay;var LeapMonth;var Bytes = new Array();var I;var CnMonthData;var DaysCount;var CnDaysCount;var ResultMonth;var ResultDay;var yyyy = DateGL.getFullYear();var mm = DateGL.getMonth() + 1;var dd = DateGL.getDate();return 0;}Bytes[0] = CnData[(yyyy - 1997) * 4];Bytes[1] = CnData[(yyyy - 1997) * 4 + 1];Bytes[2] = CnData[(yyyy - 1997) * 4 + 2];Bytes[3] = CnData[(yyyy - 1997) * 4 + 3];if ((Bytes[0] & 0x80) != 0) {CnMonth[0] = 12;}else {CnMonth[0] = 11;}CnBeginDay = (Bytes[0] & 0x7f);CnMonthData = Bytes[1];CnMonthData = CnMonthData << 8;CnMonthData = CnMonthData | Bytes[2];LeapMonth = Bytes[3];for (I = 15; I >= 0; I--) {CnMonthDays[15 - I] = 29;if (((1 << I) & CnMonthData) != 0) {CnMonthDays[15 - I]++;}if (CnMonth[15 - I] == LeapMonth) {CnMonth[15 - I + 1] = -LeapMonth;}else {if (CnMonth[15 - I] < 0) {CnMonth[15 - I + 1] = -CnMonth[15 - I] + 1;}else {CnMonth[15 - I + 1] = CnMonth[15 - I] + 1;}if (CnMonth[15 - I + 1] > 12) {CnMonth[15 - I + 1] = 1;}}}DaysCount = DaysNumberofDate(DateGL) - 1;if (DaysCount <= (CnMonthDays[0] - CnBeginDay)) {if ((yyyy > 1901) && (CnDateofDate(new Date((yyyy - 1) + "/12/31")) < 0)) {ResultMonth = -CnMonth[0];}else {ResultMonth = CnMonth[0];}ResultDay = CnBeginDay + DaysCount;}else {CnDaysCount = CnMonthDays[0] - CnBeginDay;I = 1;while ((CnDaysCount < DaysCount) && (CnDaysCount + CnMonthDays[I] < DaysCount)) {CnDaysCount += CnMonthDays[I];I++;}ResultMonth = CnMonth[I];ResultDay = DaysCount - CnDaysCount;}if (ResultMonth > 0) {return ResultMonth * 100 + ResultDay;}else {return ResultMonth * 100 - ResultDay;}}function CnYearofDate(DateGL) {var YYYY = DateGL.getFullYear();var MM = DateGL.getMonth() + 1;var CnMM = parseInt(Math.abs(CnDateofDate(DateGL)) / 100);if (YYYY < 100) YYYY += 1900;if (CnMM > MM) YYYY--;YYYY -= 1864;return CnEra(YYYY) + "年";}function CnMonthofDate(DateGL) {var CnMonthStr = new Array("零", "正", "⼆", "三", "四", "五", "六", "七", "⼋", "九", "⼗", "冬", "腊");Month = parseInt(CnDateofDate(DateGL) / 100);if (Month < 0) {return "闰" + CnMonthStr[-Month] + "⽉";}else {return CnMonthStr[Month] + "⽉";}}function CnDayofDate(DateGL) {var CnDayStr = new Array("零","初⼀", "初⼆", "初三", "初四", "初五","初六", "初七", "初⼋", "初九", "初⼗","⼗⼀", "⼗⼆", "⼗三", "⼗四", "⼗五","⼗六", "⼗七", "⼗⼋", "⼗九", "⼆⼗","廿⼀", "廿⼆", "廿三", "廿四", "廿五","廿六", "廿七", "廿⼋", "廿九", "三⼗");var Day;Day = (Math.abs(CnDateofDate(DateGL))) % 100;//hanlichen modif ("初⼀" == CnDayStr[Day]) {// alert(SolarTerm(DateGL));return CnMonthofDate(DateGL);} else {if (SolarTerm(DateGL) != "") {return SolarTerm(DateGL);} else {return CnDayStr[Day];}}}function DaysNumberofMonth(DateGL) {var MM1 = DateGL.getFullYear();MM1 < 100 ? MM1 += 1900 : MM1;var MM2 = MM1;MM1 += "/" + (DateGL.getMonth() + 1);MM2 += "/" + (DateGL.getMonth() + 2);MM1 += "/1";MM2 += "/1";return parseInt((Date.parse(MM2) - Date.parse(MM1)) / 86400000);}function CnEra(YYYY) {var Tiangan = new Array("甲", "⼄", "丙", "丁", "戊", "⼰", "庚", "⾟", "壬", "癸");var Dizhi = new Array("⼦", "丑", "寅", "卯", "⾠", "巳", "午", "未", "申", "⾣", "戌", "亥");return Tiangan[YYYY % 10] + Dizhi[YYYY % 12];}function CnDateofDateStr(DateGL) {if (CnMonthofDate(DateGL) == "零⽉") return "　请调整您的计算机⽇期!";else return "农历" + CnYearofDate(DateGL) + " " + CnMonthofDate(DateGL) + CnDayofDate(DateGL); }function SolarTerm(DateGL) {var SolarTermStr = new Array("⼩寒", "⼤寒", "⽴春", "⾬⽔", "惊蛰", "春分","清明", "⾕⾬", "⽴夏", "⼩满", "芒种", "夏⾄","⼩暑", "⼤暑", "⽴秋", "处暑", "⽩露", "秋分","寒露", "霜降", "⽴冬", "⼩雪", "⼤雪", "冬⾄");var DifferenceInMonth = new Array(1272060, 1275495, 1281180, 1289445, 1299225, 1310355,1321560, 1333035, 1342770, 1350855, 1356420, 1359045,1358580, 1355055, 1348695, 1340040, 1329630, 1318455,1306935, 1297380, 1286865, 1277730, 1274550, 1271556);var DifferenceInYear = 31556926;var BeginTime = new Date(1901 / 1 / 1);BeginTime.setTime(947120460000);for (; DateGL.getFullYear() < BeginTime.getFullYear();) {BeginTime.setTime(BeginTime.getTime() - DifferenceInYear * 1000);}for (; DateGL.getFullYear() > BeginTime.getFullYear();) {BeginTime.setTime(BeginTime.getTime() + DifferenceInYear * 1000);}for (var M = 0; DateGL.getMonth() > BeginTime.getMonth(); M++) {BeginTime.setTime(BeginTime.getTime() + DifferenceInMonth[M] * 1000);}if (DateGL.getDate() > BeginTime.getDate()) {BeginTime.setTime(BeginTime.getTime() + DifferenceInMonth[M] * 1000);}if (DateGL.getDate() > BeginTime.getDate()) {BeginTime.setTime(BeginTime.getTime() + DifferenceInMonth[M] * 1000);M == 23 ? M = 0 : M++;}var JQ = "";if (DateGL.getDate() == BeginTime.getDate()) {JQ += SolarTermStr[M];}return JQ;}将以上代码直接复制粘贴到从官⽹下载的fullcalendar.js的最后。

vue-fullcalendar⽤法详解（vue2.0的⽇历插件）⼀、下载npm install vue-fullcalendar⼆、显⽰在页⾯上1、main.jsimport FullCalendar from 'vue-fullcalendar'e(FullCalendar)2、⽤到⽇历的组件<template><div><full-calendar :events="monthData" class="test-fc"first-day='1' locale="fr"@changeMonth="changeMonth" // 切换⽉时的事件，可⾃⼰定义事件@eventClick="eventClick" // 点击当天的事件，可⾃⼰定义事件@dayClick="dayClick" // 点击当⽉的事件，可⾃⼰定义事件@moreClick="moreClick"></full-calendar> // 点击 more, 展⽰当天所有事件，可⾃⼰定义事件</div></template><script>import { FullCalendar } from 'vue-fullcalendar'export default {data() {return {monthData: []}},methods: {// 选择⽉份changeMonth (start, end, current) {console.log('changeMonth', start.format(), end.format(), current.format())},// 点击事件eventClick (event, jsEvent, pos) {console.log('eventClick', event, jsEvent, pos)},// 点击当天dayClick (day, jsEvent) {console.log('dayClick', day, jsEvent)},// 查看更多moreClick (day, events, jsEvent) {console.log('moreCLick', day, events, jsEvent)},},components: {'full-calendar': require('vue-fullcalendar')},</script>3、事件返回的值，可依照以下格式（可以添加值，显⽰出来的值，可从插件中⾃⾏修改）monthData: [{title : 'eeeeeeeee', // 事件内容start : '2018-12-11', // 事件开始时间end : '2018-12-30', // 事件结束时间cssClass: 'red' // 事件的样式 class名（由后台返回数据） red为⾃⼰定义的class名},{title : 'sssss',start : '2018-12-25',end : '2018-12-30',cssClass: 'blue'},{title : 'dddddddd',start : '2018-12-09',end : '2018-12-30',cssClass: 'blue'},{title : 'cccccc',start : '2018-12-20',end : '2018-12-30'cssClass: 'red'},{title : 'aaaaaa',start : '2018-12-01',end : '2018-12-30',cssClass: 'red'},{title : 'bbbbbb',start : '2018-12-05',end : '2019-1-10',cssClass: 'blue'}]<style>.red {background: red;}.blue {background: blue;}</style>4、修改点击事件（添加删除等功能，可以通过插件所给事件⾃⾏修改）5、插件显⽰效果vue-fullcalendar.png6、注意：如果要修改插件内容的话，尽量不要通过下载引⼊，可在改完后，将插件引⼊assets中（即在本地引⼊），以防代码更新覆盖掉已修改的内容。

fullCalendar⽇历插件玩法解析fullCalendar⽇历 1、在⽤之前我先介绍为啥要⽤这个fullcalendar⽇历插件，⾸先我在⽤之前是⽤的Ant Design of Vue框架的⽇历，这个框架的⽇历就⽐较单调没有很灵活的能操作⽇历⾥⾯的⽇历⽇程，⽽fullcalendar⽇历就能很灵活的进⾏⽇历⽅⾯的操作。

2、在刚开始⽤的时候还是有太多坑的，fullCalendar⽇历插件在我现在发现的有（vue-full-calendar 、vue-fullcalendar 、 calendar），凡是看到npm install以上三个的就不要去下载了，虽然vue-fullcalendar是可以使⽤的，但想要使⽤下载fullCalendar⾥⾯的其它包是不可以的。

Fullcalendar安装安装所需要的npm包npm install --save @fullcalendar/vue下⾯包是⽇历的周视图、⽇视图等插件包：npm install --save @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/list @fullcalendar/timegrid安装后的fullcalendar源码和其它插件都会在@fullcalendar导⼊HTML<template><div><FullCalendar ref="myCalendar" :options="calendarOptions"/></div></template>导⼊JSimport 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 {name: 'MaintenanceCalendarview',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, // 设置⽇历单元格宽度与⾼度的⽐例。