Snowcore | 
05 29th, 2009| 
В одном из моих проектов мне понадобился простой javascript календарь. Но из существующих jQuery плагинов, только один “почти” соответствовал мои требованиям. Решил написать свой плагин - проба пера calendarLite plugin.
Особенности calendarLite:
- календарь предназначен для постоянного отображения на странице (не так как разные date picker)
- навигация по месяцам при помощи кнопок “Вперед” и “Назад”
- гибкая настройка (возможные опции смотрите ниже)
Использование
Для того, чтобы начать пользоваться плагином, подключаем на странице jQuery и код самого плагина.
Установка формата ссылки
Можно задавать формат ссылки (для anchor), например для такого рода ссылок: http://snowcore.net/events/29-05-2009
Это можно сделать при помощи linkFormat опции
Возможные ‘linkFormat’ опции
- {%dd} - дата с предшествующим нулем
- {%d} - дата без нуля
- {%mm} - месяц с предшествующим нулем
- {%m} - месяц без нуля
- {%yy} - год (два знака)
- {%yyyy} - полный год (четыре знака)
$('#cLinkFormat').calendarLite({
linkFormat: 'http://snowcore.net/events/{%dd}-{%mm}-{%yyyy}'
});
Задание собственной функции-обработчика (callback)
Для клика на ячейке можно задавать свои обработчики.
Callback функция принимает одно значение - выдранная дата.
onSelect опция позволяет сделать это
Дополнительная опция dateFormat дает возможность установить формат даты, которая будет передаваться callback функции.
Значение по умолчанию для dateFormat: ‘{%dd}.{%mm}.{%yyyy}’
$('#cCallback').calendarLite({
dateFormat: '{%yyyy}-{%m}-{%d}',
onSelect: function(date) {
alert(date);
return false;
}
});
Настройка внешнего вида
Используя другие опции (и стили) можно настроить внешний вид календаря:
- showYear - если установлено в true, то вверху показывается год
- prevArrow иnextArrow - символы для кнопок ‘Предыдущий’ и ‘Следующий’
- months и days - имена месяцев и дней (для мультиязычности)
$('#cStyle').calendarLite({
showYear: true,
prevArrow: '←',
nextArrow: '→',
months: ['January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'],
days: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']
});
Страница проекта на сайте plugins.jquery.com: calendarLite plugin
Скачать плагин можно здесь: calendarLite
Еще один интересный jQuery плагин: модальное окно jQuery
