jCalendar: A jQuery Based Calendar Goes The Drupal Way

While working on a Drupal based project where we needed a date picker for our forms, my good friend, and old drupaler, Gerhard, recommended me taking a look at Ted Serbinski's jCalendar, a jQuery based calendar.

I started hacking a quick version of jcalendar.module using some ideas of the very helpful jscalendar.module, which 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:

// Define a range of years to show
$years = array('0' => 0) + drupal_map_assoc(range(2007,2020));

$plot_dates = array(
'2008-11-03',
'2007-04-01',
'2007-06-11',
); // YYYY-MM-DD

$form['firstdate'] = array(
'#type' => 'textfield',
'#title' => 'The first date',
'#default_value' => '2007-09-29',
'#weight' => -20,
'#attributes' => array('class' => 'add-jcalendar'),
'#jcalendar_year_range' => $years,
'#jcalendar_plot_dates' => $plot_dates,
'#description' => t('YYYY-MM-DD'),
);</code>

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.

So, what's the catch? Unfortunately, after I finished my tests and added a second date textfield to my form, I needed to choose a start date and an end date, then I realized jcalendar is duplicating its job for each textfield, it seems the jQuery code only supports one jcalendar per web page. I still need to review the comments in Ted's blog and talk to him to confirm this but I thought it would be a good idea posting what I've done so far in case any of you want to play with the code and improve it.

So here it is, download jcalendar.module and let us know if you get a way to work with more than one calendar per page or alternate ways to alter the original forms.

Join the conversation

Hey Alexis, yes you have

Hey Alexis, yes you have found a bug, jCalendar should work multiple times. We'll have to debug this, shoot me an email and we can discuss.

Also, I was working with Karen on a CCK widget for jCalendar that would be much easier to develop than a full fledged module :-) Passing in an array of dates right now is not supported but hopefully soon.

date type instead textfield

Hi,

Great work, but I think you should use date type instead textfield.

demo

some demo kind will be appreciated.Anyways nice work.

Keep your comments relevant, written in good English and don't spam. Let's create useful and valuable discussions. Markdown is welcome.

Add your comment