DatePicker and Calender Eightysix

(No Ratings Yet)

Loading ...

314 views

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!

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
Usage

Calendar Eightysix version 1.0 has been developed with MooTools version 1.2.3. Lower versions of MooTools haven’t been tested.

To get the calendar to work include the javascript files

* calendar-eightysix-v1.0.js
* mootools-1.2.3-core.js
and
* mootools-1.2.3.1-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.3-core.js"></script>
    <script type="text/javascript" src="js/mootools-1.2.3.1-more.js"></script>
    <script type="text/javascript" src="js/calendar-eightysix-v1.0.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.

Demo: http://dev.base86.com/scripts/datepicker_calendar_eightysix.html
Download: http://download.base86.com/?file=calendar-eightysix-v1.00.zip
Source: http://dev.base86.com/scripts/datepicker_calendar_eightysix.html

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/stumbleupon_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/delicious_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/blinklist_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/furl_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/technorati_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/magnolia_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/google_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/myspace_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/facebook_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/sphinn_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/mixx_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/twitter_32.png

Related Listings:

Mootools Ajax Calendar (Vista-Like) Vista-like Ajax calendar is an unobtrusive, slick calendar script which...
Vista-like Ajax Calendar The Vista-like Ajax Calendar is what the name says: a...
VLA Calendar version 2.0 The Vista-like Ajax Calendar (vlaCalendar) version 2 is a unobtrusive...
VLA Calendar version v2 A web version of the slick and profound Windows Vista...
DatePicker v4 Ajax Script My 3rd and final attempt writing a datePicker (calendar) that...

Do you like this post?

2 Comments »

Tweets that mention DatePicker and Calender Eightysix -- Topsy.com Says:
October 16th, 2009 at 11:38 am

[...] This post was mentioned on Twitter by Open4G Media and jQuery Tips, Web Development News. Web Development News said: DatePicker and Calender Eightysix: Calendar Eightysix is an unobtrusive developer friendly calendar and datepick.. http://bit.ly/ESOIk [...]
DatePicker and Calender Eightysix Scripts Rss Says:
December 5th, 2009 at 10:34 pm

[...] rest is here: DatePicker and Calender Eightysix By admin | category: Object | No Related [...]

RSS feed for comments on this post. TrackBack URL