В одном из моих проектов мне понадобился простой javascript календарь. Но из существующих jQuery плагинов, только один «почти» соответствовал мои требованиям. Решил написать свой плагин — проба пера calendarLite plugin.
Особенности calendarLite:
Можно задавать формат ссылки (для anchor), например для такого рода ссылок: http://snowcore.net/events/29–05–2009 Это можно сделать при помощи linkFormat опции
Для клика на ячейке можно задавать свои обработчики. Callback функция принимает одно значение — выдранная дата. onSelect опция позволяет сделать это
Дополнительная опция dateFormat дает возможность установить формат даты, которая будет передаваться callback функции. Значение по умолчанию для dateFormat: '{%dd}.{%mm}.{%yyyy}'
Используя другие опции (и стили) можно настроить внешний вид календаря:
Домашняя страница плагина: calendarLite homepage
Страница проекта на сайте plugins.jquery.com: calendarLite plugin
Скачать плагин можно на Google Code: calendarLite
Особенности calendarLite:
- календарь предназначен для постоянного отображения на странице (не так как разные date picker)
- навигация по месяцам при помощи кнопок «Вперед» и «Назад»
- гибкая настройка (возможные опции смотрите ниже)
Установка формата ссылки
Можно задавать формат ссылки (для 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']
- });
Домашняя страница плагина: calendarLite homepage
Страница проекта на сайте plugins.jquery.com: calendarLite plugin
Скачать плагин можно на Google Code: calendarLite