Overview

Calendar is a Javascript class that adds accessible and unobtrusive date-pickers to your form elements. This class is a compilation of many date-pickers I have implemented over the years and has been completely re-written for Mootools. I have tried to include all the features that have been most useful while streamlining the class itself to keep it as small as possible. Use the links below to see what features are available in Calendar and how it might enhance the accessibility, usability and validation of form elements on your website.

Features

Download

Requirements

Calendar has been successfully tested in Safari, Firefox, Opera and Internet Explorer. The class requires Mootools 1.1 with Fx.Style, Element and Window. In order to enable dragging, the class also requires the Drag component.

Links

You are downloading Release Candidate 4 (fixes: bug with blocked dates, calendar placement, selects in IE6, day-of-the-week offset and more; added: tweaking, event handlers and css for today and all the days between 2 or more dates with multi-calendar functionality).

Share

If you like Calendar, also check out Slideshow: a javascript class to stream and animate the presentation of images on your website. Show your support by clicking the Digg button below!

Manual

Important

Using Calendar requires at the very least knowledge of XHTML and CSS and some experience using Javascript in web pages. If you meet those requirements first make sure you have downloaded Mootools with the components listed above. Then follow the instructions below to begin using Calendar!

Installation

Link the calendar.js javascript file from within the head of your HTML document. Be sure to link calendar.js after mootools.js in the order they appear. Note remember to adjust the src to reflect the location of the javascripts on your website.

<head>
  ...
  <script type="text/javascript" src="mootools.js"></script>
  <script type="text/javascript" src="calendar.js"></script>
</head>

Usage

Execute the class from within the head of your HTML document. Calendar has one required parameter: an object containing the element_id: 'format' pairs of the inputs or selects the class will be applied to. An object in Javascript is a collection of key: value pairs separated by commas and contained within curly-brackets {}. In this case, assuming the element you wanted to apply the class to was the following:

<input id="date" name="date" type="text" />

An example of a valid execution of Calendar would be:

<head>
  ...
  <script type="text/javascript">
    window.addEvent('domready', function() { myCal = new Calendar({ date: 'd/m/Y' }); });
  </script>
</head>

In this case the function() { ... } is the execution call: we are attaching it to the domready event of the window, which means it will be run as soon as the webpage has been loaded, without waiting for images. Of the function statement myCal = new Calendar({ ... }); itself: we are setting a new Calendar instance to a variable named myCal. Of the object { date: 'd/m/Y' } we are passing in as the required parameter: date is the id of the element and 'd/m/Y' is the format the date will appear as. Calendar accepts the following characters for date formatting: d, D, j, l, S, F, m, M, n, Y, y borrowing syntax from PHP's date function. Some other examples are as follows:

new Calendar({ year: { day: 'd', month: 'm', year: 'Y' }});

Where day, month and year are the ids of 3 inputs or selects and 'd', 'm' and 'Y' are their corresponding formats. The preceding year indicates the element the calendar button will be appended to–see Styling Your Calendar below for more information.

new Calendar({ day: { day: 'd', monthyear: 'm-Y' }});

Similar to above, in this case there is one element for the day and one element for the combined month and year values. The button is appended to the day element.

new Calendar({ date1: 'd/m/Y', date2: 'd/m/Y' });

Here the class is applied to two different date elements, resulting in multi-calendar functionality as demonstrated in the features above.

new Calendar({ day1: { day1: 'd', monthyear1: 'm-Y' }, day2: { day2: 'd', monthyear2: 'm-Y' }});

Similar to example two, but with multi-calendar functionality as well.

Properties

Following the first object, the class also accepts an optional second object that may contain any of the following properties to help customize Calendar to your website:

Therefore, it's possible that your Calendar initialization actually looks something like this:

myCal = new Calendar({ date1: 'F j, Y', date2: 'F j, Y' }, { blocked: ['20-25,31 12 *'], direction: 1, navigation: 2, pad: 2 });

Styling Your Calendar

As described above in the classes property, Calendar uses several CSS classes to stylize elements or functionality. The first class, by default 'calendar', is applied to the div that contains the calendar element, the calendar button and the form element it is appended to. Since it usually looks better to reduce the size of the form element to accommodate the button, an example of styles might be:

input {
  width: 100px;
}
input.calendar {
  width: 74px;
}
button.calendar {
  background: url(calendar-icon.gif);
  border: 0;
  cursor: pointer;
  float: left;
  height: 20px;
  margin-right: 6px;
  width: 20px;
}
button.calendar:hover,
button.calendar.active {
  background-position: left bottom;
}

Here you can see the default width of a form input is 100px. In this case, the element that the calendar button will be appended to has a width of 74px - that's the default width (100) minus the width (20) and margin (6) of the calendar button. The XHTML of the calendar element itself depends slightly on the navigation mode set. The default, navigation: 1, generates the following:

<div class="calendar">
  <div>
    <table>
      <caption>
        <a class="prev">&lt;</a>
        <span class="month">[Month]</span>
        <span class="year">[Year]</span>
        <a class="next">&gt;</a>
      </caption>
      <thead>
        <tr>
          <th>S</th>
          <th>M</th>
          <th>T</th>
          <th>W</th>
          <th>T</th>
          <th>F</th>
          <th>S</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>30</td>
          <td>31</td>
          <td class="invalid">1</td>
          <td class="invalid">2</td>
          <td class="valid">3</td>
          <td class="inactive">4</td>
          <td class="active">5</td>
        </tr>
        <tr> ... </tr>
        <tr> ... </tr>
        <tr> ... </tr>
        <tr> ... </tr>
        <tr> ... </tr>
      </tbody>
    </table>
  </div>
</div>

Note that the calendar is padded with the ending days of the previous month and starting days of the next month, however these table cells are unclassed. Days that are within the current month but disabled or blocked are classed as 'invalid'. Days that are within the current month and clickable are classed as 'valid'. The day that has been set is classed 'active'. In multi-calendar mode, days that have been set by other calendars appear classed as 'inactive'. All clickable days–which may include days classed as inactive or active–receive the 'hover' class on mouseover.

Depending on the navigation mode set, the CAPTION element may be created differently. For navigation: 2, the caption element is generated as following:

<caption>
  <span class="month">
    <a class="prev">&lt;</a>
    <span>[Month]</span>
    <a class="next">&gt;</a>
  </span>
  <span class="year">
    <a class="prev">&lt;</a>
    <span>[Year]</span>
    <a class="next">&gt;</a>
  </span>
</caption>

For static or no navigation (0) the caption element is:

<caption>
  <span class="month">[Month]</span>
  <span class="year">[Year]</span>
</caption>

Tips & Tricks

Contact

Questions? Comments? Join the discussion here or at #mootools in irc.freenode.net (chat).

I am available on occasion for contract work as well–please visit my portfolio page. Please do not email me directly regarding problems with the script, rather use the link above so that others can benefit from the bugs / solutions you have uncovered–support open source by being open.