`

FullCalendar jQuery 相关设置

阅读更多

1.与google日历连接,别忘记加入<script type='text/javascript' src='js/gcal.js'/>

events: $.fullCalendar.gcalFeed
 ("
http://www.google.com/calendar/feeds/xuqi86@gmail.com/private-660ae86cc26345cff3430480e8eea4bb/basic",
  {
   className:'gcal-event',
   editable:true,
   currentTimezone:'Asia/Shanghai'
  }
 )

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:true

4.
buttonText:{
 prev:     '昨天',
 next:     '明天',
 prevYear: '去年',
 nextYear: '明年',
 today:    '今天',
 month:    '月',
 week:     '周',
 day:      '日'
 }

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:      // month view
    week:       // basicWeek & agendaWeek views
    day:        // basicDay & agendaDay views

    agenda:     // agendaDay & agendaWeek views
    agendaDay:  // agendaDay view
    agendaWeek: // agendaWeek view

    basic:      // basicWeek & basicDay views
    basicWeek:  // basicWeek view
    basicDay:   // 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'
()表示整点就不显示里面的内容

    支持的格式化占位符
 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. 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
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',    // Mon
    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);
        }else{
            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');

    }

当点击某一个事件时触发此操作
eventClick:function( event, jsEvent, view ) { }

eventClick: function(calEvent, jsEvent, view) {

        alert('Event: ' + calEvent.title);
        alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
        alert('View: ' + view.name);

        // 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:String
allDay: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
        }
    ]

事件Json源 events (as a json feed)
events: "/myfeed.php" 该URL返回一个json或数组的日程事件组, GET参数视startParam和endParam选项而定
当用户改变视图时触发此事件,FullCalendar 将通过GET方法传递参数来确定需要哪些日程数据
/myfeed.php?start=1262332800&end=1265011200&_=1263178646
startParam:'start' 开始参数的名字
endParam:'end' 结束参数的名字
cacheParam:'_' 缓存参数的名字
lazyFetching:true 只有当需要的时候才取得数据,先从缓存里读取数据

_参数是自动加上去的,防止读缓存内容

日程事件 events (as a function)
events:function( start, end, callback ) { }

events: function(start, end, callback) {
        $.ajax({
            url: 'myxmlfeed.php',
            dataType: 'xml',
            data: {
                // our hypothetical feed requires UNIX timestamps
                start: Math.round(start.getTime() / 1000),
                end: Math.round(end.getTime() / 1000)
            },
            success: function(doc) {

                var events = [];

                $(doc).find('event').each(function() {
                    event.push({
                        title: $(this).attr('title'),
                        start: $(this).attr('start') // will be parsed
                    });
                });

                callback(events);
            }
        });
    }

30.事件源

eventSources 存储数组对象,可以是Arrays/Functions/URLs

eventSources: [
        $.fullCalendar.gcalFeed("
http://www.google.com/feed1"),
        $.fullCalendar.gcalFeed("
http://www.google.com/feed2")
    ]

31.日程默认为全天日程
allDayDefault:true

32.当读取ajax数据时
loading:function( isLoading, view )
当开始读取的时候是true,当读取完成是false

33.改变日程事件
updateEvent:

eventClick: function(event, element) {
        event.title = "CLICKED!";
        $('#calendar').fullCalendar('updateEvent', event);

    }
日程对象可以通过回调函数被获得,比如 eventClick 或者 clientEvents的方法

34.取得客户端内存中保存的日程对象
clientEvents
.fullCalendar( 'clientEvents' [, idOrFilter ] ) -> Array 返回一个日程对象的数组
如果idOrFilter不写,则输出全部保存在客户端的日程对象数组
如果为ID ,则返回所有为此ID的对象
还可以为一个过滤function 接受一个日程对象,如果返回true,则此值包含在客户端对象组中国

35.从日历中删除日程
removeEvents 参数同上

36.重新取得日程
.fullCalendar('refetchEvents') 从所有源并且重新渲染到屏幕上

37.增加一个日程源
.fullCalendar('addEventSource',source)
源可以是Array/URL/Function ,获取的数据可以立刻显示在日历上

38.删除一个事件源
.fullCalendar('removeEventSource',source)

39.日程绑定
eventRender.function( event, element, view ) { }
event 是企图被渲染的日程对象
element 是一个新建的jQuery<div>被用来渲染的,他已经在恰当的时间被创建

eventRender 返回函数可以修改element,返回一个新的dom元素,用来替换被渲染的元素,或者返回false,禁止被渲染

40.日程渲染后事件
eventAfterRender:function( event, element, view ) { }

41.渲染事件
.fullCalendar('renderEvent',event[,stick])
通常,一旦日历重新取得日程源,则原有日程将消失,当指定stick为true时,日程将永久的保存到日历上

42.重新渲染所有事件
rerenderEvents
.fullCalendar('rerenderEvents')

43.是否可以拖拽和改变大小
editable:true

44.禁止拖拽和改变大小
disableDragging:false
disableResizing:false

45.如果拖拽不成功,多久回复原状
dragRevertDuration:500  单位是毫秒

46.拖拽不透明度
dragOpacity:{
 agenda:.5 //对于agenda试图
 '':1.0   //其他视图
}

47.需要的js包
<script type='text/javascript' src='js/ui.core.js'/>
<script type='text/javascript' src='js/ui.draggable.js'/>
<script type='text/javascript' src='js/ui.resizable.js'/>
注意顺序,要把jquery.js放到这3个包前面

48.拖拽事件引发的操作
eventDragStart:function(event,jsEvent,ui,view) { }
eventDragStop:function( event, jsEvent, ui, view ) { }

49.当拖拽完成并且时间改变
eventDrop:function( event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view ) { }

dayDelta 保存日程向前或者向后移动了多少天
minuteDelta 这个值只有在agenda视图有效,移动的时间
allDay 如果是月视图,或者是agenda视图的全天日程,此值为true,否则为false

eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {

        alert(
            event.title + " was moved " +
            dayDelta + " days and " +
            minuteDelta + " minutes."
        );

        if (allDay) {
            alert("Event is now all-day");
        }else{
            alert("Event has a time-of-day");
        }

        if (!confirm("Are you sure about this change?")) {
            revertFunc();
        }

    }

50.改变大小的事件触发的操作
eventResizeStart:function( event, jsEvent, ui, view ) { }
eventResizeStop:function( event, jsEvent, ui, view ) { }
eventResize:function( event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view ) { }

 

51.24小时制

24小时制:return a.getHours()%24||24

12小时制:return a.getHours()%12||12

 

去掉时间后的a或p

原始:{return a.getHours()<12?"a":"p"}

修改:{return a.getHours()<24?"":""}

分享到:
评论

相关推荐

    jquery的fullcalendar使用案例

    FullCalendar的可定制性极强,可以通过设置各种选项来自定义日历的外观和行为。比如,可以改变默认的日期格式、颜色主题,或者添加自定义的事件处理函数来响应用户的交互操作。此外,它还支持添加资源视图,方便管理...

    fullcalendar Jquery日历

    - `css`目录:包含用于样式设置的CSS文件,如`fullcalendar.css`。 - `images`目录:可能有用于日历的图标和其他图像资源。 - `docs`或`examples`目录:包含插件的文档和示例代码。 - `LICENSE`或`README`文件:关于...

    基于jquery的日历控件 fullcalendar 3.9.0

    **全栈Web开发中的jQuery日历插件:FullCalendar 3.9.0** FullCalendar是一款功能强大的jQuery日历插件,它可以帮助开发者轻松创建美观、实用的日历应用。在3.9.0这个版本中,它保持了其一贯的易用性和灵活性,提供...

    fullcalendar-rails, 包含Adam的gem fullcalendar jquery插件的资产.zip

    fullcalendar-rails, 包含Adam的gem fullcalendar jquery插件的资产 Fullcalendar::Rails这个 gem 用于在你的RoR应用程序中添加FullCalendar插件的内容,这样你就不用下载和安装所有的FullCalendar资产。安装要安装 ...

    FullCalendar应用——增删改数据操作

    FullCalendar是一款基于jQuery的日历插件,能够以美观的方式展示日程事件,并支持多种视图,如日视图、周视图、月视图等。它通过与后端服务器交互,获取或更新JSON格式的事件数据,实现了动态更新日历事件的功能。 ...

    FullCalendar jQuery日历插件.zip

    FullCalendar是一款广泛使用的jQuery日历插件,它能够帮助开发者在网页上创建功能丰富的互动日历。这款插件以其灵活性、可定制性和易用性而备受赞誉,支持各种事件安排、时间表显示以及多语言支持,是Web开发中的...

    日程安排:jQuery的日历插件 FullCalendar Java MySQL.doc

    1. **FullCalendar 插件**:FullCalendar 是一个基于 jQuery 的日历插件,设计用于展示和管理日程安排。它提供了一个交互式的界面,用户可以轻松查看待办事项、标记重要事件,并支持点击和拖动操作。FullCalendar 的...

    jQuery.FullCalendar相关文档

    - **配置选项**:FullCalendar接受一系列配置对象,用于定制日历的外观和行为,例如`defaultView`设置默认视图,`events`指定事件数据来源。 2. **事件数据**: - **JSON格式**:可以通过`events`选项提供JSON...

    jQuery日历插件FullCalendar

    jQuery日历插件FullCalendar是一款强大的、灵活的、易于定制的日历组件,广泛应用于网页中展示日程安排、会议时间等与日期相关的功能。它提供了丰富的API和多种视图,如日视图、周视图、月视图、Agenda视图等,使得...

    日程安排:jQuery的日历插件 FullCalendar Java MySQL

    FullCalendar是一款基于jQuery的日历插件,适用于各种日程安排、工作计划等场景,您可以很方便的查看查看待办事项,标记重要事项以及绑定点击和拖动事件,能快速的整合到您的项目中,本文将简单介绍FullCalendar的使用。...

    [jQuery之FullCalendar视频(全)].[HeyJava][selfimpr]jQuery.FullCalendar

    **jQuery之FullCalendar详解** 全栈开发者们,今天我们要探讨的是一个非常实用的JavaScript库——jQuery FullCalendar。这个强大的插件允许我们轻松地在网页上创建功能丰富的日历视图,展示事件、会议和其他时间...

    jquery.fullCalendar官方文档翻译.doc

    `jQuery.fullCalendar` 是一个流行的JavaScript库,用于在网页上展示日历视图。它能够帮助开发者轻松地创建交互式的日历应用,显示各种事件和安排。以下是对`jquery.fullCalendar`官方文档主要特性和选项的详细解释...

    vue calendar fullCalendar 无需 jquery 计划事件管理.zip

    无需 Jquery 或 fullCalendar.js。目前,它仅支持月视图。它受到 fullCalendar.io 的启发,但并非克隆。因此,请阅读下面的文档以了解所有功能。简单的现场演示安装通过 NPM@latest适用于 Vue2 0.1.11适用于 Vue1.*/...

    yii-fullcalendar:Arshaw 的 FullCalendar jQuery 插件的 Yii 扩展

    Arshaw 的 FullCalendar jQuery 插件的 Yii 扩展 作者:Alexey Samoylov ( )。 要求 PHP 5.4 Yii 1.x 例子 全局组件配置示例: 'components' =&gt; [ 'fullcalendar' =&gt; [ 'class' =&gt; 'ext.yii-fullcalendar....

    Jquery日历控件fullCalendar中将dayClick改为双击或单击事件的方法

    在JavaScript和jQuery的世界里,fullCalendar是一款非常流行的开源日历插件,它允许开发者创建功能丰富的交互式日程管理界面。在使用fullCalendar时,我们可能会遇到需要自定义用户交互行为的需求,比如将默认的“日...

    fullcalendar-2.7.3带中国节日节气

    使用FullCalendar首先需要在HTML中引入相关的CSS和JavaScript文件,然后通过JavaScript代码初始化日历并设置相关参数。例如,设置初始日期、视图类型、事件数据源等。同时,可以利用API来响应用户的交互,如点击...

    jQuery日程管理插件fullcalendar使用详解

    FullCalendar用来做日程管理功能非常强大,但是...首先是要载入jQuery库和fullcalendar插件。 [removed][removed] [removed][removed] 然后在body中,建立日历容器div#calendar。 ”calendar”&gt;&lt;/div&gt; jQuery 使

    jquery各个版本及相关插件汇总

    fullcalendar-1.4.2 jquery-1.3.2.js jquery-1.3.2.min.js jquery-1.3.2-vsdoc2.js jquery.blockUI.js jquery-ui-themes-1.7.zip ......

    fullcalendar教程

    1. 基于 jQuery:FullCalendar 基于 jQuery 库开发,利用 jQuery 的强大功能,提供了灵活的日程管理功能。 2. 丰富的配置选项:FullCalendar 提供了丰富的配置选项,允许开发者自定义日程控件的样式、布局和行为。 3...

Global site tag (gtag.js) - Google Analytics