calendarLite plugin

In one of my projects I needed a simple javascript calendar. But of the existing jQuery plugins, only one “almost” met my requirements. I decided to write my own plugin - try pen calendarLite plugin .







Features calendarLite:

• the calendar is designed for permanent display on the page (not as different date picker)
• month navigation using the “Forward” and “Back” buttons
• flexible settings (see options below)

For the plugin to work, as usual you need to connect the jquery and the plugin itself. Consider the main features of this plugin.





')

Setting the link format

You can set the link format (for anchor), for example for such links: http://snowcore.net/events/29–05–2009 This can be done using the linkFormat option

Possible 'linkFormat' options

• {% dd} - date with leading zero
• {% d} - date without zero
• {% mm} - month preceded by zero
• {% m} - month without zero
• {% yy} - year (two characters)
• {% yyyy} - full year (four characters)

1. $ ( '#cLinkFormat' ) . calendarLite ( { linkFormat : 'http://snowcore.net/events/{%dd}-{%mm}-{%yyyy}' } ) ;
2. $ ( '#cLinkFormat' ) . calendarLite ( { linkFormat : 'http://snowcore.net/events/{%dd}-{%mm}-{%yyyy}' } ) ;
3. $ ( '#cLinkFormat' ) . calendarLite ( { linkFormat : 'http://snowcore.net/events/{%dd}-{%mm}-{%yyyy}' } ) ;

Setting your own callback function

To click on a cell, you can specify your handlers. Callback function accepts one value - the torn-out date. The onSelect option allows you to do this.

The additional dateFormat option allows you to set the date format that will be passed to the callback function. The default dateFormat is: '{% dd}. {% Mm}. {% Yyyy}'

1. $ ( '#cCallback' ) . calendarLite ( {
2. dateFormat : '{% yyyy} - {% m} - {% d}' ,
3. onSelect : function ( date ) {
4. alert ( date ) ;
5. return false ;
6. }
7. } ) ;

Appearance customization

Using other options (and styles) you can customize the appearance of the calendar:

• showYear - if set to true, then the year is shown at the top
• prevArrow and nextArrow - symbols for the 'Previous' and 'Next' buttons
• months and days - the names of the months and days (for multilingual)

1. $ ( '#cStyle' ) . calendarLite ( {
2. showYear : true
3. prevArrow : '& larr;' ,
4. nextArrow : '& rarr;' ,
5. months : [ 'January' , 'February' , 'March' , 'April' , 'May' , 'June' ,
6. 'July' , 'August' , 'September' , 'October' , 'November' , 'December' ] ,
7. days : [ 'Mo' , 'Tu' , 'We' , 'Th' , 'Fr' , 'Sa' , 'Su' ]
8. } ) ;

Plugin home page: calendarLite homepage



Project page on plugins.jquery.com: calendarLite plugin



Download the plugin at Google Code: calendarLite