PHP程序员站--PHP编程开发平台
 当前位置:主页 >> 网页制作 >> Javascript >> 

jQuery插件FullCalendar日程表实现

jQuery插件FullCalendar日程表实现

来源:PHP程序员站  作者:PHP程序员站  发布时间:2011-06-13
jQuery日历FullCalendar插件是一个非常不错的日历工具,可用于制作日程表或计划安排等,可扩展Google日历功能,制作个性化的日程表,同时可绑定点击事件或拖动事件,使用非常方便,效果图如下: jQuery插件FullCalendar在线实例 http://arshaw.com/fullcalendar/ 使用

jQuery日历FullCalendar插件是一个非常不错的日历工具,可用于制作日程表或计划安排等,可扩展Google日历功能,制作个性化的日程表,同时可绑定点击事件或拖动事件,使用非常方便,效果图如下:

jQuery插件FullCalendar在线实例
http://arshaw.com/fullcalendar/

使用说明
需要使用jQuery库文件和jQuery UI库文件和FullCalendar库文件
http://jquery.com/
http://plugins.jquery.com/project/fullcalendar
http://ui.jquery.com/

同进需要使用fullcalendar.css文件

使用实例
一,包含文件部分

<link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar.css' /> <script type='text/javascript' src='jquery/jquery.js'></script> <script type='text/javascript' src='jquery/ui.core.js'></script> <script type='text/javascript' src='fullcalendar/fullcalendar.js'></script>

如果需要绑定拖动事件,可增加ui.draggable.js文件

<script type='text/javascript' src='jquery/ui.draggable.js'></script>

二,HTML部分

<div id='calendar'></div>

三,Javascript部分

<script type='text/javascript'> $(document).ready(function() { var d = new Date(); var y = d.getFullYear(); var m = d.getMonth(); $('#calendar').fullCalendar({ draggable: true, events: [ { id: 1, title: "学习jQuery", start: new Date(y, m, 6, 14, 0), end: new Date(y, m, 11) }, { id: 2, title: "每天写必优博客", start: new Date(y, m, 2) }, { id: 2, title: "每天写必优博客", start: new Date(y, m, 9) }, { id: 3, title: "开会", start: new Date(y, m, 20, 9, 0) }, { id: 4, title: "查看facebook", start: new Date(y, m, 27, 16), end: new Date(y, m, 29), url: "http://facebook.com/" } ] }); }); </script>

javascript部分主要是设置日程安排,各部分如下:

var d = new Date(); var y = d.getFullYear(); var m = d.getMonth();

获取时间,使用getFullYear()和getMonth()分别获取年和月

draggable表示日程安排是否可拖动
events表示具体的日程安排,格式如下:

[{ id: 1, title: "学习jQuery", start: new Date(y, m, 6, 14, 0), end: new Date(y, m, 11) }]

注意是一个数组[],里面包含JSON数据,分别是id,title,start和end,每个ID表示一个具体的事件安排。

一,同时可支持动态Ajax加载日程安排JSON数据,具体可查看实例源代码,如下:

<script type='text/javascript'> $(document).ready(function() { $('#calendar').fullCalendar({ draggable: true, events: "json_events.php", eventDrop: function(event, delta) { alert(event.title + ' was moved ' + delta + ' days\n' + '(should probably update your database)'); }, loading: function(bool) { if (bool) $('#loading').show(); else $('#loading').hide(); } }); }); </script>

events直接调用PHP文件获取JSON数据,同时实现eventDrop和加载loading事件

二,可实现Google日历扩展,具体可查看实例源代码,如下:

<script type='text/javascript'> $(document).ready(function() { $('#calendar').fullCalendar({ events: $.fullCalendar.gcalFeed( 'http://www.google.com/calendar/feeds/', {draggable: false, className: 'mygcal'} ), eventClick: function(event) { window.open(event.url, 'gcalevent', 'width=700,height=600'); return false; }, loading: function(bool) { if (bool) $('#loading').show(); else $('#loading').hide(); } }); }); </script>

events调用$.fullCalendar.gcalFeed()方法获取google日历数据,同时实现eventClick和加载loading事件

使用jQuery插件FullCalendar日程表非常简单,只需要指定日程的具体事件,就可实现一个日程安排计划,同时可扩展Google日历功能,非常值得推荐。

FullCalendar 插件官方网址
http://arshaw.com/fullcalendar/

FullCalendar 插件在线文档说明
http://arshaw.com/fullcalendar/docs/

FullCalendar 插件中文帮组文档
http://arshaw.com/fullcalendar/docs/

FullCalendar 插件在线下载
http://wenku.baidu.com/view/88d41f0abb68a98271fefa2c.html

 


延伸阅读:
php实现农历日历的代码
php日历类
PHP Image函数实现日历功能
用div+css技术生成的日历选择器
9个实用jQuery日历插件
10个美观实用的 jQuery/Mootool 日历插件
jQuery双日历插件 jQuery Datepicker
日期选择控件 jQuery DateInput 日历插件
27个华丽丽的 Web 日历组件 亮瞎你的狗眼
17个Javascript日期选择器
FullCalendar jQuery日历插件
Tags: jQuery   插件   FullCalendar   日程表   日历  
最新文章
推荐阅读
月点击排行榜
PHP程序员站 Copyright © 2007-2010,PHPERZ.COM All Rights Reserved 粤ICP备07503606号