VLA Calendar version v2

(No Ratings Yet)

Loading ...

595 views

A web version of the slick and profound Windows Vista taskbar calendar.

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.

Features:
* Authentic Vista look-and-feel
o Quick navigation by jumping back and forth between months, years and decades without drop-down boxes
o Smooth transition animations
* Customizable features
* Lightweight
* Authentic Vista look-and-feel
o Quick navigation by jumping back and forth between months, years and decades without drop-down boxes
o 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
o Easily changeable date labels (e.g. different languages)
o Easily stylable. Styles are created on top of the general style; the download include two example styles
o Both normal and datepicker calendar can be instantiated multiple times
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/.

d>
        <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>

            <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>

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

[/code]

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 {}.

Demo: http://dev.base86.com/scripts/vista-like_ajax_calendar_version_2.html#examples

Download: http://download.base86.com/?file=vlaCalendar.v2.1.1.zip

Source: http://dev.base86.com/scripts/vista-like_ajax_calendar_version_2.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:

VLA Calendar version 2.0 The Vista-like Ajax Calendar (vlaCalendar) version 2 is a unobtrusive...
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...
DatePicker and Calender Eightysix Calendar Eightysix is an unobtrusive developer friendly calendar and datepicker,...
JQuery Calendar Hot Script The jQuery Datepicker project has been donated to the jQuery...