Skip to content

The flexcal API and an inline flexcal

My flexcal plugin exposes a few useful methods, which I have not documented elsewhere. They are called, like all jQuery UI widget methods, by creating the widget: cal = $('').flexcal() then invoking the method: cal.flexcal('setDate', '10/25/2011').


Returns the <div> element that contains the calendar. Also useful for forcing the creation of the calendar; it is only created when it is shown (lazy instantiation). Therefore, trying to manipulate the calendar before it is shown can cause errors. Use $('').flexcal().flexcal('box') to force instantiation.
Takes a Date object and returns the string representation of it; $('').flexcal('format', new Date) returns '10/25/2011' for the day I wrote this. One the methods that are useful to override; the default function is available as $.bililite.flexcal.date2string.


"Commits" the currently highlighted date—sets the value of the input element to format(getDate()), hides the calendar, and triggers the commit event.
Hides the calendar.
Move the calendar to the position represented by flexcal('option', 'position'). Note that flexcal('option', 'position', 'tl') changes the option value but does not move the calendar. You have to call flexcal('position') to actually move it. This may be bad design and I may change this in the future.
Shows the calendar.

Plus, setting the options with option changes the calendar on the fly (except for url, which is evaluated only at creation; if you need to reset the HTML of the calendar, destroy it and instantiate a new one). Thus, $('').flexcal('option', 'current', '1/1/2011') sets the highlighted date (displaying the appropriate month).

An inline flexcal

A quick inline datepicker, subclassed from flexcal, for use with the examples. It requires that the associated <div> be absolutely sized in height, which is not ideal.

$.widget('bililite.inlineflexcal', $.bililite.flexcal, {
  _init: function(){ = || this.element;;
  options: {
    position: {at: 'bottom', my: 'bottom'},
    speed: 0,
    hideOnOutsideClick: false
  commit: function(d){
    this._setDate(d, true);
    this._trigger('commit', 0, d);
<div><input id="example1"/><br/></div>
$('#example1').inlineflexcal({box: $('#example1').parent()});


filter, current

<span>Start Date:</span>
<div id="date1" style="display: inline-block"></div>
<span>End Date:</span>
<div id="date2" style="display: inline-block"></div>
	commit: function(event, data){
		var startdate = data;
		var enddate = $('#date2').inlineflexcal('option', 'current');
		$('#date2').inlineflexcal('option', 'current', Math.max(startdate, enddate));
	filter: function (d){
		return d >= $('#date1').inlineflexcal('option','current');

box, position

<span>Drag the calendar!</span> <input type="button" id="button2" value="Restore Position"/>
<div id="example2"></div>
$('#example2').inlineflexcal({reposition: false});
$('#example2').inlineflexcal('box').draggable().css('border', '10px inset purple');
  $('#example2').inlineflexcal('position'); // restore the correct position


<label><input type="radio" name="radio3"/> Hide</label>
<label><input type="radio" name="radio3" checked="checked"/> Show</label>
<div id="example3"></div>
$('[name=radio3]').first().change(function() {
  if ($(this).is(':checked')) $('#example3').inlineflexcal('hide');
$('[name=radio3]').last().change(function() {
  if ($(this).is(':checked')) $('#example3').inlineflexcal('show');


<label><input type="radio" name="radio4" checked="checked"/> Decimal</label>
<label><input type="radio" name="radio4"/> Hex</label>
<div id="example4"></div>
$('[name=radio4]').first().change(function() {
  if ($(this).is(':checked')) $('#example4').inlineflexcal('option', 'l10n', 'en');
$('[name=radio4]').last().change(function() {
  if ($(this).is(':checked')) $('#example4').inlineflexcal('option', 'l10n', {
	dayNamesMin: ['s','m','t','w', 't', 'f','s'],
	dates: function(n){
		return n.toString(16);
	years: function(n){
		return n.toString(16);

tab, hidetabs

<label><input type="checkbox" name="check5"/> Hide Tabs</label><br/>
<label><input type="radio" name="radio5" checked="checked"/> English</label>
<label><input type="radio" name="radio5"/> Jewish</label>
<label><input type="radio" name="radio5"/> &#1506;&#1489;&#1512;&#1497;&#1514;</label>
<div id="example5"></div>
  calendars: ['en', 'jewish', 'he-jewish'],
  'class': 'multicalendar'
$('#example5').on('inlineflexcalset', function() {
    $('[name=radio5]').eq($('#example5').inlineflexcal('option', 'tab')).prop("checked", true);
	$('#example5').inlineflexcal('option', 'hidetabs', $(this).prop('checked'));
$('[name=radio5]').change(function() {
  $('#example5').inlineflexcal('option', 'tab', $('[name=radio5]').index(this));

Post a Comment

Your email is never published nor shared. Required fields are marked *