Hacking at 0300

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 = $('input.date').flexcal() then invoking the method: cal.flexcal('setDate', '10/25/2011').

Getters

Setters

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, $('input.date').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.options.box = this.options.box || this.element;
    this.show();
  },
  options: {
    position: {at: 'bottom', my: 'bottom'},
    speed: 0,
    hideOnOutsideClick: false
  }, 
  commit: function(d){
    this.element.val(this.format(d));
    this._setDate(d, true);
    this._trigger('commit', 0, d);
  }
});

<div><input id="example1"/><br/></div>

$('#example1').inlineflexcal({box: $('#example1').parent()});

Examples

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>

$('#date1').inlineflexcal({
	commit: function(event, data){
		var startdate = data;
		var enddate = $('#date2').inlineflexcal('option', 'current');
		$('#date2').inlineflexcal('option', 'current', Math.max(startdate, enddate));
	}
});
$('#date2').inlineflexcal({
	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');
$('#button2').click(function(){
  $('#example2').inlineflexcal('position'); // restore the correct position
});

Show/Hide

<label><input type="radio" name="radio3"/> Hide</label>
<label><input type="radio" name="radio3" checked="checked"/> Show</label>
<div id="example3"></div>

$('#example3').inlineflexcal();
$('[name=radio3]').first().change(function() {
  if ($(this).is(':checked')) $('#example3').inlineflexcal('hide');
});
$('[name=radio3]').last().change(function() {
  if ($(this).is(':checked')) $('#example3').inlineflexcal('show');
});

l10n

<label><input type="radio" name="radio4" checked="checked"/> Decimal</label>
<label><input type="radio" name="radio4"/> Hex</label>
<div id="example4"></div>

$('#example4').inlineflexcal();
$('[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>

$('#example5').inlineflexcal({
  calendars: ['en', 'jewish', 'he-jewish'],
  'class': 'multicalendar'
});
$('#example5').on('inlineflexcalset', function() {
    $('[name=radio5]').eq($('#example5').inlineflexcal('option', 'tab')).prop("checked", true);
});
$('[name=check5]').change(function(){
	$('#example5').inlineflexcal('option', 'hidetabs', $(this).prop('checked'));
});
$('[name=radio5]').change(function() {
  $('#example5').inlineflexcal('option', 'tab', $('[name=radio5]').index(this));
});