Entries Tagged as ''

jCalendar: A jQuery Based Calendar Goes The Drupal Way for date type fields jstools drupal5

Jscalender module come with Jstools package in drupal 5 you can download drupal jstools package from the drupal.org site.Jscalender uses the jsCalendar javascript library, like using a special CSS class called via #attribute in the form element array to convert textfields into jcalendar enabled.

The jcalendar module uses hook_form_alter() to look for textfields with the add-jcalendar class, I had to use something different than jcalendar which is used later on the generated form elements by the jQuery code.

This is a sample of how to enable jcalendar from one of your textfields once you’ve installed the module:

To include a jscalendar popup with a textfield, just add the class ‘jscalendar’:(from readme.txt)

$form['date'] = array(
‘#type’ => ‘textfield’,
‘#attributes’ => array(’class’ => ‘jscalendar’),
);

To change the default display and functionality of the calendar, set startup
parameters by adding selectors to your element. The three configurable options
are ‘ifFormat’ (the format of the date/time written to the text field),
’showsTime’ (boolean: should time be displayed on the calendar), and
‘timeFormat’ (values of ‘12′ for 12-hour clock, which is the default, or ‘24′
for 24-hour clock).

Example:
$form['date'] = array(
‘#type’ => ‘textfield’,
‘#attributes’ => array(’class’ => ‘jscalendar’),
// Use only year, month, and day in textfield.
‘#jscalendar_ifFormat’ => ‘%Y-%m-%d’,
// Don’t show time.
‘#jscalendar_showsTime’ => ‘false’,
// Show 24-hour clock.
‘#jscalendar_timeFormat’ => ‘24′,
);

$form['firstdate'] = array(
‘#type’ => ‘textfield’,
‘#title’ => ‘The first date’,
‘#default_value’ => ‘2007-09-29′,
‘#weight’ => -20,
‘#attributes’ => array(’class’ => ‘add-jscalendar’),
‘#description’ => t(’YYYY-MM-DD’),
);

The #jcalendar_year_range custom property allows you to provide a range of years, look at the associative array $years, to show in the calendar. If the property is not passed jcalendar.module defaults to the current year plus 20.

#jcalendar_plot_dates, which is not working yet, should allow passing an array of dates to the calendar to plot. I’m not sure if this should be the job of the Drupal module or jCalendar’s jQuery code.

This first version of jcalendar.module works, it converts your textfield to three select boxes, day, month, year, and a nice table based date picker, easy to theme via CSS, and once you have the right date you can do whatever you want with it. The original textfield is removed later so your form validation and processing functions should consider if jcalendar is enabled (a simple if (module_exists(’jcalendar’))) to handle form elements in a different way.