Vista-like Ajax Calendar version 2

The Vista-like Ajax Calendar (vlaCalendar) version 2 is a unobtrusive web version of the slick and profound Windows Vista taskbar calendar, by using the MooTools javascript framework, AJAX, XHTML, CSS and PHP.

I'd appreciate hearing from you if you're using this script. Comments and feature requests are more than welcome in one of the calendar articles.

Update July 1, 2008: vlaCalendar version 2.1 released. This version is compatible with the newest MooTools release (version 1.2).
Update September 5, 2008: vlaCalendar version 2.1.1 released. Check the change list for the changes in the release.
Update September 6, 2008: 'Client-side only extension' for vlaCalendar v2.1.x released.
Update March 13, 2009: Commercial license for all vlaCalendar libraries released.
Update October 11, 2009: VlaCalendar's successor, Calendar Eightysix released.


Page contents


Features

Key features:

  • Authentic Vista look-and-feel
    • Quick navigation by jumping back and forth between months, years and decades without drop-down boxes
    • Smooth transition animations
  • Customizable features
  • Lightweight

New features in version 2:

  • Datepicker functionality (!)
  • Cleaner and more developer centered - easily editable - CSS, PHP and javascript code
    • Easily changeable date labels (e.g. different languages)
    • Easily stylable. Styles are created on top of the general style; the download include two example styles
    • Both normal and datepicker calendar can be instantiated multiple times

The vlaCalendar has been tested on:

  • IE7 on Vista and XP SP2
  • IE6 on XP SP2
  • Firefox 2 and 3
  • Opera 9 - 9.5
  • Safari 3.1 for Windows
  • Google Chrome

Change list

vlaCalendar v2.1.0 - v2.1.1:

  • Minor improvements in the PHP code
  • Added example page in the download package

vlaCalendar v2.0 - v2.1:

  • Version is developed for MooTools v1.2 only
  • New user requested features:
    • Prefilling of the date
    • Default view option
    • Input and datepicker linkage, if the input is changed the datepicker will adapt itself to that input

vlaCalendar v1.0 - v2.0:

  • Datepicker functionality
  • Cleaner and more developer centered - easily editable - CSS, PHP and javascript code
    • Easily changeable date labels (e.g. different languages)
    • Easily stylable. Styles are created on top of the general style
    • Both normal and datepicker calendar can be instantiated multiple times
  • Added MooTools 1.2b2 beta compatibility next to MooTools release 1.11



Usage

The vlaCalendar version 2.1 is compatible with MooTools version 1.2. VlaCalendar version 2.0 is compatible for both MooTools version 1.11 and 1.2b2 beta. This usage chapter is written for vlaCalendar version 2.1, but is the same for older versions which have sourcefiles with different names.

Include the javascript files

  • vlaCal-v2.1.js and mootools-1.2-core.js
    OR the compressed versions
  • vlaCal-v2.1-compressed.js and mootools-1.2-core-compressed.js

within the head of your HTML document. For the best result use a XHTML doctype: IE renders the calendar with bad heights when a HTML 4.01 doctype is used.

Include either the compressed or normal version of both files. The normal versions contain whitespace and comments useful for developing purposes. The default path in which the files reside is jslib/ but they could ofcourse be moved to where ever it suit your needs.

Same story for the stylesheets. Include vlaCal-v2.1.css and other style files also within the head of your HTML document. The default path in which they reside is styles/.

<head>
    [...]
    <script type="text/javascript" src="jslib/mootools-1.2-core.js"></script>
    <script type="text/javascript" src="jslib/vlaCal-v2.1.js"></script>
    <link type="text/css" media="screen" href="styles/vlaCal-v2.1.css" rel="stylesheet" />
    [...]
</head>

Instantiation of the calendar or datepicker classes needs to happen after the DOM is ready. This is done by using the MooTools domready event. This event also needs to be included in the head:

<head>
    [...]
    <script type="text/javascript">
        window.addEvent('domready', function() {
            //Datepicker
            new vlaDatePicker('textbox-id');
            //Calendar
            new vlaCalendar('block-element-id');
        });
    </script>
    [...]
</head>

Both calendar and datepicker have a variety of options to style and format the calendar to your needs. This is done by providing options while instantiating the class. All options are optional (duh) and reside in a javascript object which is passed as the second argument. An object in javascript is a collection of key-value pairs separated by commas and contained within curly-brackets {}. For more information about the options view the examples and the option list. For more information about the arguments view the argument list.

The PHP files, used to create calendar HTML, reside in the default inc/ directory. If you want to use a different path you will need to change the default filepath in the vlaCalendar javascript file or provide the filepath option.


Examples

Note: Some features in all examples are vlaCalendar v2.1.x only. See the change and option lists.

The examples reside on an own page.

 

Arguments

new vlaDatePicker(string element [, object options])
new vlaCalendar(string element [, object options]);
element The first argument is the id of an HTML element. For the the vlaCalendar it is preferbly the id of a block element like a div. For the vlaDatePicker it needs to be the id of either an input element or an element containing multiple input elements for the separate input functionality.
For the basic usage of the element argument see the examples.
options Both calendar and datepicker have a variety of options to style and format the calendar to your needs. All options reside in a javascript object which is passed as the second argument. An object in javascript is a collection of key-value pairs separated by commas and contained within curly-brackets {}. All available options can be found in the options list.
For the basic usage of the argument options see the examples.



Options

vlaCalendar options

slideDuration Determines the duration of the slide transition (left to right and visa versa). Number, in milliseconds. Standard value is 500.
fadeDuration Determines the duration of the fade transition (child to parent and visa versa). Number, in milliseconds. Standard value is 500.
transition Determines the tweening transition. Transition instance. The standard value is Fx.Transitions.Quart.easeOut. All transitions that are available can be found in the MooTools documentation.
startMonday Determines if the calendar week starts on Monday or Sunday. Boolean. The standard value is false.
filePath Determines the file path to the PHP files. String. The standard value is inc/.
style Determines an alternative style for the calendar. String. The standard value is empty. For more information about styling see the examples.
defaultView v2.1 only Determines the default view of the calendar. String. The standard value is month.
weekDayLabels 'Client-side only' extension only Contains the weekday language labels used in the calendar. Object. Standard value is ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']. In the normal version language labels can be changed in inc/vars.php.
monthLabels 'Client-side only' extension only Contains the month name language labels used in the calendar. Object. Standard value is ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'].
monthSmallLabels 'Client-side only' extension only Contains the short versions of the month name language labels used in the calendar. Object. Standard value is ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'].

 

vlaDatePicker options

All vlaCalendar options can be used for the vlaDatePicker.

leadingZero Determines if the datepicker returns month and day numbers under 9 with a zero in front (e.g. 09 instead of 9). Boolean. The standard value is true.
twoDigitYear Determines if the datepicker returns the year number with four or two digits (e.g. 2008 or 08). Boolean. The standard value is false.
separateInput Determines if the datepicker returns values to separate text input elements. Boolean false or object. The standard value is false. See the examples for more information.
separator Determines the datepicker separator (between month, day and year values). String. The standard value is /.
format Determines the datepicker return format (month, day and year order). String. Possible values are d/m/y, m/d/y, y/d/m and y/m/d. The standard value is d/m/y.
openWith Determines if the datepicker is toggled with an other element instead of that it opens when clicked on the text input element itself. String, element id. The standard value is null.
alignX Determines the horizontal position of the datepicker according to the text input element. String. Possible values are left, center and right. The standard value is right.
alignY Determines the vertical position of the datepicker according to the text input element. String. Possible values are bottom, top and inputTop. The standard value is inputTop.
offset Determines the vertical and horizontal offset of the datepicker. Object, with x and y keys and numeral values in pixels. The standard value is {'x': 0, 'y': 0}.
ieTransitionColor Determines the background color of the datepicker while fading in and out. This option is only used by the Internet Explorer 7 browser. IE7 renders png images with alpha channels really bad in transitions. A background color which is the same as the background color as the website fixes this problem. (IE6 uses an alternative gif background image because it can't render png alpha channels at all, and using the filter causes diffrent problems.) String, hexadecimal or CSS color value. The standard value is #ffffff.
toggleDuration v2.1 only Determines the duration of the datepicker show and hide fade transition. Number, in milliseconds. Standard value is 350. VlaCalendar version 2.0 uses the fadeDuration property for this.
prefillDate v2.1 only Determines whether or not the input element is filled with a date in the initialization process. Boolean or an object with day, month and year keys and numeral values. Standard value is boolean true.
When set to boolean true it fills out the currect date. When a object is given it fills out the date derived from that object. See the examples for more information.
With VlaCalendar version 2.0 the input needs to be prefilled by the user, for example by using PHP.
linkWithInput v2.1 only Determines if the input element(s) are linked with the datepicker. For example: when you manually change 2008 to 2009 (by typing), the datepicker will also change to 2009. Boolean. Standard value is true.



Licenses

This Vista-like Ajax Calendar script is licensed under the Creative Commons Attribution- NonCommercial 3.0 License. What that means is: Use these files however you want, but don't redistribute without the proper credits and do not use this for commercial purposes.

The Vista-like Ajax Calendar requires a purchased commercial license when used commercially.


Download

vlaCalendar version 2.1.1
Compatible with MooTools version 1.2.

Download Vista-Like Ajax Calendar version 2 (.rar) 82 kB
.rar
Download Vista-Like Ajax Calendar version 2 (.zip) 88 kB
.zip
 

vlaCalendar version 2.0
Compatible with MooTools version 1.11 and 1.2b2 beta.

Download Vista-Like Ajax Calendar version 2 (.rar) 154 kB
.rar
Download Vista-Like Ajax Calendar version 2 (.zip) 161 kB
.zip
 



MooTools

MooTools is a compact, modular, object-oriented javascript framework designed for the intermediate to advanced javascript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.

VlaCalendar version 2.1.x runs MooTools version 1.2, which is included in de download. The full core download of MooTools version 1.2 is sufficient to run vlaCalendar with.

VlaCalendar version 2.0 runs on both MooTools version 1.11 and 1.2b2 beta, which are both included in de download. Both use almost every MooTools component (except the plugin components).


Javascript datepicker Calender Eightysix released