jQuery Frontier Calendar简介

最新推荐文章于 2024-03-10 13:46:07 发布

shierqu

最新推荐文章于 2024-03-10 13:46:07 发布

阅读量4.5k

点赞数 1

分类专栏： html/div+css/JS/Ajax/jsp/Flex

本文链接：https://blog.csdn.net/shierqu/article/details/8744466

版权

html/div+css/JS/Ajax/jsp/Flex 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

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>