jQuery calendarLite plugin

В одном из моих проектов мне понадобился простой javascript календарь. Но из существующих jQuery плагинов, только один “почти” соответствовал мои требованиям. Решил написать свой плагин – проба пера calendarLite plugin.

Особенности calendarLite:

  • календарь предназначен для постоянного отображения на странице (не так как разные date picker)
  • навигация по месяцам при помощи кнопок “Вперед” и “Назад”
  • гибкая настройка (возможные опции смотрите ниже)

Использование

Для того, чтобы начать пользоваться плагином, подключаем на странице jQuery и код самого плагина.

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

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

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

  • {%dd} – дата с предшествующим нулем
  • {%d} – дата без нуля
  • {%mm} – месяц с предшествующим нулем
  • {%m} – месяц без нуля
  • {%yy} – год (два знака)
  • {%yyyy} – полный год (четыре знака)

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

Для клика на ячейке можно задавать свои обработчики.
Callback функция принимает одно значение – выдранная дата.
onSelect опция позволяет сделать это
Дополнительная опция dateFormat дает возможность установить формат даты, которая будет передаваться callback функции.
Значение по умолчанию для dateFormat: ‘{%dd}.{%mm}.{%yyyy}’

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

Используя другие опции (и стили) можно настроить внешний вид календаря:

  • showYear – если установлено в true, то вверху показывается год
  • prevArrow иnextArrow – символы для кнопок ‘Предыдущий’ и ‘Следующий’
  • months и days – имена месяцев и дней (для мультиязычности)


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

Скачать плагин можно здесь: calendarLite

Сказать спасибо можно на этот кошелек Z206432781821 🙂

  • А че, очень даже крутой плагинчик. Молодец

  • Ты меня опередил, я уже сам подумывал написать свой календарь. В общем, огромное тебе человеческое спасибо)

  • admin

    Старался 🙂

  • sveneld

    а выбор текущей даты? очень полезно иногда перескочить на сейчас с какого то древнего года

  • Сергей

    Отличный календарь, давно ищу альтернативу datapiker, но там не хватает вывода номера недель (по счету с начала года). А как у вас с этим?

  • admin

    @sveneld:
    такое тоже можно сделать – вешаете на любую кнопку onclick, и вызываете $(‘#someDiv’).calendarLite();

  • admin

    @Сергей:
    Да, интересная идея на счет номера недели. Пожалуй, сделаю еще одну опцию, при помощи которой можно будет показывать номер недели.

  • а можно в гуглокод не только архив, но и сами js, что бы можно было подключать календарь куда угодно прям с гугла.
    правда тут еще css подключать надо…
    но он весит всего-ничего, можно и в коде страницы его написать

  • 13i

    Еще одно дополнение очень бы хотелось: чтобы можно было в настройках передавать массив дат, которые можно делать ссылками.
    Такое может понадобиться и в блоге и в афише – чтобы люди НЕ жали по ссылке, если ничего по этой дате НЕТ.

    Заранее большое спасибо.
    Кстати, очень хороша реализация!

  • Vottеl

    А можно добавить опцию выбора селектами года, месяца, часа и минуты? Ну и возможность datepicking’a все же не помешала бы 🙂 получится отличный date[time]picker, просто супер.

  • admin

    Пофиксил один баг, и сделал небольшой рефакторинг в пользу производительности – залил новую версию 0.1.10

  • Незнаю, кому надо или нет…

    Я пару строк вписал чтобы при передаче определенной даты в календаре сразу был выбран нужный месяц и нужный день отмечен как текущий (помимо текущей даты).

    Пишите… Вышлю…
    или может автор в релиз возмет =))))

  • admin

    @mrSmall:
    Хорошая идея! Обязательно возьму ее в слеующий релиз!
    Спасибо 🙂

  • Сейчас вышлю…

    у меня с IE проблемы, даже демки из архива актуального не показывают календарь. НО календарь в твоем блоге показывается… вобщем пока не добавил в код после body не работало нифига. У тебя версия min.js 0.1.9, а в архиве 0.1.10…

    Тестил на IE7.

  • Сорри, предыдущий пост не полный, так скрипт тэг еще был… вобщем пока в код не добавишь ссылку на версию с твоего сервера – не работает.

  • Егор

    Спасибо, очень помогло при работе.

    0.1.10 не работает в ie8, пришлось испольщовать 0.1.9

    Добавил фуункционала, т.е. подгрузку дат.

  • admin

    Сделал update (теперь работает в IE) – доступна новая версия 0.1.11, качаем здесь

  • Спасибо, остановился на вашем плагние. Не хотелось использовать UI плагин – потому, что только само ядро UI весит больше 100 Kb.

  • peroon

    Так а в релизе .11 уже можно конкретную дату изначально выставить? Если да, то каким образом?

  • Спасибо огромное, как раз нужна была такая штука.
    Думал сам написать, а теперь вот вы облегчили жизнь еще одному человеку =)

  • @peroon: можно выставить только конкретный год и месяц, день пока еще нет. Но в следующих релизах сделаю данную опцию, спасибо за совет.

  • Можешь посмотреть этот код – тут форматирование даты как в функции strftime().
    Привязки к какой либо библиотеке нет. Как руки дойдут перепишу для jQuery. ТОлько вторую неделю юзаю этот замечательный фрамворк )))

  • Dim

    Привет, хороший календарь, у меня вопросы по внешему виду, можно ли вместо символов стрелок, рисунок вставить?

  • Pingback: calendarLite jQuery Plugin | jQuery Wisdom()

  • Хороший календарь , для тех кто нуждается в дефолтовой дате то допишите
    if (o.defaultDate != null && o.defaultDate != undefined)
    {
    var today = new Date(o.defaultDate);
    var srcDate = new Date(o.defaultDate);
    } else {
    var today = new Date();
    var srcDate = new Date();
    }
    вместо

    var today = new Date();
    var srcDate = new Date();

    и в ф-ии $.fn.calendarLite.defaults добавте

    /**
    * Format date string – “mm dd yyyy”
    */

    defaultDate: null,

  • Joi

    А реально сделать что бы он если были события в определенную дату показывал другим цветом???

  • Нету ничего нереального 😉

  • Joi

    Логично, просто для мня это темный лес

  • Dim

    Здравствуйте Snowcore ! Спасибо за ваши труды!

    Что вот по этому озвученному выше дополнению?

    “Еще одно дополнение очень бы хотелось: чтобы можно было в настройках передавать массив дат, которые можно делать ссылками.
    Такое может понадобиться и в блоге и в афише – чтобы люди НЕ жали по ссылке, если ничего по этой дате НЕТ.”

  • Dim

    style=”width: 200px;” – вот этот мусор где убить?

  • Dim

    div style=”width: 0px;” class=”monthName”

  • Dim

    сорри! все разобрался

  • Val

    Если попытаться, чтобы календарь появлялся по клику – вся шапка календаря ‘гуляет’.


    show calendar

  • Val

    Как вписать высылаемый код?
    Стандартное вложение сразу ничинает выполняться.

  • Vitaly

    Очень хороший плагин, интересует предусмотрен ли в нем вот такой формат вставки: dd mm yyyy час:минуты:секунды?

  • El

    имхо в туду надо добавить:
    callback onChange: function(month, year) – при смене месяца
    Hightlite: array of date
    массив выделенных дат
    links: ‘all’|’hightlited’|’none’
    добавлять сылки к датам: всем/выделеным/без ссылок

    будет время попробую сам реализовать, хороший календарик штука нужная 🙂
    спасибо большое Snowcore

  • WilderMesser

    Добавил функциональность выделенных дат как в предыдущем посте от El.Если укажете правильный способ – поделюсь изменениями

  • to WilderMesser
    Мне не совсем понятно где именно можно добавлять массив дат которые с событиями, чтобы только дни с какими ни будь новостями были ссылками, а не все подряд

  • WilderMesser

    В моей версии надо просто передать массив hlDates: [] в качестве параметра. Это моя доработка и в исходной версии такой функциональности нет

  • Макс

    Очень помог плагин. Спасибо!

  • Timur

    где и как установить для календаря кодировку charset=”windows-1251″ т.к. на сайте получаеться не соответствие кода в MySQL

  • Timur

    Уже разобрался.