Web日程管理FullCalendar

最新推荐文章于 2024-03-08 15:38:36 发布

猪脚踏浪

最新推荐文章于 2024-03-08 15:38:36 发布

阅读量2.0k

点赞数 3

分类专栏： javascript

本文链接：https://blog.csdn.net/zsg88/article/details/69526264

版权

javascript 专栏收录该内容

47 篇文章 1 订阅

订阅专栏

FullCalendar是一款jQuery日程管理控件，官网下载地址http://fullcalendar.io/download，目前最新版本是3.3.1。

第一步就是在需要调用FullCalendar日历的页面中载入必要的javascript和css文件，包括jQuery库文件，FullCalendar插件以及FullCalendar样式表。如果您还想要拖动日历的功能，就还需要加入jQuery ui插件。

<link rel="stylesheet" type="text/css" href="css/fullcalendar.css"> 
<script src="js/jquery-1.9.1.min.js"></script> 
<script src="js/jquery-ui-1.10.2.custom.min.js"></script> 
<script src="js/fullcalendar.min.js"></script>

在页面的body里加入div#calendar，用来放置日历主体。

只要调用$('#calendar').fullcalendar(options)即可初始化，初始化配置中events、eventSources、select和eventClick是必须设置项。

events和eventSources是数据源配置项，存储数组对象，可以是Arrays/Functions/URLs。

$('#calendar').fullCalendar({  
    events: {  
        url: 'http://<数据源路径>',  
        type: 'post'  
    }  
});

eventSources和events类似，不过eventSources用于多个数据源的情况，是events数组

$('#calendar').fullCalendar({  
    eventSources: [  
        '/feed1.jsp',  
        '/feed2.jsp'  
    ]  
});

select是时间段选择事件，当选择某个时间段时触发，用于新建日程。

eventClick是日程点击事件，当某个日程被点击是触发，用户查看或者更新日程。

header:设置日历头部信息

头部信息包括left、center、right三个位置，分别对应头部左边、头部中间和头部右边。
头部信息每个位置可以对应以下配置：
title: 显示当前月份/周/日信息
prev: 用于切换到上一月/周/日视图的按钮
next: 用于切换到下一月/周/日视图的按钮
prevYear: 用于切换到上一年视图的按钮
nextYear: 用于切换到下一年视图的按钮
如果不想显示头部信息，可以设置header为false

header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
}

loading: function(isLoading, view)…..日历开始加载的时候, isLoading参数为true触发一次, 日历加载完毕, isLoading参数为false触发一次.

eventDrop: function(calEvent, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) 在一个日程事件被移动, 并成功移动到另外一个日期/时间.

1. dayDelta: 保存了这次拖动导致该日程事件移动了多少天, 向前为正数, 向后为负数.
2. minuteDelta: 保存了这次拖动导致该日程事件移动了多少分钟, 向前为正数, 向后为负数. 该值只有在agenda view下有效.
3. allDay: 如果在month view下移动, 或在agenda view下移动到all-day区域, 则allDay为true, 移动到agenda view的其他区域则为false
4. revertFunc: 调用该方法, 可以将刚才的拖动恢复到原状. 这个方法多用于ajax的提交, 移动之后, 提交数据到后台, 如果后台更新失败, 根据返回消息, 调用这个方法, 可以使页面回复原状.
5. eventResizeStart, eventResizeStop: function(calEvent, jsEvent, ui, view): 在一个日程事件改变大小之前之后发生(不一定要改变成功.) calEvent保存了日程事件信息(date, title, 等等)
6. eventResize: function(calEvent, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view): 在日程事件改变大小并成功后调用, 参数和eventDrop参数用法一致.

/*
 添加日程事件
 start: 被选中区域的开始时间
 end: 被选中区域的结束时间
 jsEvent: jascript对象
 view: 当前视图对象
*/
select: function (start, end, jsEvent, view) {...}

eventClick,eventMouseover, eventMouseout: function(calEvent, jsEvent, view): 日程事件被点击, 鼠标划过, 鼠标离开的事件. 参数和上面介绍过的同名参数一致. 这里的eventClick事件如果返回false, 可以阻止浏览器跳转到对应日程事件在初始配置时指定的url地址. 这种事件的阻止传播可以参照DHTML文档关于事件的传播和原始响应.

日程事件数据

FullCalendar最重要的部分，设置用于日程事件相关信息。

Event Object，事件对象，用来存储一个日历事件信息的标准对象，只有title和start是必须的

属性	描述
id	可选，事件唯一标识，重复的事件具有相同的id
title	必须，事件在日历上显示的title
allDay	可选，true or false，是否是全天事件。
start	必须，事件的开始时间。
end	可选，结束时间。
url	可选，当指定后，事件被点击将打开对应url。
className	指定事件的样式。
editable	事件是否可编辑，可编辑是指可以移动, 改变大小等。
source	指向次event的eventsource对象。
color	背景和边框颜色。
backgroundColor	背景颜色。
borderColor	边框颜色。
textColor	文本颜色。