FullCalendar日历插件文档
属性
|
描述
|
默认值
|
header
|
设置日历头部信息。
如果设置为false,则不显示头部信息。包括left,center,right左中右三个位置,每个位置都可以对应以下不同的配置:
title: 显示当前月份/周/日信息
prev: 用于切换到上一月/周/日视图的按钮
next: 用于切换到下一月/周/日视图的按钮
prevYear:用于切换到上一年视图的按钮
nextYear:用于切换到下一年视图的按钮
|
{
left: 'title',
center: '',
right: 'today prev,next'
}
|
theme
|
是否允许使用jquery的ui主题,如果设置为true,则需要加载jquery ui相关css和js文件。 查看演示
|
false
|
buttonIcons
|
设置header中使用的prev, next等变量对应按钮的样式,只有当theme为true时才有效,如果你调用了jQuery ui样式但又不想使用它的图标样式,可以将此属性设置为false
|
{ prev: 'circle-triangle-w', next: 'circle-triangle-e' }
|
firstDay
|
设置一周中显示的第一天是哪天,周日是0,周一是1,类推。
|
0
|
isRTL
|
设置为ture时则日历从右往左显示,貌似是针对阿拉伯人设计的。
|
false
|
weekends
|
是否显示周末,设为false则不显示周六和周日。
|
true
|
hiddenDays
|
隐藏一周中的某一天或某几天,数组形式,如隐藏周二和周五:[2,5],默认不隐藏,除非weekends设置为false。
|
[]
|
weekMode
|
在月视图里显示周的模式,因为每月周数可能不同,所以月视图高度不一定。
fixed:固定显示6周高,日历高度保持不变
liquid:不固定周数,高度随周数变化
variable:不固定周数,但高度固定
|
'fixed'
|
weekNumbers
|
是否在日历中显示周次(一年中的第几周),如果设置为true,则会在月视图的左侧、周视图和日视图的左上角显示周数。
|
false
|
weekNumberCalculation
|
周次的显示格式。
|
"iso"
|
height
|
设置日历的高度,包括header日历头部,默认未设置,高度根据aspectRatio值自适应。
|
|
contentHeight
|
设置日历主体内容的高度,不包括header部分,默认未设置,高度根据aspectRatio值自适应。
|
|
aspectRatio
|
设置日历单元格宽度与高度的比例。
|
1.35
|
handleWindowResize
|
是否随浏览器窗口大小变化而自动变化。
|
true
|
windowResize
|
callback,当浏览器窗口变化时触发function,使用:
$('#calendar').fullCalendar({
windowResize: function(view) {
alert('The calendar has adjusted to a window resize');
}
});
|
|
render
|
method,绑定日历到id上。
$('#id').fullCalendar('render');
|
|
destroy
|
method,销毁id日历,把日历回复到初始化前状态。
$('#id').fullCalendar('destroy');
|
属性
|
描述
|
name
|
包括month,basicWeek,basicDay,agendaWeek,agendaDay
|
title
|
标题内容(例如"2013年9月" or "Sep 7 - 13 2013")
|
start
|
Date类型, 该view下的第一天
|
end
|
Date类型, 该view下的最后一天. 由于是一个闭合的值, 所以, 比如在month view下, 10月这个月份, 那么end对应的应该是11月的第一天
|
visStart
|
Date类型. 在该view下第一个可以访问的day. month view下, 该值是当月的第一天, week view下, 则通常和start一致
|
visEnd
|
Date类型, 最后一个可访问的day
|
属性
|
描述
|
默认值
|
defaultView
|
日历初始化时默认视图
|
'month'
|
getView
|
method,取得视图对象信息,如获取当前视图的标题内容:
var view = $('#calendar').fullCalendar('getView'); alert("The view's title is " + view.title);
|
|
changeView
|
method,切换视图
.fullCalendar('changeView',viewName)
viewName为5种视图中的一种
|
属性
|
描述
|
默认值
|
allDaySlot
|
在agenda视图模式下,是否在日历上方显示all-day(全天)
|
true
|
allDayText
|
定义日历上方显示全天信息的文本
|
'all-day'
|
axisFormat
|
设置日历agenda视图下左侧的时间显示格式,默认显示如:5:30pm
|
'h(:mm)tt'
|
slotMinutes
|
在agenda的视图中, 两个时间之间的间隔(分钟)
|
30
|
defaultEventMinutes
|
事件默认的时间执行长度,如果事件对象没有指定执行多长时间,则默认执行两个小时
|
120
|
firstHour
|
当切换到agenda时,初始滚动条滚动到的时间位置,默认在6点钟的位置
|
6
|
minTime
|
设置显示的时间从几点开始
|
0
|
maxTime
|
设置显示的时间从几天结束
|
24
|
slotEventOverlap
|
设置视图中的事件显示是否可以重叠覆盖
|
true
|
属性
|
描述
|
year
|
设置日历年份,必须为4位如:2013,如果不设置则默认为当前年份
|
month
|
设置初始化日历的月份,从0开始,如果年份和月份都未指定,则从一月开始。
|
date
|
设置日历初始化时的日期,只有在周视图和日视图中有效
|
prev
|
method,进入到上一月(周、天)视图
$('#calendar').fullCalendar('prev');
|
next
|
method,进入到下一月(周、天)视图
$('#calendar').fullCalendar('next');
|
prevYear
|
method,进入上一年视图
|
nextYear
|
method,进入下一年视图
|
today
|
method,进入当天
|
gotoDate
|
method,指定进入日历中的某一天
$('#calendar').fullCalendar( 'gotoDate', year [, month, [ date ]] )
|
incrementDate
|
method, 以当前时间为轴, 将日历向前, 或向后移动指定长度的时间, 比如: $('#calendar').fullCalendar(‘incrementDate’, -3, 2, -5)就表示将日历年份向前移动3年, 月份向后移动2月, day(天数)向前移动5天。
|
getDate
|
method,返回当前日历中的日期
|
属性
|
描述
|
默认值
|
timeFormat
|
设置显示的日程事件的时间格式,如timeFormat: 'H:mm' 则显示24小时制的像10:30
|
{agenda: ‘h:mm{ - h:mm}}
|
columnFormat
|
设置显示日历每列表头信息的格式文本,默认:
{
month: 'ddd', // Mon
week: 'ddd M/d', // Mon 9/7
day: 'dddd M/d' // Monday 9/7 }
|
见描述
|
titleFormat
|
设置用于显示日历头部的文本信息,默认:
{
month: 'MMMM yyyy', // September 2013
week: "MMM d[ yyyy]{ '—'[ MMM] d yyyy}", // Sep 7 - 13 2013
day: 'dddd, MMM d, yyyy' // Tuesday, Sep 8, 2013
}
|
见描述
|
buttonText
|
设置日历头部各按钮的显示文本信息,默认:
{
prev: '‹', // ‹
next: '›', // ›
prevYear: '«', // «
nextYear: '»', // »
today: 'today',
month: 'month',
week: 'week',
day: 'day'
}
|
见描述
|
monthNames
|
月份全称,默认:
['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
|
见描述
|
monthNamesShort
|
月份名称简写,默认:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun' 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
|
见描述
|
dayNames
|
星期全称,默认:['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
|
见描述
|
dayNamesShort
|
星期名称简写,默认:['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
|
见描述
|
weekNumberTitle
|
周次,即一年中的第几周
|
"W"
|
属性
|
描述
|
dayClick
|
当单击日历中的某一天时,触发callback,用法:
$('#calendar').fullCalendar({
dayClick: function(date, allDay, jsEvent, view) {
do something...
}
});
date是点击的day的时间(如果在agenda view, 还包含时间),在月view下点击一天时,allDay是true,在agenda模式下,点击all-day的窄条时,allDay是true,点击其他的agenda view下的day则为false,jsEvent就是一个普通的javascript事件,包含的是click事件的基础信息。
|
eventClick
|
当点击日历中的某一日程(事件)时,触发此操作,用法:
$('#calendar').fullCalendar({
dayClick: function(event, jsEvent, view) {
do something...
}
});
event是日程(事件)对象,jsEvent是个javascript事件,view是当前视图对象。
|
eventMouseover
eventMouseout
|
鼠标划过和离开的事件,用法和参数同上
|
属性
|
描述
|
默认值
|
selectable
|
是否允许用户通过单击或拖动选择日历中的对象,包括天和时间。
|
false
|
selectHelper
|
当点击或拖动选择时间时,显示默认加载的提示信息,该属性只在周/天视图里可用。
|
false
|
unselectAuto
|
当点击页面日历以外的位置时,是否自动取消当前的选中状态。
|
true
|
unselectCancel
|
指定哪些元素不会清空当前的选中,以JQUERY选择器的方式指定 '#someId'。
|
''
|
select
|
callback,被选中的函数回调,使用方法:
function( startDate, endDate, allDay, jsEvent, view )
startDate:被选中区域的开始时间
endDate:被选中区域的结束时间
allDay:是否为全天事件
startDate:jascript对象
startDate:当前视图对象
|
|
unselect
|
callback,选中被取消时的回调,使用方法:
function( view, jsEvent )
|
|
select
|
method,选中某个时间,使用方法:
$('#calendar').fullCalendar( 'select', startDate, endDate, allDay )
|
|
unselect
|
method,取消选中,使用方法:
$('#calendar').fullCalendar( 'unselect' )
|
属性
|
描述
|
id
|
可选,事件唯一标识,重复的事件具有相同的id
|
title
|
必须,事件在日历上显示的title
|
allDay
|
可选,true or false,是否是全天事件。
|
start
|
必须,事件的开始时间。
|
end
|
可选,结束时间。
|
url
|
可选,当指定后,事件被点击将打开对应url。
|
className
|
指定事件的样式。
|
editable
|
事件是否可编辑,可编辑是指可以移动, 改变大小等。
|
source
|
指向次event的eventsource对象。
|
color
|
背景和边框颜色。
|
backgroundColor
|
背景颜色。
|
borderColor
|
边框颜色。
|
textColor
|
文本颜色。
|
属性
|
描述
|
默认值
|
eventSources
|
事件源,存储数组对象,可以是Arrays/Functions/URLs。
|
|
allDayDefault
|
是否为全天日程事件,显示这一天中所做的事情。
|
true
|
ignoreTimezone
|
是否忽略时区。
|
true
|
startParam
|
在使用URL方式获取events数据源的时候, 自动插入到URL中的参数, 表示当前需要抓取的日程事件的起始时间。
|
'start'
|
endParam
|
和startParam参数意义相同, 表示要抓取的日程事件的终止时间。
|
'end'
|
lazyFetching
|
是否从缓存信息获取event。比如从月视图切换到周视图。
|
true
|
eventDataTransform
|
callback,将外部数据源转换成Fullcalendar可以处理的数据
|
|
loading
|
callback,日历开始加载的时候,isLoading参数为true触发一次,日历加载完毕,isLoading参数为false触发一次,用法:
function(isLoading, view)
|
|
updateEvent
|
method,更新日历空间中的一个日程事件,如果是重复的日程事件,则都更新。用法:
$('#calendar').fullCalendar( 'updateEvent', event )
|
|
clientEvents
|
method,返回FullCalendar已经存储到客户端的CalEvents对象数组, 第二个参数和removeEvents方法的第二个参数意义相同, 只不过在过滤器中, 如果返回true, 则该CalEvent对象将被加入到返回的数组中。
|
|
removeEvents
|
method,从日历中删除一个日程事件. 第二个参数可以不填, 可以填id, 可以是一个过滤器(一个函数, 接受CalEvent对象作为参数)。用法:
$('#calendar').fullCalendar( 'removeEvents' [, idOrFilter ] )
|
|
refetchEvents
|
method,重新抓取所有的日程事件源上的日程事件并渲染它们。
|
|
addEventSource
|
method,添加一个日程事件源,添加之后, FullCalendar会马上从该源获取日程事件, 并加载到日历中。第二个参数和定义Calendar时候使用的url参数一致。
|
|
removeEventSource
|
method,移除一个日程事件源,该源上获取得到的日程时间也将被马上从日历中移除。
|
属性
|
描述
|
eventColor
eventBackgroundColor
eventBorderColor
eventTextColor
|
设置日程事件的背景色和边框色,以及文本颜色。可以使用任意支持css的颜色方式,如 #f00, #ff0000, rgb(255,0,0), or red。
|
eventRender
|
callback,当日程事件渲染时触发,用法:
function(calEvent, element, view)
|
eventAfterRender
|
callback,当日程事件被渲染后触发,用法:
function( event, element, view ) { }
|
eventDestroy
|
callback,当日程事件移出时触发,用法:
function( event, element, view ) { }
|
renderEvent
|
method,一旦日历重新取得日程源,则原有日程将消失,当指定stick为true时,日程将永久的保存到日历上。
|
rerenderEvents
|
method,重新渲染所有事件。
|
属性
|
描述
|
默认值
|
editable
|
是否可编辑,即进行可拖动和缩放操作。
|
false
|
eventStartEditable
|
是否让事件在开始时就可以拖动。
|
true
|
dragRevertDuration
|
如果拖拽不成功,多久回复原状,毫秒
|
500
|
dragOpacity
|
拖动时候的不透明度。
{
agenda:.5 //对于agenda试图
'':1.0 //其他视图
}
|
见描述
|
eventDragStart,
eventDragStop
|
callback,日程事件被拖动之前和之后触发。这里的拖动不一定是一个有效的拖动,只要日程事件的控件被拖着动了,事件就触发。 可以从该对象中获取位移,位置等数据。用法: function( event, jsEvent, ui, view ) { }
|
|
eventDrop
|
callback,当拖拽完成并且时间改变时触发,用法:
function( event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view ) { }
ayDelta 保存日程向前或者向后移动了多少天
minuteDelta 这个值只有在agenda视图有效,移动的时间
allDay 如果是月视图,或者是agenda视图的全天日程,此值为true,否则为false
|
|
eventResizeStart,
eventResizeStop
|
callback,在一个日程事件改变大小之前之后发生(不一定要改变成功),用法:
function( event, jsEvent, ui, view ) { }
|
|
eventResize
|
callback,在日程事件改变大小并成功后调用, 参数和eventDrop参数用法一致。用法:
function( event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view ) { }
|
函数
|
描述
|
formatDate
|
格式化日期,通过指定的格式格式化一个日期,返回一个字符串。options选项是一个对象,其中设置本地化变量支持的属性值. 比如{ monthNames : ['一月','二月',……],dayNames: ['周日','周一',…..]},用法:
$.fullCalendar.formatDate( date,formatString [,options ] )
|
formatDates
|
一次格式化两个日期,和上一个格式化日期类似,只不过,这里在formatString中使用大括号{…}来描述第二个日期的格式化方式。用法:
$.fullCalendar.formatDates( date1,date2,formatString [,options ] )
|
parseDate
|
解析日期,将一个字符串格式成一个javascript的Date对象,这个string可以是ISO8601,IETF,UNIX时间戳三种格式。用法:
$.fullCalendar.parseDate( string )
|
parseISO8601
|
将一个ISO8601字符串转换成一个javascript 的Date对象。用法:
$.fullCalendar.parseISO8601( string [,ignoreTimezone ] )
|
FullCalendar日历插件文档相关推荐
- Sep 15 FullCalendar日历插件说明文档
Sep 15 FullCalendar日历插件说明文档 helloweba.com 作者:月光光 时间:2013-09-15 13:53 标签: FullCalendar 日历 文档 FullCa ...
- FullCalendar 二:FullCalendar日历插件说明文档
FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalendar的常用属性和方法.回调函数等整理成中 ...
- FullCalendar日历插件说明文档
好记忆不如按烂笔头... ... 普通显示设置 属性 描述 默认值 header 设置日历头部信息. 如果设置为false,则不显示头部信息.包括left,center,right左中右三个位置,每个 ...
- FullCalendar 日历插件排班表排课表保姆级详解(可拖动排班排课)
(基于vue)实现效果 文章目录 前言 一.FullCalendar是什么? 二.使用步骤 1.引入库 2.html部分代码 3.css样式代码(样式我单独写个scss文件引入的) 4.逻辑代码部分 ...
- fullcalendar日历插件的使用并实现增删改查
我上个项目是做了一个关于教育方面的web端页面,其中的课程表就要用到fullcalendar日历插件,刚开始也是不会用,因为以前也没用过,后面也是看官方文档,问同事,最后完成了这个课程表,个人感觉fu ...
- fullcalendar日历插件的使用并动态增删改查
我上个项目是做了一个关于教育方面的web端页面,其中的课程表就要用到fullcalendar日历插件,刚开始也是不会用,因为以前也没用过,后面也是看官方文档,问同事,最后完成了这个课程表,个人感觉fu ...
- fullcalendar日历插件的使用并动态增删改查(转载)
我上个项目是做了一个关于教育方面的web端页面,其中的课程表就要用到fullcalendar日历插件,刚开始也是不会用,因为以前也没用过,后面也是看官方文档,问同事,最后完成了这个课程表,个人感觉fu ...
- java显示日历 插件_JavaWeb项目FullCalendar日历插件使用的示例代码
本文介绍了JavaWeb项目FullCalendar日历插件使用的示例代码,分享给大家,具体如下: 使用FullCalendar需要引用的文件 1.css文件 2.js文件 生成日历主界面 FullC ...
- fullcalendar php,php使用fullcalendar日历插件详解,fullcalendar日历
php使用fullcalendar日历插件详解,fullcalendar日历 最近做课程表的项目,找了好多个插件感觉都不好用,无意间看到了fullcalendar,还挺简单的,很方便,先贴一张项目页面 ...
最新文章
- 【spring】spel表达式
- 反欺诈中所用到的机器学习模型有哪些?
- python使用numpy的np.float_power函数计算numpy数组中每个数值的指定幂次(例如平方、立方)、np.power函数默认返回整数格式、np.float_power函数返回浮点数
- 如何配置MySQL?(三)
- 08--MySQL自学教程:DQL(数据库查询)字段控制查询、聚合函数、分组查询、limit(二)
- mysql 导入导出.sql文件
- c语言某一行不被优化,C语言优化小技巧
- hyper运算符_查询构造器
- ORA-01017解决方案
- R语言:多因素Cox回归森林图 (基于forestplot包) 森林图 cox可视化
- 分享大三改进后的python写的【银行管理系统】,超详细 【内附源码】
- SIP协议-01 简介与入门
- c语言英文背单词软件下载,英语背单词软件
- 惊艳CES!优必选Walker新一代迈出里程碑一步,仿人机器人进入家庭取得重大突破
- 如何获取mac虚拟机激活码 一步学会
- 层次分析法php,使用层次分析法,需要求矩阵的最大特征根入max
- 怎么用控制面板卸载软件?(简单 有图)
- 光猫+路由器如何映射端口
- java类求圆的面积周长_java编程 1. 设计一个求圆的面积和周长的类,要求:1计算当半径r,JAVA编程题。编写一个应用程序计算圆的周长和面积,设圆的半...
- 对面向对象和面向过程的理解