jQuery fbisCalendar

Here is my first freely available jQuery plug-in.  There are a few more to follow soon including a form builder and a file explorer 😉

Overview

I know there are a million calendar selectors out there but I needed one that covered historical dates (1800-2100).  It displays either as a in place calendar in the page or as a drop down aka. combo box style.

19/09/2009 – This is an alpha release and although it works well I will be tuning the behaviour before 0.1 is finished.

Features

  • Tied to a textbox and renders all its own html
  • Supports textual date input
  • Supports custom html and style overrides
  • Slide down year and month selector
  • Can display in-line or a drop down select style control

Compatibility

jQuery fbisCalendar requires jQuery 1.3.2 or above and has been tested to work in the following browsers:

  • Internet Explorer 7 & 8
  • Firefox 2 & 3
  • Safari 3
  • Chrome

Demo

There is a demo here. I’ve kept the styling simple, more will follow soon.

Dependencies

jQuery fbisCalendar requires jQuery 1.3 or above. Also supports the MaskedInput plug-in if it’s available.

Download

Current version: 0.1.Alpha (18/09/2009) or demo.zip

Documentation

The calendar ties into a normal textbox.  Just call the plug-in with the textbox id like so:

$(document).ready(function(){
	$("#dateselect").fbisCalendar({selectedDate: new Date(2009,8,27)});
}

The text box will be updated whenever the selected date is changed so when the form is posted back the original text box will contain the selected date. If you want to process the date just pass in a function like so:

$("#dateselect").fbisCalendar(
	{selectedDate: new Date(1973,8,27),
		onDateChange:function(date)
		{
			console.log(date);
		}
	});

Full documentation can be found in demo.zip or the demo page.

2 Responses to “jQuery fbisCalendar”

  1. Techie Talks says:

    The plugin is very nice. It will be a lot cooler when we are able to change the theme.

  2. fbis says:

    The styling is just done with css, feel free to style it how you like 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *