fulljava calender 月周视图

在 SegmentFault,学习技能、解决问题
每个月,我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助,内容完整,我也想知道答案
问题没有实际价值,缺少关键内容,没有改进余地
默认效果是如下的样子:
可是如何设置成如下的样子呢?
答案对人有帮助,有参考价值
答案没帮助,是错误的答案,答非所问
我的周视图的标题格式是这样的,可是我想把他改成你那样XXXX年XX月xx日-xxxx年xx月xx日的形式,请问怎么改呢?
答案对人有帮助,有参考价值
答案没帮助,是错误的答案,答非所问
同问,周视图模式下,左侧的时间可否自定义,例如:8:00-8:30 8:40-9:10 这种
答案对人有帮助,有参考价值
答案没帮助,是错误的答案,答非所问
你这个实现了,,能说下思路吗? fullcalendar 周视图左侧时间显示的设置问题
该答案已被忽略,原因:
同步到新浪微博
分享到微博?
关闭理由:
删除理由:
忽略理由:
推广(招聘、广告、SEO 等)方面的内容
与已有问题重复(请编辑该提问指向已有相同问题)
答非所问,不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因(请补充说明)
我要该,理由是:
在 SegmentFault,学习技能、解决问题
每个月,我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。编程是艺术,代码是音符
FullCalendar如何实现minTime,slotDuration动态更新
最近在使用jQuery插件FullCalendar实现一个患者预约医生看病的功能,大致需求如下:
医生首先以周为单位设置自己下个月的出诊时间,包括上班时间,下班时间,每次可预约的时间间隔
患者通过在线预约系统,选择医生的出诊时间并预约
医生可查看自己的预约安排,了解病人的预约情况,使用FullCalendar插件实现效果如下图:
那么现在问题来了,如果医生不同的周或不同月上下班的时间不一样,我们跳转到别的周后,左边的时间轴是否也要跟着改变,遗憾的是FullCalendar 没有提供这个功能,除非你调用destroy方法,然后重新初始化calendar:
$('#mycalendar').fullCalendar('destroy');
$('#mycalendar').fullCalendar(calendarOptions);
但是,这样做的结果是日历记录的信息都会初始化,也就是默认时间又会从当前周开始,这样你就永远没法跳转到下一周去。
此时想起插件本身是支持在'month,agendaWeek,agendaDay' 几种视图之间切换的,而且在视图切换的过程中不会丢失保存的信息,由于需求不需要,我把切换视图的功能给隐藏了,那么我是否可以模拟一种视图的切换呢,即把日期的跳转看做是从agendaWeek 视图切换到agendaWeek视图。
通过查看FullCalendar的源码,并参考网友的意见,发现这一思路是可行的,通过修改FullCalendar源码的以下几处地方,完美实现了需求。记录如下:
模拟插件自带的t.changeView=changeV
新增一个refreshView方法,
首先,增加一行:
't.refreshView = ;'
实现refreshView方法:模拟changeView方法调用_changeView(newView),只是把newView指定为当前的view类型,新增如下:
function ()
_(currentView.name);
3.通过option()方法传入参数,然后调用refreshView方法,修改option方法如下:
function option(name,value) {
if (value=== undefined) {
returnoptions[name];
if (name== 'height' || name == 'contentHeight' || name == 'aspectRatio') {
options[name]=
updateSize();
// -------------add by rcm on
begin------
if (name== 'slotDuration' || name == 'minTime' || name == 'maxTime')
options[name]=
refreshView();
// -------------add by rcm on
events: function(start, end,timezone, callback) {
可以如下调用:
$calendar.fullCalendar('option', 'minTime',data.beginBusiness);
$calendar.fullCalendar('option', 'maxTime',data.endBusiness);
$calendar.fullCalendar('option', 'slotDuration',data.slotDuration);
本人使用的FullCalendar版本是:FullCalendar v2.0.0
其他版本请自行研究,供参考,希望可以帮到你!
我的fullcalendar3.0笔记
第四课 如何开发一个万年历---上篇
fullCalendar超帅的无刷新响应式日历演示
fullCalendar中文api
fullcalendar简单问题解决方案
jquery日历插件FullCalendar使用技巧
asp.net jQuery日历插件fullcalendar详解
最流行的日程编辑控件FullCalendar精华摘要
FullCalendar: 动态获取数据
fullcalendar 属性修改General Display
没有更多推荐了,专注出辉煌!
fullCalendar:中文API
FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalendar的常用属性和方法、回调函数等整理成中文文档,以供参阅。当前版本1.6.4。
普通显示设置
设置日历头部信息。
如果设置为false,则不显示头部信息。包括left,center,right左中右三个位置,每个位置都可以对应以下不同的配置:
title: 显示当前月份/周/日信息
prev: 用于切换到上一月/周/日视图的按钮
next: 用于切换到下一月/周/日视图的按钮
prevYear:用于切换到上一年视图的按钮
nextYear:用于切换到下一年视图的按钮
left: 'title',
center: '',
right: 'today prev,next'
是否允许使用jquery的ui主题,如果设置为true,则需要加载jquery ui相关css和js文件。
buttonIcons
设置header中使用的prev, next等变量对应按钮的样式,只有当theme为true时才有效,如果你调用了jQuery ui样式但又不想使用它的图标样式,可以将此属性设置为false
{ prev: 'circle-triangle-w', next: 'circle-triangle-e' }
设置一周中显示的第一天是哪天,周日是0,周一是1,类推。
设置为ture时则日历从右往左显示,貌似是针对阿拉伯人设计的。
是否显示周末,设为false则不显示周六和周日。
hiddenDays
隐藏一周中的某一天或某几天,数组形式,如隐藏周二和周五:[2,5],默认不隐藏,除非weekends设置为false。
在月视图里显示周的模式,因为每月周数可能不同,所以月视图高度不一定。
fixed:固定显示6周高,日历高度保持不变
liquid:不固定周数,高度随周数变化
variable:不固定周数,但高度固定
weekNumbers
是否在日历中显示周次(一年中的第几周),如果设置为true,则会在月视图的左侧、周视图和日视图的左上角显示周数。
weekNumberCalculation
周次的显示格式。
设置日历的高度,包括header日历头部,默认未设置,高度根据aspectRatio值自适应。
contentHeight
设置日历主体内容的高度,不包括header部分,默认未设置,高度根据aspectRatio值自适应。
aspectRatio
设置日历单元格宽度与高度的比例。
handleWindowResize
是否随浏览器窗口大小变化而自动变化。
windowResize
callback,当浏览器窗口变化时触发function,使用:
$('#calendar').fullCalendar({
windowResize: function(view) {
alert('The calendar has adjusted to a window resize');
method,绑定日历到id上。
$('#id').fullCalendar('render');
method,销毁id日历,把日历回复到初始化前状态。
$('#id').fullCalendar('destroy');
FullCalendar提供五种可用视图,包括month(月视图),basicWeek(基本周视图,左侧不显示具体时间),basicDay(基本日视图,左侧不显示具体时间),agendaWeek(周视图),agendaDay(日视图)。
View视图对象的属性:
包括month,basicWeek,basicDay,agendaWeek,agendaDay
标题内容(例如"2013年9月" or "Sep 7 - 13 2013")
Date类型, 该view下的第一天
Date类型, 该view下的最后一天. 由于是一个闭合的值, 所以, 比如在month view下, 10月这个月份, 那么end对应的应该是11月的第一天
Date类型. 在该view下第一个可以访问的day. month view下, 该值是当月的第一天, week view下, 则通常和start一致
Date类型, 最后一个可访问的day
View其他属性和方法
defaultView
日历初始化时默认视图
method,取得视图对象信息,如获取当前视图的标题内容:
var view = $('#calendar').fullCalendar('getView'); alert("The view's title is " + view.title);
changeView
method,切换视图
.fullCalendar('changeView',viewName)
viewName为5种视图中的一种
以下选项设置适用于agendaWeek和agendaDay视图里。
allDaySlot
在agenda视图模式下,是否在日历上方显示all-day(全天)
allDayText
定义日历上方显示全天信息的文本
axisFormat
设置日历agenda视图下左侧的时间显示格式,默认显示如:5:30pm
'h(:mm)tt'
slotMinutes
在agenda的视图中, 两个时间之间的间隔(分钟)
defaultEventMinutes
事件默认的时间执行长度,如果事件对象没有指定执行多长时间,则默认执行两个小时
当切换到agenda时,初始滚动条滚动到的时间位置,默认在6点钟的位置
设置显示的时间从几点开始
设置显示的时间从几天结束
slotEventOverlap
设置视图中的事件显示是否可以重叠覆盖
当前日期设置
设置日历年份,必须为4位如:2013,如果不设置则默认为当前年份
设置初始化日历的月份,从0开始,如果年份和月份都未指定,则从一月开始。
设置日历初始化时的日期,只有在周视图和日视图中有效
method,进入到上一月(周、天)视图
$('#calendar').fullCalendar('prev');
method,进入到下一月(周、天)视图
$('#calendar').fullCalendar('next');
method,进入上一年视图
method,进入下一年视图
method,进入当天
method,指定进入日历中的某一天
$('#calendar').fullCalendar( 'gotoDate', year [, month, [ date ]] )
incrementDate
method, 以当前时间为轴, 将日历向前, 或向后移动指定长度的时间, 比如: $('#calendar').fullCalendar(‘incrementDate’, -3, 2, -5)就表示将日历年份向前移动3年, 月份向后移动2月, day(天数)向前移动5天。
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']
星期全称,默认:['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
dayNamesShort
星期名称简写,默认:['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
weekNumberTitle
周次,即一年中的第几周
鼠标单击和滑过
以下列出的是当鼠标单击或者滑过日历中的某个元素时,回调的函数callback。
当单击日历中的某一天时,触发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
是否允许用户通过单击或拖动选择日历中的对象,包括天和时间。
selectHelper
当点击或拖动选择时间时,显示默认加载的提示信息,该属性只在周/天视图里可用。
unselectAuto
当点击页面日历以外的位置时,是否自动取消当前的选中状态。
unselectCancel
指定哪些元素不会清空当前的选中,以JQUERY选择器的方式指定 '#someId'。
callback,被选中的函数回调,使用方法:
function( startDate, endDate, allDay, jsEvent, view )
startDate:被选中区域的开始时间
endDate:被选中区域的结束时间
allDay:是否为全天事件
startDate:jascript对象
startDate:当前视图对象
callback,选中被取消时的回调,使用方法:
function( view, jsEvent )
method,选中某个时间,使用方法:
$('#calendar').fullCalendar( 'select', startDate, endDate, allDay )
method,取消选中,使用方法:
$('#calendar').fullCalendar( 'unselect' )
日程事件数据
FullCalendar最重要的部分,设置用于日程事件相关信息。
Event Object,事件对象,用来存储一个日历事件信息的标准对象,只有title和start是必须的
可选,事件唯一标识,重复的事件具有相同的id
必须,事件在日历上显示的title
可选,true or false,是否是全天事件。
必须,事件的开始时间。
可选,结束时间。
可选,当指定后,事件被点击将打开对应url。
指定事件的样式。
事件是否可编辑,可编辑是指可以移动, 改变大小等。
指向次event的eventsource对象。
背景和边框颜色。
backgroundColor
背景颜色。
borderColor
边框颜色。
文本颜色。
事件源对象
事件源即日历中的数据来源,FullCalendar提供了数组、函数调用、以及JSON数据的形式,当然也可以通过Google Calendar feed获取数据接口。helloweba.com后面会有文章专门介绍事件数据的操作,包括数据的查询、写入、更新和删除操作。
以下是Event事件相关的参数属性说明。
eventSources
事件源,存储数组对象,可以是Arrays/Functions/URLs。
allDayDefault
是否为全天日程事件,显示这一天中所做的事情。
ignoreTimezone
是否忽略时区。
startParam
在使用URL方式获取events数据源的时候, 自动插入到URL中的参数, 表示当前需要抓取的日程事件的起始时间。
和startParam参数意义相同, 表示要抓取的日程事件的终止时间。
lazyFetching
是否从缓存信息获取event。比如从月视图切换到周视图。
eventDataTransform
callback,将外部数据源转换成Fullcalendar可以处理的数据
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,重新渲染所有事件。
日程事件拖动和缩放
拖动和缩放功能依赖于jQuery ui的draggable和resizable,所以在使用时要提前加载相关插件。
是否可编辑,即进行可拖动和缩放操作。
eventStartEditable
是否让事件在开始时就可以拖动。
dragRevertDuration
如果拖拽不成功,多久回复原状,毫秒
dragOpacity
拖动时候的不透明度。
agenda:.5 //对于agenda试图
'':1.0 //其他视图
eventDragStart,
eventDragStop
callback,日程事件被拖动之前和之后触发。这里的拖动不一定是一个有效的拖动,只要日程事件的控件被拖着动了,事件就触发。 可以从该对象中获取位移,位置等数据。用法: function( event, jsEvent, ui, view ) { }
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 ] )
解析日期,将一个字符串格式成一个javascript的Date对象,这个string可以是ISO8601,IETF,UNIX时间戳三种格式。用法:
$.fullCalendar.parseDate( string )
parseISO8601
将一个ISO8601字符串转换成一个javascript 的Date对象。用法:
$.fullCalendar.parseISO8601( string [,ignoreTimezone ] )
参考文献:
官方文档:http://arshaw.com/fullcalendar/docs/
FullCalendar 官方文档翻:http://www.cnblogs.com/mycoding/archive//2052152.html
fullCalendar:中文API: http://blog.sina.com.cn/s/blog_012c5f.html
=====================================分割线=======================================
1.与google日历连接,别忘记加入&script type='text/javascript' src='js/gcal.js'/&
events: $.fullCalendar.gcalFeed
("http://www.google.com/calendar/feeds//private-660ae86cc26345cffeea4bb/basic",
className:'gcal-event',
editable:true,
currentTimezone:'Asia/Shanghai'
2.表头信息
agenda带有具体的时间格子
month,basicWeek,basicDay,agendaWeek,agendaDay 是5种不同的视图
空格和,的区别
'month,basicWeek,basicDay,agendaWeek,agendaDay',
center: 'title',
'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:true
buttonText:{
prevYear: '去年',
nextYear: '明年',
5.每周的第一天是哪天
Sunday=0, Monday=1, Tuesday=2, etc.
firstDay:1
6.日期从右向左显示...不知道什么时候会这么用
isRTL:false
7.是否显示周末
weekends:true
8.在月视图里显示周的模式,因为可能每月周数不同,所以月视图高度不一定,注意引号
fixed 固定显示6周高,高度永远保持不变
liquid 不固定周数,周高度可变化
variable 不固定周数,但高度固定
weekMode:'fixed'
9.日历高度,包括表头
height: 850
内容高度,不包括表头
contentHeight: 600
10.单元格宽与高度的比值
注意:此属性不能与日历高度同时存在
aspectRatio: 1.35
11.切换视图的时候要执行的操作
view是一个对象,后面将说道具体的属性
viewDisplay:function(view){}
12.窗口大小变化时执行的操作
windowResize: function(view){}
13.把日历绑定到一个id的东西上
$('#id').fullCalendar('render');
14.销毁id日历
把日历回复到初始化前,删除了所有元素,时间,和初始化数据
$('#id').fullCalendar('destroy');
15.默认显示的视图,注意引号
defaultView:'month'
16.view对象的属性
name: 包括month,basicWeek,basicDay,agendaWeek,agendaDay
title: 标题内容(例如"September 2009" or "Sep 7 - 13 2009")
start:Date类型, 该view下的第一天.
end:Date类型, 该view下的最后一天.
由于是一个闭合的值, 所以, 比如在month view下, 10月这个月份, 那么end对应的应该是11月的第一天.
visStart:Date类型. 在该view下第一个可以访问的day. month view下, 该值是当月的第一天, week view下, 则通常和start一致.
visEnd: Date类型, 最后一个可访问的day
17.集中设定初始化值
可以设置的属性有 dragOpacity, titleFormat, columnFormat, and timeFormat
被应用的视图有
// month view
// basicWeek & agendaWeek views
// basicDay & agendaDay views
// agendaDay & agendaWeek views
agendaDay:
// agendaDay view
agendaWeek: // agendaWeek view
// basicWeek & basicDay views
basicWeek:
// basicWeek view
// basicDay view
// (an empty string) when no other properties match
18.取得视图对象
.fullCalendar('getView')-&View Object
var 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'
()表示整点就不显示里面的内容
支持的格式化占位符
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. dddd: 日期名称, 全名
13. M: 月份数字
14. MM: 月份数字, 两位
15. MMM: 月份名称, 缩写
16. MMMM: 月份名称, 全名
17. yy: 两位的年份
18. yyyy: 4位的年份
19. t: 上下午加 a或者p
20. tt: 上下午加am或pm
21. T: 上下午加A 或者P
22. TT: 上下午加AM或PM
23. u: ISO8601格式
24. S: 给日期加上st, nd, rd, th等后缀, 表明是第几天
每行的时间间隔
slotMinutes:10
滚动条滚动到得起始时间
firstHour: 7
每天从几点起开始显示
minTime:'7:30'
如果加上了分钟需要设置时间间隔
每天显示到几点结束
maxTime:24
maxTime:'23:10'
事件默认的时间执行长度
defaultEventMinutes: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)tt
23.指定默认的列格式
columnFormat:{
month: 'ddd',
week: 'ddd M/d', // Mon 9/7
day: 'dddd M/d'
// Monday 9/7
24.标题格式化
titleFormat:{
month: 'MMMM yyyy',
// September 2009
week: "MMM d[ yyyy]{ '&#8212;'[ MMM] d yyyy}", // Sep 7 - 13 2009
day: 'dddd, MMM d, yyyy'
// 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);
alert('Clicked on the slot: ' + date);
alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
alert('Current view: ' + view.name);
// change the day's background color just for fun
$(this).css('background-color', 'red');
fullCalendar超帅的无刷新响应式日历演示
fullcalendar简单使用
fullcalendar做的设置上班和休息
FullCalendar中文帮助文档
使用FullCalendar做一个自己的日程管理(一)- 基础篇
jQuery.fullCalendar官方文档翻译(转)
fullCalendar中文api
FullCalendar控件的使用
没有更多推荐了,}

我要回帖

更多关于 calender输入方法 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信