Frontier JQuery Calendar

Introduction
Example
Documentation

Frontier Calendar is a full month jQuery plugin. It was designed to look like Google Calendar.

Screenshot 1

Screenshot 2

Screenshot 3: Change background image via CSS file.

Click the calendar to add some agenda items.

Please note that Chrome prevents AJAX calls from reading local files on disk so the iCal example will not work. Try in Firefox, Safari, Opera, or IE. For Chrome it should work when the iCal file is hosted online from your domain.

All form fields are required.

What?

Start Date		Start Hour		Start Minute		Start AM/PM
End Date		End Hour		End Minute		End AM/PM

Background Color

Text Color

License & Usage

Free to use. You're welcome. I claim no responsibility if it explodes in a cloud of doom.
MIT License: http://en.wikipedia.org/wiki/MIT_License

Seth Lenzi
slenzi@gmail.com

Requirements

**Important** Please read below regarding modified jQuery Core library for drag-and-drop in IE.

JQuery Core
js/jquery-core/jquery-1.4.2-ie-fix.min.js if you want drag-and-drop to work correctly in IE. Otherwise use regular jQuery Core library.
Read README-IE-FIX.TXT file in jquery-frontier-cal-x.x/js/jquery-core/ folder if you are interested in what was modified.
http://jquery.com/

JQuery UI
http://jqueryui.com

jshashtable
http://www.timdown.co.uk/jshashtable/
http://code.google.com/p/jshashtable/

Installation Instructions

Step 1: Install modified jQuery Core. This plugin should have come with a slightly modified version of the jQuery Core library in the js/jquery-core/ folder. The file name is jquery-1.4.2-ie-fix.js for the uncompressed version and jquery-1.4.2-ie-fix.min.js for the compressed version. A slight modification was need to get drag-and-drop to work correctly in Internet Explorer. If you don't care about IE than you can use an unmodified copy of jQuery Core library. If you are interested in what was modified in the core library read the README-IE-FIX.TXT file in jquery-frontier-cal-x.x/js/jquery-core/ folder. When a new version of jQuery Core is released you can make the same small modification. Only one line!

WebContent/
  |__js/
  |   |__jquery-core/  
  |         |__jquery-1.4.2-ie-fix.min.js
  |
  |__index.html

Step 2: If you don't already have the jQuery UI library you should download it from jQuery's UI web site. This consists of a javascript file and a CSS file. Add both files to your HTML document root. Javascript files should go in a folder named "js" or "javascript" and CSS files should go in a folder names "css". Note: jQuery UI with the smoothness theme is already included with this example in the css/ folder.

WebContent/
  |__js/
  |   |__jquery-core/  
  |   |     |__jquery-1.4.2-ie-fix.min.js
  |   |
  |   |__jquery-ui/
  |         |__smoothness/
  |               |__jquery-ui-1.8.1.custom.min.js
  |__css/
  |   |__jquery-ui/
  |         |__smoothness/
  |               |__jquery-ui-1.8.1.custom.css
  |__index.html

Step 3: Add the Frontier Calendar Javascript file and Frontier Calendar CSS file to your HTML document root.

WebContent/
  |__js/
  |   |__jquery-core/  
  |   |     |__jquery-1.4.2-ie-fix.min.js
  |   |
  |   |__jquery-ui/
  |   |     |__smoothness/
  |   |           |__jquery-ui-1.8.1.custom.min.js
  |   |
  |   |__frontierCalendar/  
  |         |__jquery-frontier-cal-1.3.2.min.js
  |
  |__css/
  |   |__jquery-ui/
  |   |     |__smoothness/
  |   |           |__jquery-ui-1.8.1.custom.css
  |   |
  |   |__frontierCalendar/  
  |         |__jquery-frontier-cal-1.3.2.css
  |
  |__index.html

Step 4: Add the required jshashtable-2.1.js library inlcude in the example /js/lib/ folder. http://code.google.com/p/jshashtable/
Note: This library must be inlcuded before the Frontier Calendar javascript file!

WebContent/
  |__js/
  |   |__jquery-core/  
  |   |     |__jquery-1.4.2-ie-fix.min.js
  |   |
  |   |__jquery-ui/
  |   |     |__smoothness/
  |   |           |__jquery-ui-1.8.1.custom.min.js
  |   |
  |   |__frontierCalendar/  
  |   |     |__jquery-frontier-cal-1.3.2.min.js
  |   |
  |   |__lib/
  |        |__jshashtable-2.1.js
  |
  |__css/
  |   |__jquery-ui/
  |   |     |__smoothness/
  |   |           |__jquery-ui-1.8.1.custom.css
  |   |
  |   |__frontierCalendar/  
  |         |__jquery-frontier-cal-1.3.2.css
  |
  |__index.html

Step 5: Inlcude all libraries on your html page. (Note: The colorpicker javascript file and css file are not required. This is used in the example.)

Initialize Calendar

Initialize the calendar with the current year and month using the date parameter. Provide callback functions for click events using the dayClickCallback and agendaClickCallback parameters, and drop events (drag-and-drop) via the agendaDropCallback option. dayClickCallback will be fired when users click on a day cell and agendaClickCallback will be fired when users click on an agenda item. agendaDropCallback will be fired when agenda items are dragged and then dropped into a day cell (if drag-and-drop is enabled.)

After initialization retrieve a reference to the plugin using .data("plugin"). The jfcalplugin object is the interface to the calendar and will be used later to interact with the calendar (add/edit/delete agenda items, etc.)

Constructor Signature: 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.

Example: Initialize Plugin With Current Year & Month

/**
 * 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.");
};

Calendar Sizing

By default the calendar is 100% wide and the height is calculated by aspect ratio. The day cells will be roughly the same height as they are wide (minus the height of the week headers that show the day numbers.) There are a couple ways you can control the size of the calendar.

Option 1: CSS File
In the CSS file you can change the width attribute of the .JFrontierCal element. You may use precentage widths and pixel widths.

Option 2: Aspect ratio
By default the aspect ratio is 1. This makes the day cells roughly the same height as they are wide. Using the API you can change this value. For example, you can set the aspect ratio to 0.5 to make the day cells half as tall as they are wide resulting in a calendar that is much wider than it is tall. The aspect ratio value must be less that or equal to 1, and greater than 0. A value of 0.75 makes the day cells 3/4th as tall as they are wide, and a value of 0.25 makes the day cells 1/4th tall as they are wide.

To change the aspect ratio use the jfcalplugin.setAspectRatio() method.

Method Signature: setAspectRatio(calId,ratio)

Parameter	Type	Description
calId	String	The ID of the calendar div element.
ratio	Float	A value less than or equal to 1 and greater than 0.

Example: Set Aspect Ratio

<!--
jfcalplugin object is reference to calendar plugin. See initialization example above on how to obtain reference to plugin object.
-->
jfcalplugin.setAspectRatio("#mycal",0.75);

Drag And Drop

Drag-and-drop works in Chrome, Firefox, Safari, and Opera. If you want IE than you have to use the inlcuded modified jQuery Core file (jquery-1.4.2-ie-fix.min.js). Please read the txt file at query-frontier-cal-x.x/js/jquery-core/README-IE-FIX.TXT for more information.

Drag-and-drop is enabled by default. To turn it off pass false for the dragAndDropEnabled when you initialize the calendar.

There are a few callback functions, agendaDragStartCallback & agendaDragStopCallback, that are fired when dragging starts and stops on agenda items. These callbacks are defined in the calendar initialization method.

When an agenda item is dragged but NOT dropped into another day cell it will revert back to it's start position. When it reverts the applyAgendaTooltip(divElm,agendaItem) will be called again. When dragging starts you can destroy any tooltip you applied, when reverted it will be applied again.

Method Signature: agendaDragStartCallback(eventObj,divElm,agendaItem)

Parameter	Type	Description
eventObj	jQuery event object	The event object for the drag event.
divElm	jQuery object	The div element for the agenda item.
agendaItem	javascript object	The agenda item data

Method Signature: agendaDragStopCallback(eventObj,divElm,agendaItem)

Parameter	Type	Description
eventObj	jQuery event object	The event object for the drag event.
divElm	jQuery object	The div element for the agenda item.
agendaItem	javascript object	The agenda item data

Example: Drag-start and drag-stop callbacks

/**
 * Initializes calendar.
 */
var jfcalplugin = $("#mycal").jFrontierCal({
	date: new Date(),
	dayClickCallback: myDayClickHandler,
	agendaClickCallback: myAgendaClickHandler,
	agendaDropCallback: myAgendaDropHandler,
	agendaMouseoverCallback: myAgendaMouseoverHandler,
	applyAgendaTooltipCallback: myApplyTooltip,
	agendaDragStartCallback : myAgendaDragStart,
	agendaDragStopCallback : myAgendaDragStop,
	dragAndDropEnabled: true
}).data("plugin");

/**
 * Do something when dragging starts on agenda div
 *
 * @param eventObj - jquery drag event object
 * @param divElm - jquery object - reference to the div element for the agenda item.
 * @param agendaItem - javascript object - agenda item data. 
 */
function myAgendaDragStart(eventObj,divElm,agendaItem){
	// dragging started
	var title = agendaItem.title;
	var startDate = agendaItem.startDate;
	var endDate = agendaItem.endDate;
	var allDay = agendaItem.allDay;
	var data = agendaItem.data;	
};

/**
 * Do something when dragging stops on agenda div
 *
 * @param eventObj - jquery drag event object
 * @param divElm - jquery object - reference to the div element for the agenda item.
 * @param agendaItem - javascript object - agenda item data. 
 */
function myAgendaDragStop(eventObj,divElm,agendaItem){
	// dragging stopped
	var title = agendaItem.title;
	var startDate = agendaItem.startDate;
	var endDate = agendaItem.endDate;
	var allDay = agendaItem.allDay;
	var data = agendaItem.data;	
};

Tooltip Setup

Frontier calendar provides a hook that allows you to add tooltips to agenda items. You can use any tooltip library you want. Ideally the tooltip library you use should have a destroy or hide method. The tooltip library used in the example is qtip, http://craigsworks.com/projects/qtip/

The hook is the callback function applyAgendaTooltipCallback defined during calendar initialization. This method is fired under the following conditions.

When an agenda item is added to the calendar.
When an agenda item is dragged and then dropped into a day cell.
When an agenda reverts after it has been dragged but not dropped. For example, when the users drags the agenda item outside the bounds of the calendar it will not be dropped and will revert back to the start day cell it was at.

This method could be fired multiple times if the agenda item wraps around to another week. For example if the agenda item starts on Friday and ends on Tuesday there will be two div elements for the agenda item. One div element that spans from Friday to Saturday, and another div element in the next week that spans from Sunday to Tuesday. The tooltip will be applied to all div elements that make up the agenda item.

Method Signature: applyAgendaTooltipCallback(divElm,agendaItem)

Parameter	Type	Description
divElm	jQuery object	The div element for the agenda item.
agendaItem	javascript object	The agenda item data

Example: Apply qTip tooltips to all agenda div elements

/**
 * Initializes calendar.
 */
var jfcalplugin = $("#mycal").jFrontierCal({
	date: new Date(),
	dayClickCallback: myDayClickHandler,
	agendaClickCallback: myAgendaClickHandler,
	agendaDropCallback: myAgendaDropHandler,
	agendaMouseoverCallback: myAgendaMouseoverHandler,
	applyAgendaTooltipCallback: myApplyTooltip,
	agendaDragStartCallback : myAgendaDragStart,
	agendaDragStopCallback : myAgendaDragStop,
	dragAndDropEnabled: true
}).data("plugin");

/**
 * Do something when dragging starts on agenda div
 */
function myAgendaDragStart(eventObj,divElm,agendaItem){
	// destroy our qtip tooltip
	if(divElm.data("qtip")){
		divElm.qtip("destroy");
	}	
};

/**
 * Do something when dragging stops on agenda div
 */
function myAgendaDragStop(eventObj,divElm,agendaItem){
	//alert("drag stop");
};

/**
 * Custom tooltip - use any tooltip library you want to display the agenda data.
 *
 * For this example we use qTip - http://craigsworks.com/projects/qtip/
 *
 * @param divElm - jquery object for agenda div element
 * @param agendaItem - javascript object containing agenda data.
 */
function myApplyTooltip(divElm,agendaItem){

	// Destroy currrent tooltip if present
	if(divElm.data("qtip")){
		divElm.qtip("destroy");
	}
	
	var displayData = "";
	
	var title = agendaItem.title;
	var startDate = agendaItem.startDate;
	var endDate = agendaItem.endDate;
	var allDay = agendaItem.allDay;
	var data = agendaItem.data;
	displayData += "<br><b>" + title+ "</b><br><br>";
	if(allDay){
		displayData += "(All day event)<br><br>";
	}else{
		displayData += "<b>Starts:</b> " + startDate + "<br>" + "<b>Ends:</b> " + endDate + "<br><br>";
	}
	for (var propertyName in data) {
		displayData += "<b>" + propertyName + ":</b> " + data[propertyName] + "<br>"
	}
	// apply tooltip
	divElm.qtip({
		content: displayData,
		position: {
			corner: {
				tooltip: "bottomMiddle",
				target: "topMiddle"			
			},
			adjust: { 
				mouse: true,
				x: 0,
				y: -15
			},
			target: "mouse"
		},
		show: { 
			when: { 
				event: 'mouseover'
			}
		},
		style: {
			border: {
				width: 5,
				radius: 10
			},
			padding: 10, 
			textAlign: "left",
			tip: true,
			name: "dark"
		}
	});

};

Get Current Month/Year

There are many instances in which you may need to get the current year and month that calendar is displaying. Use the jfcalplugin.getCurrentDate() method to get a javascript Date object.

Method Signature: getCurrentDate(calId)

Parameter	Type	Description
calId	String	The ID of the calendar div element.
Returns: A javascript Date object with the year and month that the calendar is currently set to.

Example: Get calendar Date (year & month)

/**
 * Initializes calendar.
 */
var jfcalplugin = $("#mycal").jFrontierCal({
	date: new Date(),
	dayClickCallback: myDayClickHandler,
	agendaClickCallback: myAgendaClickHandler,
	agendaDropCallback: myAgendaDropHandler,
	agendaMouseoverCallback: myAgendaMouseoverHandler,
	applyAgendaTooltipCallback: myApplyTooltip,
	agendaDragStartCallback : myAgendaDragStart,
	agendaDragStopCallback : myAgendaDragStop,
	dragAndDropEnabled: true
}).data("plugin");

// date with the year and month the calendar is set to.
var calDate = jfcalplugin.getCurrentDate("#mycal");

function myDayClickHandler(eventObj){
	var date = eventObj.data.calDayDate;
};
function myAgendaClickHandler (eventObj){
	var agendaId = eventObj.data.agendaId;
	var item = jfcalplugin.getAgendaItemById("#mycal",agendaId);		
};
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.");
};

Retrieve Agenda Items

To retrieve agenda items from the calendar use jfcalplugin.getAgendaItemById() or jfcalplugin.getAgendaItemByDataAttr() or jfcalplugin.getAllAgendaItems()

Agenda Item Object Specification:

{
	agendaId: [integer],
	title: [string]
	startDate: [Date],
	endDate: [Date],
	allDay: [boolean],
	data: {
		key1: [value1],
		key2: [value2],
		etc...
	},
	displayProp: {
		backgroundColor: [string],
		foregroundColor: [string]
	}
}

Method Signature: getAgendaItemById(calId,agendaId)

Parameter	Type	Description
calId	String	The ID of the calendar div element.
agendaId	integer	The internal agenda ID. You can get this ID from event object on click events.
Returns: A single agenda item object.

Method Signature: getAgendaItemByDataAttr(calId,attrName,attrValue)

Parameter	Type	Description
calId	String	The ID of the calendar div element.
attrName	String	The name of the attribute in the agenda data object. When you add an agenda item to the calendar one of the parameters is an object with key value pairs. This allows you to store any data you want in the agenda item. For this example data object you can retrieve the agenda item like so, getAgendaItemByDataAttr("#mycal","myCustomAgendaId","12345");
attrValue	string/number	The attribute value in the data object.
Return: An array of agenda item objects. All agenda items that have the matching attribute value. If there is only one than the array will be of length 1.

Method Signature: getAllAgendaItems(calId)

Parameter	Type	Description
calId	String	The ID of the calendar div element.
Return: An array of agenda item objects.

Example: Get Agenda Items from Calendar

/**
 * Initializes calendar.
 */
var jfcalplugin = $("#mycal").jFrontierCal({
	date: new Date(),
	dayClickCallback: myDayClickHandler,
	agendaClickCallback: myAgendaClickHandler,
	agendaDropCallback: myAgendaDropHandler,
	agendaMouseoverCallback: myAgendaMouseoverHandler,
	applyAgendaTooltipCallback: myApplyTooltip,
	agendaDragStartCallback : myAgendaDragStart,
	agendaDragStopCallback : myAgendaDragStop,
	dragAndDropEnabled: true
}).data("plugin");

// add sample item so we can retrieve it
jfcalplugin.addAgendaItem(
	"#mycal",
	"Indiana Jones and the Last Crusade",
	new Date(1989,4,24,1,0,0,0),
	new Date(1989,4,24,23,59,59,999),
	false,
	{
		fname: "Indiana",
		lname: "Jones",
		artifact: "Holy Grail"
	},
	{
		backgroundColor: "#FF0000",
		foregroundColor: "#FFFFFF"
	}	
);	
function myDayClickHandler(eventObj){
	var date = eventObj.data.calDayDate;
};
function myAgendaClickHandler (eventObj){
	var agendaId = eventObj.data.agendaId;
	var item = jfcalplugin.getAgendaItemById("#mycal",agendaId);		
};
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.");
};	

// retrieve agend item by data attribute
var item = jfcalplugin.getAgendaItemByDataAttr("#mycal","fname","Indiana");

// get all agenda items
var allItemsArray = jfcalplugin.getAllAgendaItems("#mycal");

Add Agenda Items

To add an agenda item to the calendar use the jfcalplugin.addAgendaItem() method.

Method Signature: addAgendaItem(calId,title,startDate,endDate,allDay,data,displayProp)

Parameter	Type	Description
calId	String	The ID of the calendar div element.
title	String	The title of the agenda item. This is displayed on the agenda div element.
startDate	Date	Date & time the agenda event starts.
endDate	Date	Date & time the agenda event ends.
allDay	boolean	True if an all day event (do not show start time on agenda div element), false otherwise. False by default.
data	Object	Any optional data you want to store in the agenda item. An object with a series of key value pairs. e.g. {var1: "some data", var2: "more data", var3: "etc..."} Pass null if you don't want to store any data.
displayProp	Object	Optional display properties for the agenda item, or null. Color values can be hex, rbg, or color name (e.g. "#FF0000", or "rgb(255,0,0)" or "red")

Example: Add Agenda Item

<!--
jfcalplugin object is reference to calendar plugin. See initialization example above on how to obtain reference to plugin object.
-->
jfcalplugin.addAgendaItem(
	"#mycal",
	"Christmas Eve",
	new Date(2010,11,24,20,0,0,0),
	new Date(2010,11,24,23,59,59,999),
	false,
	{
		fname: "Santa",
		lname: "Claus",
		leadReindeer: "Rudolph",
		myExampleDate: new Date()
	},
	{
		backgroundColor: "#FF0000",
		foregroundColor: "#FFFFFF"
	}	
);

Delete Agenda Items

To delete an agenda item use either jfcalplugin.deleteAgendaItemById(), or jfcalplugin.deleteAgendaItemByDataAttr(), or jfcalplugin.deleteAllAgendaItems() methods.

Method Signature: deleteAgendaItemById(calId,agendaId)

Parameter	Type	Description
calId	String	The ID of the calendar div element.
agendaId	integer	The internal agenda ID. You can get this ID from event object on click events.

Example: Delete Agenda Item By ID.

/**
 * Initializes calendar.
 */
var jfcalplugin = $("#mycal").jFrontierCal({
	date: new Date(),
	dayClickCallback: myDayClickHandler,
	agendaClickCallback: myAgendaClickHandler,
	agendaDropCallback: myAgendaDropHandler,
	agendaMouseoverCallback: myAgendaMouseoverHandler,
	applyAgendaTooltipCallback: myApplyTooltip,
	agendaDragStartCallback : myAgendaDragStart,
	agendaDragStopCallback : myAgendaDragStop,
	dragAndDropEnabled: true
}).data("plugin");

function myDayClickHandler(eventObj){
	var date = eventObj.data.calDayDate;
	alert("You clicked day " + date.toDateString());
};
/**
 * Delete any agenda item when it's clicked.
 */
function myAgendaClickHandler (eventObj){
	var agendaId = eventObj.data.agendaId;
	jfcalplugin.deleteAgendaItemById("#mycal",agendaId);
};
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.");
};

Method Signature: deleteAgendaItemByDataAttr(calId,attrName,attrValue)

Parameter	Type	Description
calId	String	The ID of the calendar div element.
attrName	String	The name of the attribute in the agenda data object. When you add an agenda item to the calendar one of the parameters is an object with key value pairs. This allows you to store any data you want in the agenda item. For this example data object you can delete the agenda item like so, deleteAgendaItemByDataAttr("#mycal","myCustomAgendaId","12345");
attrValue	string/number	The attribute value in the data object.

Example: Delete Agenda Item By Data Attribute Value.

/**
 * Initializes calendar.
 */
var jfcalplugin = $("#mycal").jFrontierCal({
	date: new Date(),
	dayClickCallback: myDayClickHandler,
	agendaClickCallback: myAgendaClickHandler,
	agendaDropCallback: myAgendaDropHandler,
	agendaMouseoverCallback: myAgendaMouseoverHandler,
	applyAgendaTooltipCallback: myApplyTooltip,
	agendaDragStartCallback : myAgendaDragStart,
	agendaDragStopCallback : myAgendaDragStop,
	dragAndDropEnabled: true
}).data("plugin");

// add sample item so we can delete it
jfcalplugin.addAgendaItem(
	"#mycal",
	"Indiana Jones and the Last Crusade",
	new Date(1989,4,24,1,0,0,0),
	new Date(1989,4,24,23,59,59,999),
	false,
	{
		fname: "Indiana",
		lname: "Jones",
		artifact: "Holy Grail"
	},
	{
		backgroundColor: "#FF0000",
		foregroundColor: "#FFFFFF"
	}	
);
function myDayClickHandler(eventObj){
	var date = eventObj.data.calDayDate;
	alert("You clicked day " + date.toDateString());
};
/**
 * Delete the clicked agenda item if it has a data attribute name "artifact" with value "Holy Grail"
 */
function myAgendaClickHandler (eventObj){
	var agendaId = eventObj.data.agendaId;
	jfcalplugin.deleteAgendaItemByDataAttr("#mycal","artifact","Holy Grail");
};
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.");
};

Method Signature: deleteAllAgendaItems(calId)

Parameter	Type	Description
calId	String	The ID of the calendar div element.

Example: Delete all agenda items.

/**
 * Initializes calendar.
 */
var jfcalplugin = $("#mycal").jFrontierCal({
	date: new Date(),
	dayClickCallback: myDayClickHandler,
	agendaClickCallback: myAgendaClickHandler,
	agendaDropCallback: myAgendaDropHandler,
	agendaMouseoverCallback: myAgendaMouseoverHandler,
	applyAgendaTooltipCallback: myApplyTooltip,
	agendaDragStartCallback : myAgendaDragStart,
	agendaDragStopCallback : myAgendaDragStop,
	dragAndDropEnabled: true
}).data("plugin");

jfcalplugin.deleteAllAgendaItems("#mycal");

function myAgendaClickHandler (eventObj){
	var agendaId = eventObj.data.agendaId;
	jfcalplugin.deleteAgendaItemByDataAttr("#mycal","artifact","Holy Grail");
};
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.");
};

Edit Agenda Items

Documentation coming soon!

For now you simply pull the agenda item from the calendar, update it, delete the existing entry and then re-add it. I will have a nice update method later.

iCal Support

Frontier calendar has some basic iCal support. You can import iCal VEVENT data from an iCal file using the jfcalplugin.loadICalSource(calId,iCalUrl,responseDataType) method.

Please note that I don't know every much about iCal... The above method just parses out the VEVENT data and builds agenda items.

Method Signature: loadICalSource(calId,iCalUrl,responseDataType)

Parameter	Type	Description
calId	String	The ID of the calendar div element.
iCalUrl	String	Path to the iCal file. This can be a local path on disk or a URL. This resource will be requested using a jQuery AJAX call. Please note: This will not work on Chrome for local files. See http://code.google.com/p/chromium/issues/detail?id=40787
responseDataType	string	Data type of the response data, something like "text/html" or "application/octet-stream", etc...

Example: Load iCal data.

/**
 * Initializes calendar.
 */
var jfcalplugin = $("#mycal").jFrontierCal({
	date: new Date(),
	dayClickCallback: myDayClickHandler,
	agendaClickCallback: myAgendaClickHandler,
	agendaDropCallback: myAgendaDropHandler,
	agendaMouseoverCallback: myAgendaMouseoverHandler,
	applyAgendaTooltipCallback: myApplyTooltip,
	agendaDragStartCallback : myAgendaDragStart,
	agendaDragStopCallback : myAgendaDragStop,
	dragAndDropEnabled: true
}).data("plugin");

// load our sample FIFA World Cup 2010 iCal file in the extra/ folder inlcuded with this example.
jfcalplugin.loadICalSource("#mycal","extra/fifa-world-cup-2010.ics","application/octet-stream");	

function myDayClickHandler(eventObj){
	var date = eventObj.data.calDayDate;
	alert("You clicked day " + date.toDateString());
};
function myAgendaClickHandler (eventObj){
	var agendaId = eventObj.data.agendaId;
};
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.");
};

Troubleshooting

If another element on your page changes size, causing the calendar div element to move, you may notice that the agenda items are not properly aligned. For example, if you have an element above the calendar that grows in height than the celendar div element will be pushed down further on the page. Since the agenda items are absolutely positioned over the calendar day cells they will not move, and they will not be properly aligned over the calendar.

Before: Agenda items are posititoned correctly.

After: element above calendar cause calendar div to shift down. Absolute positioned agenda items do not shift down with the calendar. Looks bad! :(

Solution 1: Call the reRenderAgendaItems(calId) function to re-render the agenda items after the calendar moves.

Solution 2: Make sure there is nothing on your page that will cause the calendar div element to move! :)

Example: Re-render agenda items function.

/**
 * Initializes calendar.
 */
var jfcalplugin = $("#mycal").jFrontierCal({
	date: new Date(),
	dayClickCallback: myDayClickHandler,
	agendaClickCallback: myAgendaClickHandler,
	agendaDropCallback: myAgendaDropHandler,
	agendaMouseoverCallback: myAgendaMouseoverHandler,
	applyAgendaTooltipCallback: myApplyTooltip,
	agendaDragStartCallback : myAgendaDragStart,
	agendaDragStopCallback : myAgendaDragStop,
	dragAndDropEnabled: true
}).data("plugin");

// re-render agenda items if calendar element moves
jfcalplugin.reRenderAgendaItems("#mycal");

Change Log

June 23nd, 2010 - Version 1.3.1

Crucial bug fix to the deleteAgendaItemByDataAttr(calId,attrName,attrValue) function.

New reRenderAgendaItems(calId) function that allows you to re-render the agenda items if they get out of alignment. See Troubleshooting section for further information

June 22nd, 2010 - Version 1.3

Bug fixes

Tooltips on agenda items. Use any tooltip library you want. Whatever library you choose it should probably have destroy() tooltip and/or hide() tooltip methods. See documentation on applyAgendaTooltipCallback(divElm,agendaItem) callback function.

Two additional callback functions for drag events, agendaDragStartCallback(eventObj,divElm,agendaItem) and agendaDragStopCallback(eventObj,divElm,agendaItem). These are fired when dragging starts and dragging stops on agenda items (if drag-and-drop is enabled.)

New deleteAllAgendaItems(calId) method to delete all agenda items in the calendar.

Updated initialization for applyAgendaTooltipCallback(divElm,agendaItem), agendaDragStartCallback(eventObj,divElm,agendaItem), and agendaDragStopCallback(eventObj,divElm,agendaItem) callbacks.

This version (like 1.2) still requires the jquery core fix for drag-and-drop under IE. I'd like to fix this so it's not required...

June 17th, 2010 - Version 1.2:

More Bug fixes

CSS tweaks
New CSS attribute for the current day.
Arrows on agenda items that span weeks & months.

Drag-and-drop agenda items!
This required a modification to the jQuery Core library to enable drag-and-drop to work correctly in Internet Explorer. If you don't care about IE than you can use an unmodified version of the jQuery Core library. Everything works fine in Chrome, Firefox, Opera, and Safari without the fix. There is a readme file inlcuded with this plugin, query-frontier-cal-x.x/js/jquery-core/README-IE-FIX.TXT, that explains what was modified. Only one line was changed so not that big of a deal....

The jfcalplugin.addAgendaItem() method changed slightly.
The new method signature is jfcalplugin.addAgendaItem(calId,title,startDate,endDate,allDay,data,displayProp). The new parameter is the boolean value 'allDay' which did not exist in version 1.1. This is a flag that tells the calendar the agenda item is an all day event. If you want the same exact functionality as version 1.1 then simply pass in 'false'. If you pass in 'true' then the start time will not be displayed on the agenda item.

All the getAgendaItem methods return an updated agenda object which inlcudes the allDay flag.

The constructor/initialize method changed slightly.
There is a new boolean parameter called dragAndDropEnabled which allows you to turn off drag-and-drop. This is enabled by default.

June 14th, 2010 - Version 1.1:

Bug fixes

CSS tweaks

Performance tweaks...Yes, it runs slow in IE...

Basic VEVENT iCal support.

June 9th, 2010 - Version 1.0: Initial release.

jQuery Frontier Calendar