calendarLite плагин

    В одном из моих проектов мне понадобился простой 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

    Поделиться публикацией

    Похожие публикации

    Комментарии 37
      0
      Есть один минус… в код плагина не заглядывал, поэтому хочу узнать: это у вас в качестве примера все календари на странице используют одну переменную?

      Ибо если в одном из первых календарей изрядно полистать месяца, то при клике на последнем следующим месяцем внезапно окажется какой-нибудь Август 2033 года =)

      Или же это баг, который надо поправить?
        +1
        Большое спасибо за багрепорт! Сейчас пофиксим…
          +1
          поправлено, плюс рефакторинг в пользу производительности
          +1
          здорово. я в свое время брала за основу datepicker и переделывала под свои нужды. надо было выводить календарик с выделенными датами новостей.

          вопрос есть по аяксу. возможно и глупый, но я уже не знаю где искать ответ. на рабочем серваке (php5) возникают проблемы с переменной $_REQUEST. причем что интересно, в одном проекте — все отлично отрабатывает, а в другом — не пашет.
            +1
            datepicker — хороший плагин, да вот только «переделка под свои нужды» занимает еще больше времени, чем написание нового плагина :)
              +1
              Могу помочь,
              только давайте не будем флудить — напишите мне в личку.
                0
                :) ну просто нет слов. Ну я просто не могу не написать. Это похоже знаете на что.

                У Зины(18 лет) возникают проблемы с головой — она болит, причем, что интересно, У Маши не болит. :)

                Хотя бы конкретней скажите, какие у вас проблемы с этой переменной.
                  0
                  невооруженным взглядом always_populate_raw_post_data = Off
                    0
                    не ругайтесь на меня :)
                    проблема в том, что в одном проекте, все отрабатывает, а в другом в переменную тупо ничего не записывается. хотя скрипт отрабатывает без проблем — формирует результат — пытается записать в $_REQUEST, которая потом должна бы передаваться в js. работаю с JsHttpRequest.
                  –4
                  еще бы на prototype его перевести
                    0
                    можем и на prototype, но не сегодня :D
                    +2
                    Совсем недавно понадобился примерно такой JS-календарь — легковесный с кастомизированными ссылками. А как релизовал собственными силами (не плагин) — появилось готовое решение! Но в моей задачке у календаря должны были быть селекты для выбора месяца и года.
                      0
                      к этому календарю тоже можно прикрепить селекты — на событие onchange можно вызывать $('#someDiv').calendarLite({month: выбранный_месяц, year: выбранный_год})
                        0
                        жаль, что нельзя диапазоны выбирать, а то мне как раз такой нужен был недавно, правда я нашел :-)
                          0
                          и…
                            0
                            что и?
                          +1
                          Было бы еще хорошо поле для времени ввести
                            0
                            вы имеете ввиду отображать просто как часы?
                              +1
                              нееееее...., и календарик и два маленьких поля под ним час и минута, если реализуете — это будет супер «calendarHard» (упс))
                                0
                                Именно это я и имел ввиду ;)
                            +2
                            Чем же Вам ui.datepicker не угодил?) Он умеет не только вываливаться, но и просто располагаться )))
                              0
                              только ещё хорошо бы режим с двумя отдельными выбиралками для года и месяца. иначе использовать в качестве выбиралки даты рождения (и подобных дат) не представляется возможным (стоит ли говорить насколько это широкий пласт потенциального использования)
                                +1
                                пользуюсь этим календариком
                                www.dynarch.com/projects/calendar/
                                и доволен им.
                                0
                                Как разминка нормально. :)
                                  0
                                  Выглядит симпатично, но притормаживает в FF3. Есть мнение, что это из-за перерисовки таблицы посредством $.html()
                                    0
                                    Да, этот метод достаточно ресурсоемкий… при рефакторинге попробую что-то более шустрое.
                                    0
                                    Я в своё время портировал paginator3000 от karaboz на jQuery и столкнулся с этой проблемой. Использование конструкции
                                    <code>$(td)[0].innerHTML = html;</code>
                                    вместо
                                    <code>$(td).html(html);</code>
                                    вернуло былое быстродействие :)
                                      0
                                      простите :(
                                        0
                                        Абсолютно с вами согласен!
                                        0
                                        Не очень удобно со стилями сделано.
                                        Если у меня уже определён стиль table — надо что-то переделывать. название table — уж очень влоб.
                                        хоть бы calLiteTable :)
                                          0
                                          да, вы правы, в слеующих релизах обязательно поменяю!
                                          0
                                          Сделал update до версии 0.1.11 — теперь в IE нормально работает
                                            +1
                                            отлично! а то я уже думал сам в код лезть :)
                                            0
                                            прошу прощения за нестабильную работу своего блога в последнюю неделю, хостер в новый дата центр переезжал…
                                              0
                                              Спасибо, не представляете как выручили ))
                                                0
                                                На здоровье ;)

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

                                              Самое читаемое