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  - a sample of the  calendarLite plugin .



Features calendarLite:

• the calendar is designed to be constantly displayed on the page (not like different date pickers)
• Monthly navigation using the “Forward” and “Back” buttons
• flexible configuration (see options below)

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

Setting Link Format

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

Possible 'linkFormat' options

• {% dd} - date with a leading zero
• {% d} - date without zero
• {% mm} - month with previous zero
• {% m} - month without zero
• {% yy} - year (two digits)
• {% yyyy} - full year (four digits)

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

Defining your own callback function

To click on a cell, you can set your own handlers. The callback function takes one value - the torn date. the onSelect option allows you to do this.
The optional dateFormat option  allows you to set the date format to be passed to the callback function. The default value for dateFormat is '{% dd}. {% Mm}. {% Yyyy}'

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

Customize Appearance

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

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

1. $('#cStyle').calendarLite({
2.         showYear: true,
3.         prevArrow: '←',
4.         nextArrow: '→',
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 homepage : calendarLite homepage

Project page on plugins.jquery.com: calendarLite plugin

You can download the plugin on Google Code: calendarLite