Pull to refresh

calendarLite плагин

Reading time 3 min
Views 1.8K
В одном из моих проектов мне понадобился простой javascript календарь. Но из существующих jQuery плагинов, только один «почти» соответствовал мои требованиям. Решил написать свой плагин — проба пера calendarLite plugin.

Внешний вид calendarLite

Особенности calendarLite:
  • календарь предназначен для постоянного отображения на странице (не так как разные date picker)
  • навигация по месяцам при помощи кнопок «Вперед» и «Назад»
  • гибкая настройка (возможные опции смотрите ниже)
Для работы плагина, как обычно нужно подключить jquery и сам плагин. Рассмотри основные возможности данного плагина.



Установка формата ссылки


Можно задавать формат ссылки (для anchor), например для такого рода ссылок: http://snowcore.net/events/29–05–2009 Это можно сделать при помощи linkFormat опции 

Возможные 'linkFormat' опции

  • {%dd} — дата с предшествующим нулем
  • {%d} — дата без нуля
  • {%mm} — месяц с предшествующим нулем
  • {%m} — месяц без нуля
  • {%yy} — год (два знака)
  • {%yyyy} — полный год (четыре знака)
  1. $('#cLinkFormat').calendarLite({
  2.         linkFormat: 'http://snowcore.net/events/{%dd}-{%mm}-{%yyyy}'
  3. });




Задание собственной функции-обработчика (callback)


Для клика на ячейке можно задавать свои обработчики. Callback функция принимает одно значение — выдранная дата. onSelect опция позволяет сделать это
Дополнительная опция dateFormat дает возможность установить формат даты, которая будет передаваться callback функции. Значение по умолчанию для dateFormat: '{%dd}.{%mm}.{%yyyy}'
  1. $('#cCallback').calendarLite({
  2.         dateFormat: '{%yyyy}-{%m}-{%d}',
  3.         onSelect: function(date) {
  4.                 alert(date);
  5.                 return false;
  6.         }
  7. });




Настройка внешнего вида


Используя другие опции (и стили) можно настроить внешний вид календаря:
  • showYear — если установлено в true, то вверху показывается год
  • prevArrow и nextArrow — символы для кнопок 'Предыдущий' и 'Следующий'
  • months и days — имена месяцев и дней (для мультиязычности)
  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. });



Домашняя страница плагина: calendarLite homepage

Страница проекта на сайте plugins.jquery.com: calendarLite plugin

Скачать плагин можно на Google Code: calendarLite

Tags:
Hubs:
+41
Comments 37
Comments Comments 37

Articles