陈伟东廊坊师范学院6期信息技术提高班_H5之家 - 中国HTML5教程资源分享第一站

jQuery Frontier Calendar是一个可灵活定制的月日历jQuery插件，同时利用了jquery.qtip和colorpicker.js。它看起来类似于Google Calendar。当在一个日期单元格中有比较多的待办事项时，将出现一个更多的链接，点击这个链接会弹一个jQuery模式对话框来显示所有的事务。这个日历还支持通过CSS文件改变整个日历的背景。

其使用较为方便，首先引入其所需要的各类资源，而后像jQplot一样调用一个接口（jFrontierCal）设置显示数据和回调函数等处理方法。其调用格式如下所示：

var jfcalplugin = $('selector').jFrontierCal(date,dayClickCallback,agendaClickCallback,agendaDropCallback,dragAndDropEnabled)

参数说明见下表：

ParameterTypeDescription

datejavascript Date objectA Date object with the year and month you want the calendar initialized to. Remember that with javascript Dates the months start at 0 (Januaray=0)

dayClickCallbackfunctionA function that is triggered when a day cell is clicked. This is where you can create your customized add event form.

agendaClickCallbackfunctionA function that is triggered when an agenda item is clicked. This is where you can create your customized delete/edit agenda item form.

agendaDropCallbackfunctionA function that is called when an agenda item is dropped into a day cell. Here is where you could for example perform an AJAX call to update your database.

dragAndDropEnabledbooleanTrue to enable drag-and-drop, false to disable.

详细信息参见官网：

简单实例（展现当月的所有日期，点击某日进行相应提示）如下所示

<%@page contentType="text/html; charset=UTF-8" language="java" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Frontier JQuery Calendar</title> <link rel="stylesheet" type="text/css" href=http://blog.csdn.net/dongzi87/article/details/"css/frontierCalendar/jquery-frontier-cal-1.3.2.css" />  <link rel="stylesheet" type="text/css" href=http://blog.csdn.net/dongzi87/article/details/"css/colorpicker/colorpicker.css" /> <link rel="stylesheet" type="text/css" href=http://blog.csdn.net/dongzi87/article/details/"css/jquery-ui/smoothness/jquery-ui-1.8.1.custom.css" /> <script type="text/javascript" src=http://blog.csdn.net/dongzi87/article/details/"js/jquery-core/jquery-1.4.2-ie-fix.min.js"></script> <script type="text/javascript" src=http://blog.csdn.net/dongzi87/article/details/"js/jquery-ui/smoothness/jquery-ui-1.8.1.custom.min.js"></script>  <script type="text/javascript" src=http://blog.csdn.net/dongzi87/article/details/"js/colorpicker/colorpicker.js"></script>  <script type="text/javascript" src=http://blog.csdn.net/dongzi87/article/details/"js/jquery-qtip-1.0.0-rc3140944/jquery.qtip-1.0.js"></script>  <script type="text/javascript" src=http://blog.csdn.net/dongzi87/article/details/"js/lib/jshashtable-2.1.js"></script> <script type="text/javascript" src=http://blog.csdn.net/dongzi87/article/details/"js/frontierCalendar/jquery-frontier-cal-1.3.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ /** * Initialize with current year and date. Returns reference to plugin object. */ var jfcalplugin = $("#mycal").jFrontierCal({ date: new Date(), dayClickCallback: myDayClickHandler, agendaClickCallback: myAgendaClickHandler, agendaDropCallback: myAgendaDropHandler, dragAndDropEnabled: true }).data("plugin"); /** * Get the date (Date object) of the day that was clicked from the event object */ function myDayClickHandler(eventObj){ var date = eventObj.data.calDayDate; alert("You clicked day " + date.toDateString()); }; /** * Get the agenda item that was clicked. */ function myAgendaClickHandler (eventObj){ var agendaId = eventObj.data.agendaId; var agendaItem = jfcalplugin.getAgendaItemById("#mycal",agendaId); }; /** * get the agenda item that was dropped. It's start and end dates will be updated. */ function myAgendaDropHandler(eventObj){ var agendaId = eventObj.data.agendaId; var date = eventObj.data.calDayDate; var agendaItem = jfcalplugin.getAgendaItemById("#mycal",agendaId); alert("You dropped agenda item " + agendaItem.title + " onto " + date.toString() + ". Here is where you can make an AJAX call to update your database."); }; }); </script> <body> <form> <div > <h1 style="font-size: 30px; font-weight: bold;">jQuery Frontier Calendar</h1> <div id="mycal" title="View Agenda Item"> </div> </div> </form> </body> </html>

陈伟东 廊坊师范学院6期信息技术提高班

陈伟东廊坊师范学院6期信息技术提高班