Calender Eightysix documentation and examples

Calendar Eightysix is an unobtrusive developer friendly calendar and datepicker, offering a better user experience for date related functionalities. The successor of the popular Vista-like Ajax Calendar!

I'd appreciate hearing from you if you're using this script. Comments and feature requests are more than welcome in the release article.
 

 
 
 
 

Key features:

  • Quick navigation by jumping back and forth between months, years and decades without drop-down boxes
  • Highly and easily customizable
  • Packed with three themes
  • Lightweight (9.5 kB compressed)
  • Purely javascript; AJAX-less and no PHP needed


Calendar Eightysix has been tested on:

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

Page contents

 

 

Changelist

Version 1.0.1

  • linkWithInput weekday render bug fixed. If a textinput field was changed the weekdays would render incorrecly;
  • linkWithInput empty input bug fixed. When a textfield was emptied by the user a default date of 1 January 1970 is choosen. This is changed to the current date;
  • Added new function viewDate, with which you can set the calendars date easily.

 

Usage

Calendar Eightysix version 1 has been developed for MooTools version 1.2.3, and works perfecly with the latest MooTools installment 1.2.4 which is included in the latest download. Lower versions of MooTools haven't been tested, but anything near the 1.2 release would do.

To get the calendar to work include the javascript files

  • calendar-eightysix-v1.0.1.js
  • mootools-1.2.4-core.js
    and
  • mootools-1.2.4.2-more.js

within the head of your HTML document. For the best result use a XHTML doctype, preferably XHTML 1.0 Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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 js/ but they could ofcourse be moved to where ever it suit your needs.

Same story for the stylesheets. Include calendar-eightysix-default.css and/or other theme style files also within the head of your HTML document. The default path in which they reside is css/.

<head>
    [...]
    <script type="text/javascript" src="js/mootools-1.2.4-core.js"></script>
    <script type="text/javascript" src="js/mootools-1.2.4.2-more.js"></script>
    <script type="text/javascript" src="js/calendar-eightysix-v1.0.1.js"></script>
    <link type="text/css" media="screen" href="css/calendar-eightysix-default.css" rel="stylesheet" />
    [...]
</head>

Instantiation of the calendar class(es) 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() {
            new CalendarEightysix('targetID');
        });
    </script>
    [...]
</head>

Calendar Eightysix has 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 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.

 

Examples

Example I
  Standard datepicker.
Show code
Example II
  Datepicker week starts on Monday. Different slide transition and date format. The datepicker is draggable.
Show code
Example III
 
  Datepicker with Saterday and Sunday as excluded weekdays. The calendar icon toggles the datepicker.
Show code
Example IV
  Datepicker with a default date of December 1st 2012 and with first and second Christmas day as excluded dates.
Show code
Example V
  Datepicker with minimum date of 'tomorrow', so only dates in the future can be picked. The default date is set on 'next Wednesday'. Theme is Default, red style.
Show code
Example VI
  Datepicker with decade as the default view and Vista theme. User input is disallowed.
Show code
Example VII
  Datepicker with year as the default view and OSX Dashboard theme. Position is bottom left.
Show code
Example VIII
 
  Datepicker with a middle top position and different date format. Target is a div element instead of an input text element.
Show code
Example IX
  Datepicker with a custom pick function, which sets the month and year drop-downs. Date range from January 1st 2010 to December 31st 2014.
Show code
Example X
Dutch (nl-NL)
German (de-DE)
  Change the language of all the datepickers by clicking one of the buttons above. See the localization paragraph for some notes.
Show code

 

 

 

 

Arguments

new CalendarEightysix(string target [, object options])
target The first argument is the ID of an HTML element (or alternatively a reference to a HTML DOM element). It most cases it will be the ID of an input text element. For the basic and alternative usages of the target argument see the examples.
options Calendar Eightysix has 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

 Option Type Default Description
slideDuration int 500 The duration of the slide transition in milliseconds (left to right and visa versa).
fadeDuration int 200 The duration of the fade transition in milliseconds (month to year to decade and visa versa).
toggleDuration int 200 The duration of the show and hide transitions in milliseconds. Show and hide animations of the calendar are disabled for IE browsers because of their lousy png image rendering.
fadeTransition Fx.Transitions linear The fade transition. All transitions that are available can be found in the MooTools documentation.
slideTransition Fx.Transitions Quart.easeOut The slide transition.
prefill boolean true Determines whether or not the target element is filled with a date in the initialization process.
defaultDate string null Determines the initial date. Overrules the linkWithInput value.
linkWithInput boolean true Determines if the target is linked with the datepicker. E.g. when you manually change 2008 to 2009, the datepicker will also change to 2009.
If the target contains a value at start, the value will be used to set the initial date.
theme string 'default' Sets the theme of the calendar. Themes that come with the download are default, vista and osx-dashboard.
defaultView string 'month' Determines the default view of the calendar. Possible values are month, year and decade.
startMonday boolean false Determines if the calendar week starts on Monday or Sunday.
alwaysShow boolean false Determines wether or not the calendar is always visible.
injectInsideTarget boolean false Determines whether or not the calendar will be injected into the target.
format string '%n/%d/%Y' The format of the ouput which will be set in the target element. See the paragraph Date formatting.
alignX string 'right' The horizontal position of the datepicker according to the target element. Possible values are left, middle and right.
alignY string 'ceiling' The vertical position of the datepicker according to the target element. Possible values are top, ceiling and bottom.
offsetX int 0 The horizontal offset of the datepicker.
offsetY int 0 The vertical offset of the datepicker.
 draggable boolean false Determines if the calendar is draggable or not. The drag handle is the calendar header.
 pickable boolean true Determines if dates in the calendar are pickable or not.
 toggler string null Determines if the datepicker is toggled with an other element instead of that it opens when clicked on or focussed on the target element itself.
 pickFunction function $empty Function that will be called when a date is picked. A javascript Date object will be passed as a parameter.
 disallowUserInput boolean false Determines if the user can change the value in the input (text) element. Disables keydown and contextmenu.
 minDate string null Minimum date allowed to be picked. Be sure to set this to 1/1/1970 when working with Unix timestamps.
 maxDate string null Maximum date allowed to be picked.
 excludedWeekdays int array null Determines which weekdays cannot be picked in the calendar. Sunday is 0, Monday is 1 ... Saterday is 6. E.g. [0, 6] for disallowing Sundays and Saturday picking.
 excludedDates string array null Determines which dates cannot be picked in the calendar. E.g. ['12/25/2010', '12/26/2010'] if you want to exclude the Christmas days.
 createHiddenInput boolean false Determines if a hidden input element is created. This element will also be updated with the picked date. Handy for parsing a .
 hiddenInputName string 'date' The name of the hidden input element.
 hiddenInputFormat string '%t' The format of the value passed to the hidden input element.See the paragraph Date formatting.

 

Functions

//Example function usage
var calendar = new CalendarEightysix('inputElement');
calendar.setDate('1/1/2001');
setDate New in version 1.0.1. Set the viewdate of the calendar, and rerender it with this new date. First argument is a either a string, which will be parsed, or Date object. Second argument is a boolean which picks the new date or not (optional, and defaults to true).

 

Localization

Calendar Eightysix is localizable via MooTools.lang. MooTools.lang is a powerfull class which makes localization very easy. The default language is en-US, which is the only language included.

Adding new languages is quite easy. Here is a Dutch localization example:

MooTools.lang.set('nl-NL', 'Date', {
	months: ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni', 'Juli', 'Augustus', 'September', 'Oktober', 'November', 'December'],
	days: ['Zondag', 'Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag'],
	dateOrder: ['date', 'month', 'year', '/']
});

MooTools.lang.setLanguage('nl-NL');

Note that dateOrder has affect on the date parsing. The en-US order is month, date, year, while the nl-NL order is date, month, year. '1/12/2009' will be parsed to January 1st 2009 with en-US localization and to December 12st 2009 with nl-NL localization.

Various languages are included in the latest MooTools installment. For MooTools version 1.2.3 various languages can be downloaded here.

 

Date string parsing

Various options require a date, in the form of a string. The date parse function will recognize a lot of date strings such as '10/12/1982', '2007-06-08 16:34:52' and '24th May, 2007' (more examples). Besides these ordinary strings there are more powerful parsers which can parse strings such as 'tomorrow' and 'next Wednesday' (more examples).

 

Date formatting

The date output can be completely be customized à la the PHP date function. Use the keys below with percent signs to get a desired output. For example '%b %d%o %Y' wil output 'Jan 1st 2010'.

a Short day ("Mon", "Tue")
A Full day ("Monday")
b Short month ("Jan", "Feb")
B Full month ("January")
c The full date to string ("Mon Dec 10 2007 14:35:42 GMT-0800 (Pacific Standard Time)"
d The date to two digits (01, 05, etc)
H The hour to two digits in military time (24 hr mode) (01, 11, 14, etc)
I The hour in 12 hour time (1, 11, 2, etc)
j The day of the year to three digits (001 is Jan 1st)
m

The numerical month to two digits (01 is Jan, 12 is Dec)
M The minutes to two digits (01, 40, 59)
o The ordinal of the day of the month in the current language ("st" for the 1st, "nd" for the 2nd, etc.)
p The current language equivalent of either AM or PM
S The seconds to two digits (01, 40, 59)
U The week to two digits (01 is the week of Jan 1, 52 is the week of Dec 31)
w The numerical day of the week, one digit (0 is Sunday, 1 is Monday)
x The date in the current language prefered format. en-US: %m/%d/%Y (12/10/2007)
X The time in the current language prefered format. en-US: %I:%M%p (02:45PM)
y The short year (two digits; "07")
Y The full year (four digits; "2007")
T The GMT offset ("-0800")
Z The time zone ("GMT")


Besides these keys there are three other keys you can use (implemented via CalendarEightysix.format()):

D The date to one digit
n The numerical month to one digit
t Unix timestamp

  

Licenses

This Calendar Eightysix 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.

Calendar Eightysix requires a purchased commercial license when used commercially.

 

Download

Calendar Eightysix version 1.0.1
Compatible with MooTools version 1.2.3 and 1.2.4.

Download Calendar Eightysix version 1.0.1 (.rar) 130 kB
.rar
Download Calendar Eightysix version 1.0.1 (.zip) 135 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.

Calendar Eightysix version 1.0 runs on MooTools core version 1.2.3 and more version 1.2.3.1, which are included in de download. Only the nessesary plugins are included in both core and more.

Calendar Eightysix uses the following MooTools parts:

MooTools Core

  • Core - Browser
  • Native (all)
  • Class (all)
  • Element (all)
  • Utilities - Selectors, DomReady
  • Fx - Fx, Fx.CSS, Fx.Tween, Fx.Transitions
     

MooTools More

  • Core - Lang
  • Native - Date, Date.extras
  • Drag - Drag (optional)
  • Localization - Date.English.US