A calendar for use with prototype

• It pops up!
• It embeds!
• It can be delegated!
• It is kinda friendly!

Why a calendar date picker for a framework waning in popularity?

There are projects in the wild that are deep into prototypeland and still need functionality added.

Usage

Demonstration of the plugin can be seen in examples/index.html which shows a few different calendar types in action.

↓ HTML

<div id="calendarview_input">
  <label for="date_input">Date</label><br />
  <input type="text" name="date_input" value="" id="date_input" />
</div>

↓ JAVASCRIPT

$('calendarview_input').calendarviewable();

Details

Currently the identifier for the editable field needs to be on the DOM object containing the input element that a calendar should be attached to.

This is not ideal but it works for the moment. If the DOM object the calendar is being attached to isn’t an input field but a DIV or the like the ‘dateField’ id needs to be passed in for the calendar to be added:

↓ HTML

<div id="calendarview_input">
  <div id="date_display">
    01/01/2010
  </div>
</div>

↓ JAVASCRIPT

$('calendarview_input').calendarviewable({
  'dateField' : 'date_display'
  'dateFormat' : '%d/%m/%Y%'
});

NOTE The date format has to be added to the options for the date parsing to work correctly.

Date Formatting		dateFormat
01/01/2010	→	'%d/%m/%Y'
Friday Jan 1st, 2010	→	'%A %b %O, %Y'
Jan 1, 2010	→	'%b %e, %Y'
2010-01-01	→	'%Y-%m-%d'

If the calendar is being added when an event happens (like a mouse click on a input/DOM Object) 'activated': true needs to added to the options or the calendar will not display on the first click.

Acknowledgment

Calendarview is the original plugin that was the foundation for this hack and slash version.
CalendarView is developed and maintained by Justin Mecham.
calendarview.org

The design and constructor pattern were heavily informed by the better-edit-in-place plugin.

TODO

• Better README
• Do some Object instantiation options voodoo because the current way is ugly and brittle.
• Probe date_patches.js to assess what’s what – if it does things that are already handled
  by default etc…
• Testing!?
• Rake install task or Gemify?