jQuery Frontier Calendar是一個可靈活定製的月日曆jQuery插件，同時利用了jquery.qtip和colorpicker.js。它看起來類似於Google Calendar。當在一個日期單元格中有比較多的待辦事項 時，將出現一個更多的鏈接，點擊這個鏈接會彈一個jQuery模式對話框來顯示所有的事務。這個日曆還支持通過CSS文件改變整個日曆的背景。
其使用較爲方便，首先引入其所需要的各類資源，而後像jQplot一樣調用一個接口（jFrontierCal）設置顯示數據和回調函數等處理方法。其調用格式如下所示：
var jfcalplugin = $('selector').jFrontierCal(date,dayClickCallback,agendaClickCallback,agendaDropCallback,dragAndDropEnabled)
參數說明見下表：
| Parameter | Type | Description |
|---|---|---|
| date | javascript Date object | A 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) |
| dayClickCallback | function | A function that is triggered when a day cell is clicked. This is where you can create your customized add event form. |
| agendaClickCallback | function | A function that is triggered when an agenda item is clicked. This is where you can create your customized delete/edit agenda item form. |
| agendaDropCallback | function | A 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. |
| dragAndDropEnabled | boolean | True to enable drag-and-drop, false to disable. |
詳細信息參見官網：http://code.google.com/p/jquery-frontier-calendar/
簡單實例（展現當月的所有日期，點擊某日進行相應提示）如下所示
<%@page contentType="text/html; charset=UTF-8" language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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="css/frontierCalendar/jquery-frontier-cal-1.3.2.css" />
<!-- Include CSS for color picker plugin (Not required for calendar plugin. Used for example.) -->
<link rel="stylesheet" type="text/css" href="css/colorpicker/colorpicker.css" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui/smoothness/jquery-ui-1.8.1.custom.css" />
<script type="text/javascript" src="js/jquery-core/jquery-1.4.2-ie-fix.min.js"></script>
<script type="text/javascript" src="js/jquery-ui/smoothness/jquery-ui-1.8.1.custom.min.js"></script>
<!-- Include color picker plugin (Not required for calendar plugin. Used for example.) -->
<script type="text/javascript" src="js/colorpicker/colorpicker.js"></script>
<!-- Include jquery tooltip plugin (Not required for calendar plugin. Used for example.) -->
<script type="text/javascript" src="js/jquery-qtip-1.0.0-rc3140944/jquery.qtip-1.0.js"></script>
<!--
** jshashtable-2.1.js MUST BE INCLUDED BEFORE THE FRONTIER CALENDAR PLUGIN. **
-->
<script type="text/javascript" src="js/lib/jshashtable-2.1.js"></script>
<script type="text/javascript" src="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>
