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, // 设置⽇历单元格宽度与⾼度的⽐例。

fullcalendar⽇历插件的使⽤并动态增删改查我上个项⽬是做了⼀个关于教育⽅⾯的web端页⾯，其中的课程表就要⽤到fullcalendar⽇历插件，刚开始也是不会⽤，因为以前也没⽤过，后⾯也是看官⽅⽂档，问同事，最后完成了这个课程表，个⼈感觉fullcalendar这个⽇历插件功能很强⼤！下⾯我来附上⼏张图⽚：1、刚进去默认显⽰当前⽉份，查出数据库的数据并展⽰，今天是2018年1⽉19号，所以我给上过的课次颜⾊变为灰⾊，⽽没上过的课次变为橙⾊：2、点击特定的⽇期，添加课次：点击未上过的课次进⾏编辑或删除：以及课次的拖动，如将1⽉22号的“08:00-09:00 ⾼数⼀班”拖动到1⽉29号：下⾯我来说⼀下我是怎么实现的⾸先需要导⼊必须的css和js：<link href='' rel='stylesheet' /><script src=''></script><script src=''></script><script src=''></script><script src=''></script><script src=''></script>在页⾯中我还使⽤了bootstrap和layer，所有我还导⼊了：<link href="." type="text/css" rel="stylesheet" />//我的弹出框是⽤bootstrap实现的，所以我导⼊了bootstrap的css和js <script src="" type="text/javascript"></script><link href="" rel="stylesheet"><script src=""></script><script src=""></script>还会⽤到⼀些公⽤的js⽅法对时间格式做转化：Date.prototype.Format = function(format){var o = {"M+" : this.getMonth()+1, //month"d+" : this.getDate(), //day"h+" : this.getHours(), //hour"m+" : this.getMinutes(), //minute"s+" : this.getSeconds(), //second"q+" : Math.floor((this.getMonth()+3)/3), //quarter"S" : this.getMilliseconds() //millisecond};if(/(y+)/.test(format)) {format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));}for(var k in o) {if(new RegExp("("+ k +")").test(format)) {format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length)); }}return format;};//将数据库的时间戳转成 *年*⽉*⽇字符串function getDate(DBTime){var date = new Date(DBTime);var year = date.getFullYear();var month = date.getMonth()+1;var day = date.getDate();var dateStr;if(month<10&&day<10){dateStr = year+"-0"+month+"-0"+day;}else if(month<10&&day>=10){dateStr = year+"-0"+month+"-"+day;}else if(month>=10&&day<10){dateStr = year+"-"+month+"-0"+day;}else if(month>=10&&day>=10){dateStr = year+"-"+month+"-"+day;}return dateStr;}//将数据库的时间戳转成 *时*分字符串function getTime(DBTime){var time = DBTime.substring(0,2)+"-"+DBTime.substring(3,5);return time;}然后就是初始化FullCalendar：下⾯这些代码建议在document。

FullCalendar TimeGrid 简书概述FullCalendar是一个功能强大的日历插件，它提供了多种视图来展示事件，其中之一就是TimeGrid视图。

在本文中，我们将深入探讨FullCalendar TimeGrid视图的使用方法和相关功能。

什么是FullCalendar TimeGridTimeGrid是FullCalendar插件中的一个视图，它以时间为轴展示事件。

它将一天分割成多个时间段，每个时间段都可以显示事件。

用户可以通过滚动或缩放来查看不同的时间范围。

TimeGrid视图非常适合展示日程安排、会议安排等需要精确时间的事件。

如何使用FullCalendar TimeGrid使用FullCalendar TimeGrid非常简单。

首先，你需要引入FullCalendar的CSS和JavaScript文件。

然后，在HTML页面中创建一个容器元素来显示日历。

接下来，通过JavaScript代码初始化FullCalendar，并指定要使用的视图为TimeGrid。

以下是一个基本的使用示例：<!DOCTYPE html><html><head><link rel="stylesheet" href="fullcalendar.min.css" /><script src="fullcalendar.min.js"></script></head><body><div id="calendar"></div><script>document.addEventListener('DOMContentLoaded', function() {var calendarEl = document.getElementById('calendar');var calendar = new FullCalendar.Calendar(calendarEl, {plugins: ['timeGrid'],defaultView: 'timeGridWeek',events: [// 添加事件{title: '会议',start: '2022-01-01T10:00:00',end: '2022-01-01T12:00:00'},// 更多事件...]});calendar.render();});</script></body></html>在上面的代码中，我们创建了一个id为”calendar”的容器元素，并在JavaScript代码中初始化了FullCalendar。

⽇历插件FullCalendar应⽤：（⼆）数据增删改接上⼀篇。

这⼀篇主要讲使⽤fullcalendar插件如何做数据的增删改，⽤到了art.dialog web对话框组件，上⼀篇⽤到的webForm来展现数据，这⼀篇使⽤mvc模式来对数据进⾏增删改查。

1、准备⼯作本⼈⽤的SQLServer2012，⾸先创建任务数据库 Task：USE[TestDemo]GOSET ANSI_NULLS ONGOSET QUOTED_IDENTIFIER ONGOCREATE TABLE[dbo].[Task]([ID][nvarchar](50) NOT NULL,[Name][nvarchar](50) NULL,[Contents][nvarchar](max) NULL,[StartDate][datetime]NULL,[EndDate][datetime]NULL,CONSTRAINT[PK_Task]PRIMARY KEY CLUSTERED([ID]ASC)WITH (PAD_INDEX =OFF, STATISTICS_NORECOMPUTE =OFF, IGNORE_DUP_KEY =OFF, ALLOW_ROW_LOCKS =ON, ALLOW_PAGE_LOCKS =ON) ON[PRIMARY] ) ON[PRIMARY] TEXTIMAGE_ON [PRIMARY]GO创建MVC解决⽅案，此时mvc模式不再赘述，相信⼤家都会如何运⽤，然后把上篇⽂章⽤到的css以及js⽂件添加到本解决⽅案中。

在⾸页Index页⾯中引⼊⽂件以及添加div：(⽇历展现⽅式与之前相同)<link href="../../Content/css/fullcalendar.css" rel="stylesheet"/><link href="../../Content/css/jquery.ui.css" rel="stylesheet"/><link href="../../Content/css/style.default.css" rel="stylesheet"/><script src="../../Scripts/Plugins/jquery-1.7.min.js"></script><script src="../../Scripts/Plugins/jquery-ui-1.8.16.custom.min.js"></script><script src="../../Scripts/Plugins/fullcalendar.min.js"></script><script src="../../Scripts/Plugins/fullcalendar.js"></script><div id='calendar' style="margin-top:10px;margin-left:5px"></div>创建任务类：///<summary>///任务类///</summary>public class Task{public string ID { get; set; }///<summary>///任务名称///</summary>public string Name { get; set; }///<summary>///内容///</summary>public string Contents { get; set; }///<summary>///开始时间///</summary>public DateTime? StartDate { get; set; }///<summary>///结束时间///</summary>public DateTime? EndDate { get; set; }}2、任务查看任务查看上篇已经介绍，不再过多的讲述，由于实现⽅式发⽣了改变所以简单的提⼀下，把数据表中的数据查询出来然后展现在fullcalendar上，我⽤ 来对数据进⾏操作，⾸先创建CommonDbHelper类：public class CommonDbHelper{#region属性///<summary>///数据库连接字符串///</summary>private string connectionString;public string ConntionString{get{return connectionString;}set{connectionString = value;}}#endregion#region构造⽅法///<summary>///从配置中⾃动读取数据库类型及连接字符串///</summary>public CommonDbHelper(){this.connectionString = ConfigurationManager.AppSettings["ConnectionString"];}#endregion///<summary>///执⾏查询语句///</summary>///<param name="SqlString">查询语句</param>///<returns>DataTable </returns>public DataTable ExecuteQuery(string sqlString){using (IDbConnection iConn = new SqlConnection(this.ConntionString)){DataSet ds = new DataSet();try{System.Data.IDataAdapter iAdapter = new SqlDataAdapter(sqlString, (SqlConnection)iConn); iAdapter.Fill(ds);}catch (System.Exception e){throw new Exception(e.Message);}finally{if (iConn.State != ConnectionState.Closed){iConn.Close();}}return ds.Tables[0];}}}View Code然后添加泛型类SQLHelper通过反射把查询出来的DataTable转换为list：public class SQLHelper<Tentity> where Tentity : class,new(){///<summary>///获取所有数据///</summary>///<returns></returns>public IList<Tentity> GetData(string statement){var dt = new CommonDbHelper().ExecuteQuery(statement);if (dt == null || dt.Rows.Count == 0){return null;}IList<Tentity> list = new List<Tentity>(dt.Rows.Count);// 获得此模型的类型Type type = typeof(Tentity);string tempName = "";foreach (DataRow dr in dt.Rows){Tentity t = new Tentity();// 获得此模型的公共属性PropertyInfo[] propertys = t.GetType().GetProperties();foreach (PropertyInfo pi in propertys){// 检查DataTable是否包含此列tempName = ;if (dt.Columns.Contains(tempName)){if (!pi.CanWrite) continue;object value = dr[tempName];if (value != DBNull.Value)pi.SetValue(t, value, null);}}list.Add(t);}return list;}}在查询所有数据时只需要这样写然后foreach循环就可以了：SQLHelper<Task> dataHelper = new SQLHelper<Task>();string strcom = "SELECT * FROM Task";IList<Task> tasks = dataHelper.GetData(strcom);3、任务的添加操作添加页⾯信息，新增Edit界⾯：@model MvcApplication1.Models.Task<script type="text/javascript">$(function () {$("#start").datetimepicker({hour: 5,minute: 20});$("#end").datetimepicker({hour: 13,minute: 15});});</script><div><form id="myForm" method="post" action=""><div class="aboxmanageform"><table style="width:650px"><tr><td class="item_title">任务名称：</td><td colspan="3"><input id="Name" name="Name" type="text" style="width:516px" value="@" class="longinput"/></td></tr><tr><td class="item_title">任务内容：</td><td colspan="3"><textarea cols="80" name="Contents" id="Contents" rows="10" style="width:516px" class="longinput">@Model.Contents</textarea> </td></tr><tr><td class="item_title">开始时间：</td><td><input id="start" name="StartDate" type="text" value="@Model.StartDate" class="longinput"/></td><td class="item_title">结束时间：</td><td><input id="end" name="EndDate" type="text" value="@Model.EndDate" class="longinput"/></td></tr></table><input type="hidden" name="ID" value="@Model.ID"/></div></form></div>添加art.dialog的css、js 引⽤：<link href="../../Content/css/default.css" rel="stylesheet"/><script type="text/javascript" src="../../Scripts/Plugins/artDialog.js"></script>在添加任务的时候需要有开始时间，结束时间。

fullcalendar教程由于工作需要要开发一个日程管理，后面查询到fullcalendar是个不错jquery做的日程控件配合jquery-ui的时间选择控件，个人感觉还是不错的fullcalendar有丰富的配置满足了开发所需还有不错的用户体验，不多说上代码。

第一步骤先把相关包引用<link href="../jquery/jquery-ui.css" rel="stylesheet" type="text/css" /> <link href="css/mainstructure.css" rel="stylesheet" type="text/css" /> <link href="css/maincontent.css" rel="stylesheet" type="text/css" /> 注：红色的是自己定义用来控制jquery-ui 弹框的样式等<link rel='stylesheet' type='text/css' href='cupertino/theme.css' /><link rel='stylesheet' type='text/css'href='../fullcalendar/fullcalendar.css' /><link rel='stylesheet' type='text/css'href='../fullcalendar/fullcalendar.print.css'media='print' /><script src="../jquery/jquery-1.8.2.min.js"type="text/javascript"></script><script src="../jquery/jquery-ui.min1.9.1.js"type="text/javascript"></script><scriptsrc="/jQuery-Timepicker-Addon-master/jquer y-ui-timepicker-addon.js"></script><scriptsrc="/jQuery-Timepicker-Addon-master/jquer y-ui-sliderAccess.js"></script><script src="../jquery/datepicker-zh.js"type="text/javascript"></script><linkhref="/jQuery-Timepicker-Addon-master/jque ry-ui-timepicker-addon.css"rel="stylesheet" /><script src="../fullcalendar/fullcalendar.js"type="text/javascript"></script>1 <script type='text/javascript'>23$(document).ready(function () {45// $("#hid").timepicker();6$("#start").timepicker({ dateFormat: 'yy-mm-dd', timeFormat: 'hh:mm', hourMin: 5, hourMax: 24, hourGrid: 3, minuteGrid: 15, timeText: '时间', hourText: '时', minuteText: '分', timeOnlyTitle: '选择时间', onClose: function (dateText, inst) { 7if ($('#start').val() != '') {8var testStartDate = $('#start').datetimepicker('getDate');9var testEndDate = $('#end').datetimepicker('getDate');10if (testStartDate > testEndDate)11$('#end').datetimepicker('setDate', testStartDate);12} else {13$('#end').val(dateText);14}15},16onSelect: function (selectedDateTime) {17$('#end').datetimepicker('option', 'minDate',$('#end').datetimepicker('getDate'));18}19});20$("#end").datetimepicker({ dateFormat: 'yy-mm-dd', hourMin: 5, hourMax: 23, hourGrid: 3, minuteGrid: 15, timeText: '时间', hourText: '时', minuteText: '分', onClose: function (dateText, inst) {21if ($('#start').val() != '') {22var testStartDate = $('#start').datetimepicker('getDate');23var testEndDate = $("#end").datetimepicker('getDate');24if (testStartDate > testEndDate)25$('#start').datetimepicker('setDate', testEndDate);26} else {27$('#start').val(dateText);28}29},30onSelect: function (selectedDateTime) {31$('#start').timepicker('option', 'maxDate',$("#end").timepicker('getDate'));32}33});34$("#addhelper").hide();3536var date = new Date();37var d = date.getDate();38var m = date.getMonth();39var y = date.getFullYear();4041$('#calendar').fullCalendar({42theme: true,43header: {44left: 'prev,next today',45center: 'title',46right: 'month,agendaWeek,agendaDay'47},4849monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],50monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],51dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],52dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],53today: ["今天"],54firstDay: 1,55buttonText: {56today: '本月',57month: '月',58week: '周',59day: '日',60prev: '上一月',61next: '下一月'62},63viewDisplay: function (view) {//动态把数据查出，按照月份动态查询64var viewStart = $.fullCalendar.formatDate(view.start, "yyyy-MM-dd HH:mm:ss");65var viewEnd = $.fullCalendar.formatDate(view.end,"yyyy-MM-dd HH:mm:ss");66$("#calendar").fullCalendar('removeEvents');67$.post("/sr/AccessDate.ashx", { start: viewStart, end: viewEnd }, function (data) {6869var resultCollection = jQuery.parseJSON(data);70$.each(resultCollection, function (index, term) {71$("#calendar").fullCalendar('renderEvent', term, true);72});7374}); //把从后台取出的数据进行封装以后在页面上以fullCalendar的方式进行显示75},76editable: true,//判断该日程能否拖动77dayClick: function (date, allDay, jsEvent, view) {//日期点击后弹出的jq ui的框，添加日程记录78var selectdate = $.fullCalendar.formatDate(date,"yyyy-MM-dd");//选择当前日期的时间转换79$("#end").datetimepicker('setDate', selectdate);//给时间空间赋值80$("#reservebox").dialog({81autoOpen: false,82height: 450,83width: 400,84title: 'Reserve meeting room on ' + selectdate,85modal: true,86position: "center",87draggable: false,88beforeClose: function (event, ui) {89//$.validationEngine.closePrompt("#meeting");90//$.validationEngine.closePrompt("#start");91//$.validationEngine.closePrompt("#end"); 92},93timeFormat: 'HH:mm{ - HH:mm}',9495buttons: {96"close": function () {97$(this).dialog("close");98},99"reserve": function () {100101var startdatestr = $("#start").val(); //开始时间102var enddatestr = $("#end").val(); //结束时间103var confid = $("#title").val(); //标题104var det = $("#details").val(); //内容105var cd = $("#chengdu").val(); //重要程度106var id2;107var startdate =$.fullCalendar.parseDate(selectdate + "T" + startdatestr);//时间和日期拼接108var enddate =$.fullCalendar.parseDate(enddatestr);109var schdata = { title: confid, fullname: confid, description: det, confname: cd, confshortname: 'M1', start: selectdate + ' ' + startdatestr, end: enddatestr };110$.ajax({111type: "POST", //使用post方法访问后台113url:"/sr/getallid.ashx", //要访问的后台地址114data: schdata, //要发送的数据115success: function (data) {116//对话框里面的数据提交完成，data为操作结果117id2 = data;118var schdata2 = { title: confid, fullname: confid, description: det, confname: cd, confshortname: 'M1', start: selectdate + ' ' + startdatestr, end: enddatestr, id: id2 };119$('#calendar').fullCalendar('renderEvent', schdata2, true);120$("#start").val(''); //开始时间121$("#end").val(''); //结束时间122$("#title").val(''); //标题123$("#details").val(''); //内容124$("#chengdu").val(''); //重要程度125126}127});128129130$(this).dialog("close");131132133}134135}136});137$("#reservebox").dialog("open");138return false;139},140141loading: function (bool) {142if (bool) $('#loading').show();143else $('#loading').hide();144},145eventAfterRender: function (event, element, view) {//数据绑定上去后添加相应信息在页面上146var fstart = $.fullCalendar.formatDate(event.start,"HH:mm");147var fend = $.fullCalendar.formatDate(event.end, "HH:mm"); 148151var confbg = '';152if (event.confid == 1) {153confbg = confbg + '<spanclass="fc-event-bg"></span>';154} else if (event.confid == 2) {155confbg = confbg + '<spanclass="fc-event-bg"></span>';156} else if (event.confid == 3) {157confbg = confbg + '<spanclass="fc-event-bg"></span>';158} else if (event.confid == 4) {159confbg = confbg + '<spanclass="fc-event-bg"></span>';160} else if (event.confid == 5) {161confbg = confbg + '<spanclass="fc-event-bg"></span>';162} else if (event.confid == 6) {163confbg = confbg + '<spanclass="fc-event-bg"></span>';164} else {165confbg = confbg + '<spanclass="fc-event-bg"></span>';166}167168// var titlebg = '<span class="fc-event-conf"style="background:' + event.confcolor + '">' + event.confshortname + '</span>'; 169170// if (event.repweeks > 0) {171// titlebg = titlebg + '<span class="fc-event-conf"style="background:#fff;top:0;right:15;color:#3974BC;font-weight:bold">R</span>'; 172// }173174if ( == "month") {//按月份175var evtcontent = '<div class="fc-event-vert"><a>'; 176evtcontent = evtcontent + confbg;177evtcontent = evtcontent + '<spanclass="fc-event-titlebg">' + fstart + " - " + fend + event.fullname + '</span>';178181element.html(evtcontent);182} else if ( == "agendaWeek") {//按周183var evtcontent = '<a>';184evtcontent = evtcontent + confbg;185evtcontent = evtcontent + '<spanclass="fc-event-time">' + fstart + "-" + fend + '</span>';186evtcontent = evtcontent + '<span>'+ event.fullname + '</span>';187189element.html(evtcontent);190} else if ( == "agendaDay") {//按日191var evtcontent = '<a>';192evtcontent = evtcontent + confbg;193evtcontent = evtcontent + '<spanclass="fc-event-time">' + fstart + " - " + fend + '</span>';194// evtcontent = evtcontent + '<span>Room: ' +event.confname + '</span>';195// evtcontent = evtcontent + '<span>Host: ' +event.fullname + '</span>';196// evtcontent = evtcontent + '<span>Topic: ' + event.topic + '</span>';197// evtcontent = evtcontent + '</a><span class="ui-iconui-icon-arrow-2-n-s"><div class="ui-resizable-handle ui-resizable-s"></div></span>'; 198element.html(evtcontent);199}200},201eventMouseover: function (calEvent, jsEvent, view) {202var fstart = $.fullCalendar.formatDate(calEvent.start, "yyyy/MM/dd HH:mm");203var fend = $.fullCalendar.formatDate(calEvent.end,"yyyy/MM/dd HH:mm");204$(this).attr('title', fstart + " - " + fend + " " + "标题" + " : " + calEvent.title);205$(this).css('font-weight', 'normal');206$(this).tooltip({207effect: 'toggle',208cancelDefault: true209});210},211212eventClick: function (event) {213var fstart = $.fullCalendar.formatDate(event.start,"HH:mm");214var fend = $.fullCalendar.formatDate(event.end, "HH:mm"); 215// var schdata = { sid: event.sid, deleted: 1, uid: event.uid }; 216var selectdate = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd");217$("#start").val(fstart); ;218$("#end").datetimepicker('setDate', event.end);219220221$("#title").val(event.title); //标题222$("#details").val(event.description); //内容223$("#chengdu").val(event.confname); //重要程度224225226227$("#reservebox").dialog({228autoOpen: false,229height: 450,230width: 400,231title: 'Reserve meeting room on ',232modal: true,233position: "center",234draggable: false,235beforeClose: function (event, ui) {236//$.validationEngine.closePrompt("#meeting"); 237//$.validationEngine.closePrompt("#start");238//$.validationEngine.closePrompt("#end");239$("#start").val(''); //开始时间240$("#end").val(''); //结束时间241$("#title").val(''); //标题242$("#details").val(''); //内容243$("#chengdu").val(''); //重要程度244},245timeFormat: 'HH:mm{ - HH:mm}',246247buttons: {248"删除": function () {249var aa = window.confirm("警告：确定要删除记录，删除后无法恢复！");250if (aa) {251var para = { id: event.id };252253254$.ajax({255type: "POST", //使用post方法访问后台256257url:"/sr/removedate.ashx", //要访问的后台地址258data: para, //要发送的数据259success: function (data) {260//对话框里面的数据提交完成，data为操作结果261262263$('#calendar').fullCalendar('removeEvents', event.id);264}265266267});268269}270$(this).dialog("close");271},272"reserve": function () {273274var startdatestr = $("#start").val(); //开始时间275var enddatestr = $("#end").val(); //结束时间276var confid = $("#title").val(); //标题277var det = $("#details").val(); //内容278var cd = $("#chengdu").val(); //重要程度279var startdate =$.fullCalendar.parseDate(selectdate + "T" + startdatestr);280var enddate =$.fullCalendar.parseDate(enddatestr);281282event.fullname = confid;283event.confname = cd;284event.start = startdate;285event.end = enddate;286event.description = det;287var id2;288289var schdata = { title: confid, fullname: confid, description: det, confname: cd, confshortname: 'M1', start: selectdate + ' ' + startdatestr, end: enddatestr, id: event.id };290$.ajax({291type: "POST", //使用post方法访问后台292293url:"/sr/Updateinfo.ashx", //要访问的后台地址294data: schdata, //要发送的数据295success: function (data) {296//对话框里面的数据提交完成，data为操作结果297298var schdata2 = { title: confid, fullname: confid, description: det, confname: cd, confshortname: 'M1', start: selectdate + ' ' + startdatestr, end: enddatestr, id: event.id };299$('#calendar').fullCalendar('updateEvent', event);300}301});302303304305306307$(this).dialog("close");308}309310}311});312$("#reservebox").dialog("open");313return false;314},315// events:"/sr/AccessDate.ashx"316events: []317});318319320321//goto date function322if ($.browser.msie) {323$("#calendar .fc-header-right table td:eq(0)").before('<td><div class="ui-state-default ui-corner-left ui-corner-right"style="border-right:0px;padding:1px 3px 2px;" ><input type="text" id="selecteddate" size="10" style="padding:0px;"></div></td><td><div class="ui-state-defaultui-corner-left ui-corner-right"><a><span id="selectdate" class="ui-iconui-icon-search">goto</span></a></div></td><td><spanclass="fc-header-space"></span></td>');324} else {325$("#calendar .fc-header-right table td:eq(0)").before('<td><div class="ui-state-default ui-corner-left ui-corner-right"style="border-right:0px;padding:3px 2px 4px;" ><input type="text" id="selecteddate" size="10" style="padding:0px;"></div></td><td><div class="ui-state-defaultui-corner-left ui-corner-right"><a><span id="selectdate" class="ui-iconui-icon-search">goto</span></a></div></td><td><spanclass="fc-header-space"></span></td>');326}327328$("#selecteddate").datepicker({329dateFormat: 'yy-mm-dd',330beforeShow: function (input, instant) {331setTimeout(332function () {333$('#ui-datepicker-div').css("z-index", 15);334}, 100335);336}337});338339340341$("#selectdate").click(function () {342var selectdstr = $("#selecteddate").val();343var selectdate = $.fullCalendar.parseDate(selectdstr,"yyyy-mm-dd");344$('#calendar').fullCalendar('gotoDate', selectdate.getFullYear(), selectdate.getMonth(), selectdate.getDate());345});346347348// conference function349$("#calendar .fc-header-left table td:eq(0)").before('<td><divclass="ui-state-default ui-corner-left ui-corner-right" id="selectmeeting"><a><span id="selectdate" class="ui-icon ui-icon-search" style="float: left;padding-left: 5px; padding-top:1px"></span>meeting room</a></div></td><td><spanclass="fc-header-space"></span></td>');350351352353// $(".fc-button-prev").click(function () {354// alert("fasdf");355// });356357});358359360361 </script>第3步加入一些必要的控制样式<style type='text/css'>.ui-datepicker{width: 23em;padding: .2em .2em 0;font-size: 70%;display: none;}#calendar{width: 900px;margin: 0 auto;}#loading{top: 0px;right: 0px;}.tooltip{padding-bottom: 25px;padding-left: 25px;width: 100px !important;padding-right: 25px;display: none;background: #999;height: 70px;color: red;font-size: 12px;padding-top: 25px;z-order: 10;}.ui-timepicker-div .ui-widget-header{margin-bottom: 8px;}.ui-timepicker-div dl{text-align: left;}.ui-timepicker-div dl dt{height: 25px;margin-bottom: -25px;}.ui-timepicker-div dl dd{margin: 0 10px 10px 65px;}.ui-timepicker-div td{font-size: 90%;}.ui-tpicker-grid-label{background: none;border: none;margin: 0;padding: 0;}.ui-timepicker-rtl{direction: rtl;}.ui-timepicker-rtl dl{text-align: right;}.ui-timepicker-rtl dl dd{margin: 0 65px 10px 10px;}</style>第4步页面代码<div id="wrap"><div id='calendar'></div><div id="reserveinfo" title="Details"><div id="revtitle"></div><div id="revdesc"></div><div style="display: none" id="reservebox" title="Reserve meeting room"> <form id="reserveformID" method="post"><div class="sysdesc">&nbsp;</div><div class="rowElem"><label>标题:</label><input id="title" name="start"></div><div class="rowElem"><label>重要程度:</label><input id="chengdu" name="start"></div><div class="rowElem"><label>开始时间:</label><input id="start" name="start"></div><div class="rowElem"><label>结束时间:</label><input id="end" name="end"></div><div class="rowElem"><label>备忘内容:</label><textarea id="details" rows="3" cols="43"name="details"></textarea></div><div class="rowElem"></div><div class="rowElem"></div><div id="addhelper" class="ui-widget"><div style="padding-bottom: 5px; padding-left: 5px;padding-right: 5px; padding-top: 5px"class="ui-state-error ui-corner-all"><div id="addresult"></div></div></div></div></div>这里的代码我是/technology/jquery/devappwithfullcanlendar/ind ex.html上面的，根据个人项目要求来修改了。

fullcalendar使⽤教程$('#calendar').fullCalendar({header : {left : 'today prev,next',center : 'title',right : 'month,basicWeek'},buttonText : {month : '⽉视图',week : '周',day : '⽇视图'},defaultDate : date,eventPhase : 5,editable : false,// 可以拖动selectable : true,eventLimit : true,events:function(start, end, callback){//prev上⼀⽉, next下⼀⽉等事件时调⽤.fullCalendar( 'removeEvents' [, idOrFilter ] )}eventOrder :'seq',// 注意：这⾥有两种实现⽅法，下⾯是⼀种，还有⼀种是通过url，如events:'/data.json' // events : [ {// title : 'All Day Event',// start : '2016-05-01'// }, {// title : 'Long Event',// start : '2016-05-07',// end : '2016-05-10'// }, {// id : 999,// title : 'Repeating Event',// start : '2016-05-09'// }, {// id : 999,// title : 'Repeating Event',// start : '2016-05-16'// }, {// title : 'Conference',// start : '2016-05-11',// end : '2016-05-13'// }, {// title : 'Meeting',// start : '2016-05-12',// end : '2016-05-12'// }, {// title : 'Lunch',// start : '2016-05-12'// }, {// title : 'Meeting',// start : '2016-05-12'// }, {// title : 'Happy Hour',// start : '2016-05-12'// }, {// title : 'Dinner',// start : '2016-05-12'// }, {// title : 'Birthday Party',// start : '2016-05-13'// }, {// title : 'Click for Google',// url : '/',// start : '2016-05-28'// } ],dayClick : function(date, allDay, jsEvent, view) {var selDate = date.format();// 获取当前点击⽇期$("#datetimepicker").val(selDate);$("#taskModal").modal();},eventClick : function(calEvent, jsEvent, view) {var today = calEvent.start.format();switch (calEvent.data.type) {case 'video':$(".view-audio").hide();$(".view-picture").hide();$(".view-video").show();myPlayer.play();$("#viewModal").modal();break;case 'audio':$(".view-video").hide()$(".view-picture").hide();$(".view-audio").show();music.play();$("#viewModal").modal();break;case 'picture':$(".view-video").hide()$(".view-audio").hide();$(".view-picture").show();$('.carousel-inner').empty();var html = "";var count = 0;for (var i = 0; i < calEvent.source.events.length; i++) {var type = calEvent.source.events[i].data.type;var currentDay = calEvent.source.events[i].start.format();if (type == 'picture' && today == currentDay) {if (count == 0) {html += '<div class="item active"><img src="'+ calEvent.source.events[i].data.img_url+ '"></div>';} else {html += '<div class="item"><img src="'+ calEvent.source.events[i].data.img_url+ '"></div>';}count++;}}if (count == 1) {$('.carousel-control').hide()} else {$('.carousel-control').show()}$('.carousel-inner').append(html)$("#viewModal").modal();$('#myCarousel').carousel({pause : true,interval : false});break;case 'course':$(this).attr('target', '_blank')break;case 'other':break;}}});$(".body-left .file-list").each(function(index) {var fileName = $(this).find('.fileName').text();var dataType = $(this).find('.fileName').attr('data-type');if (!dataType)return;var eventData = {title : fileName,start : datetimepicker,backgroundColor : 'transparent',textColor : '#03A9F4',borderColor : '#fff',seq: Math.round(Math.random() * 9 + 1)}switch (dataType) {case 'video':eventData.className = 'icon-video-sm';eventData.data = {type : 'video'};break;case 'audio':eventData.className = 'icon-audio-sm';// 这⾥可以设置此action的样式, eventData.data = {type : 'audio'};break;case 'picture':eventData.className = 'icon-picture-sm';// 这⾥可以设置此action的样式, eventData.data = {type : 'picture',img_url : '/resources/img/myCalendar/'+ Math.round(Math.random() * 5 + 1) + '.png'};break;case 'course':eventData.className = 'icon-course-sm';// 这⾥可以设置此action的样式, eventData.data = {type : 'course'};eventData.url = '';break;case 'other':eventData.className = 'icon-other-sm';// 这⾥可以设置此action的样式, eventData.data = {type : 'other'};break;}$('#calendar').fullCalendar('renderEvent', eventData, true);})。

FullCalendar日历插件说明文档普通显示设置属性描述默认值header 设置日历头部信息。

如果设置为false，则不显示头部信息。

包括left，center,right左中右三个位置，每个位置都可以对应以下不同的配置：title: 显示当前月份/周/日信息prev: 用于切换到上一月/周/日视图的按钮next: 用于切换到下一月/周/日视图的按钮prevYear：用于切换到上一年视图的按钮nextYear：用于切换到下一年视图的按钮{left:'title',center: '',right:'todayprev,next'}theme 是否允许使用jquery的ui主题，如果设置为true，则需要加载jquery ui相关css和js文件。

查看演示falsebuttonIcons 设置header中使用的prev, next等变量对应按钮的样式，只有当theme为true时才有效，如果你调用了jQuery ui样式但又不想使用它的图标样式，可以将此属性设置为false{ prev:'circle-triangle-w', next:'circle-triangle-e' }firstDay 设置一周中显示的第一天是哪天，周日是0，周一是1，类推。

isRTL 设置为ture时则日历从右往左显示，貌似是针对阿拉伯人设计的。

falseweekends 是否显示周末，设为false则不显示周六和周日。

truehiddenDays 隐藏一周中的某一天或某几天，数组形式，如隐藏周二和周五：[2,5]，默认不隐藏，除非weekends设置为false。

[]weekMode 在月视图里显示周的模式，因为每月周数可能不同，所以月视图高度不一定。

fixed：固定显示6周高，日历高度保持不变liquid：不固定周数，高度随周数变化variable：不固定周数，但高度固定'fixed'weekNumbers 是否在日历中显示周次(一年中的第几周)，如果设置为true，则会在月视图的false左侧、周视图和日视图的左上角显示周数。

jQuery插件实战之fullcalendar开发一个完整功能的富客户端会议室预定系统生成日历主界面：以上代码将在id=calendar的div里生成一个日历，其中theme定义使用jQueryUI 来生成界面，events主要定义生成的日历项目，这里我们使用如下代码生成日历项，在实际开发过程中，我们可以在这里调用后台程序，或者使用其它方法生成数据，这里为了简单演示，我们使用js来生成需要的日历项目，代码如下：以上代码将生成一些日历项目，显示在日历中。

接下来是fullcalendar的几个方法，用来设置日历项的显示，分别是eventRender, eventAfterRender,这里几个方法可以用来生成日历项的内容，具体如下：以上定义了相关日历项显示方式，下面介绍日历项拖动和调整大小，代码片段如下：以上代码如果需要详细说明，请大家参考官方文档，代码细节这里不再说明。

大家可以使用下面的演示代码运行一下。

在线演示在线调试相关资料：/fullcalendar/docs/文章来源：jQuery插件实战之Fullcalendar - 开发一个完整功能的富客户端会议室预定系统前台作者：Terry li - jQuery的插件非常多，应用的场景也非常丰富，今天我这里给大家介绍一款非常实用的日历页面开发插件 - fullcalendar，目前最新版本是1.5.1，使用这款插件能够快速帮助你快速编程实现基于web的日历查看功能，大家可能都使用过outlook的日历项功能，能方便的查看待办事项或者约会。

开发过程快速方便。

文档也非常全。

在过去开发中，我曾经使用这个插件开发了公司内部的会议室预定系统，这里我简单的介绍一下fullcalendar的相关开发，并且实例讲解一下如何使用这个插件开发日历，其中会使用到fullcalendar里相关的高级功能，例如，拖拽修改时间，生成个性化的日历项内容。

以上代码都是实际项目中使用的前台，大家如果需要可以直接修改使用。