В одном из моих проектов мне понадобился простой 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
Май 29th, 2009 at 2:14 пп
А че, очень даже крутой плагинчик. Молодец
Май 29th, 2009 at 2:16 пп
Ты меня опередил, я уже сам подумывал написать свой календарь. В общем, огромное тебе человеческое спасибо)
Май 29th, 2009 at 2:18 пп
Старался :)
Июнь 1st, 2009 at 5:12 пп
а выбор текущей даты? очень полезно иногда перескочить на сейчас с какого то древнего года
Июнь 1st, 2009 at 7:02 пп
Отличный календарь, давно ищу альтернативу datapiker, но там не хватает вывода номера недель (по счету с начала года). А как у вас с этим?
Июнь 1st, 2009 at 7:48 пп
@sveneld:
такое тоже можно сделать - вешаете на любую кнопку onclick, и вызываете $(’#someDiv’).calendarLite();
Июнь 1st, 2009 at 7:52 пп
@Сергей:
Да, интересная идея на счет номера недели. Пожалуй, сделаю еще одну опцию, при помощи которой можно будет показывать номер недели.
Июнь 2nd, 2009 at 5:55 дп
а можно в гуглокод не только архив, но и сами js, что бы можно было подключать календарь куда угодно прям с гугла.
правда тут еще css подключать надо…
но он весит всего-ничего, можно и в коде страницы его написать
Июнь 2nd, 2009 at 7:05 дп
Еще одно дополнение очень бы хотелось: чтобы можно было в настройках передавать массив дат, которые можно делать ссылками.
Такое может понадобиться и в блоге и в афише - чтобы люди НЕ жали по ссылке, если ничего по этой дате НЕТ.
Заранее большое спасибо.
Кстати, очень хороша реализация!
Июнь 2nd, 2009 at 7:19 дп
А можно добавить опцию выбора селектами года, месяца, часа и минуты? Ну и возможность datepicking’a все же не помешала бы :) получится отличный date[time]picker, просто супер.
Июнь 2nd, 2009 at 11:57 пп
Пофиксил один баг, и сделал небольшой рефакторинг в пользу производительности - залил новую версию 0.1.10
Июнь 6th, 2009 at 1:42 дп
Незнаю, кому надо или нет…
Я пару строк вписал чтобы при передаче определенной даты в календаре сразу был выбран нужный месяц и нужный день отмечен как текущий (помимо текущей даты).
Пишите… Вышлю…
или может автор в релиз возмет =))))
Июнь 6th, 2009 at 1:53 пп
@mrSmall:
Хорошая идея! Обязательно возьму ее в слеующий релиз!
Спасибо :-)
Июнь 6th, 2009 at 8:26 пп
Сейчас вышлю…
у меня с IE проблемы, даже демки из архива актуального не показывают календарь. НО календарь в твоем блоге показывается… вобщем пока не добавил в код после body не работало нифига. У тебя версия min.js 0.1.9, а в архиве 0.1.10…
Тестил на IE7.
Июнь 6th, 2009 at 8:34 пп
Сорри, предыдущий пост не полный, так скрипт тэг еще был… вобщем пока в код не добавишь ссылку на версию с твоего сервера - не работает.
Июнь 11th, 2009 at 4:54 дп
Спасибо, очень помогло при работе.
0.1.10 не работает в ie8, пришлось испольщовать 0.1.9
Добавил фуункционала, т.е. подгрузку дат.
Июнь 24th, 2009 at 2:57 пп
Сделал update (теперь работает в IE) - доступна новая версия 0.1.11, качаем здесь
Июль 24th, 2009 at 1:24 пп
Спасибо, остановился на вашем плагние. Не хотелось использовать UI плагин - потому, что только само ядро UI весит больше 100 Kb.
Июль 29th, 2009 at 3:15 пп
Так а в релизе .11 уже можно конкретную дату изначально выставить? Если да, то каким образом?
Июль 31st, 2009 at 8:47 дп
Спасибо огромное, как раз нужна была такая штука.
Думал сам написать, а теперь вот вы облегчили жизнь еще одному человеку =)
Август 11th, 2009 at 8:59 дп
@peroon: можно выставить только конкретный год и месяц, день пока еще нет. Но в следующих релизах сделаю данную опцию, спасибо за совет.
Сентябрь 16th, 2009 at 11:36 дп
Можешь посмотреть этот код - тут форматирование даты как в функции strftime().
Привязки к какой либо библиотеке нет. Как руки дойдут перепишу для jQuery. ТОлько вторую неделю юзаю этот замечательный фрамворк )))
Сентябрь 21st, 2009 at 3:42 пп
Привет, хороший календарь, у меня вопросы по внешему виду, можно ли вместо символов стрелок, рисунок вставить?
Сентябрь 25th, 2009 at 7:13 пп
[…] is widgetlike.You can assign custom callback, date format, link format and other things. Web Site Demo AKPC_IDS += “357,”;Popularity: unranked [?] Share and […]
Октябрь 1st, 2009 at 2:07 пп
Хороший календарь , для тех кто нуждается в дефолтовой дате то допишите
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,
Октябрь 6th, 2009 at 8:24 дп
А реально сделать что бы он если были события в определенную дату показывал другим цветом???
Октябрь 6th, 2009 at 9:50 дп
Нету ничего нереального ;-)
Октябрь 8th, 2009 at 8:25 дп
Логично, просто для мня это темный лес
Октябрь 21st, 2009 at 11:00 дп
Здравствуйте Snowcore ! Спасибо за ваши труды!
Что вот по этому озвученному выше дополнению?
“Еще одно дополнение очень бы хотелось: чтобы можно было в настройках передавать массив дат, которые можно делать ссылками.
Такое может понадобиться и в блоге и в афише - чтобы люди НЕ жали по ссылке, если ничего по этой дате НЕТ.”
Октябрь 21st, 2009 at 3:46 пп
style=”width: 200px;” - вот этот мусор где убить?
Октябрь 21st, 2009 at 3:47 пп
div style=”width: 0px;” class=”monthName”
Октябрь 21st, 2009 at 3:49 пп
сорри! все разобрался
Декабрь 9th, 2009 at 3:49 дп
Если попытаться, чтобы календарь появлялся по клику - вся шапка календаря ‘гуляет’.
show calendar
Декабрь 9th, 2009 at 3:54 дп
Как вписать высылаемый код?
Стандартное вложение сразу ничинает выполняться.
Февраль 13th, 2010 at 4:35 дп
Очень хороший плагин, интересует предусмотрен ли в нем вот такой формат вставки: dd mm yyyy час:минуты:секунды?
Апрель 7th, 2010 at 7:26 дп
имхо в туду надо добавить:
callback onChange: function(month, year) - при смене месяца
Hightlite: array of date
массив выделенных дат
links: ‘all’|'hightlited’|'none’
добавлять сылки к датам: всем/выделеным/без ссылок
будет время попробую сам реализовать, хороший календарик штука нужная :)
спасибо большое Snowcore
Май 6th, 2010 at 6:21 дп
Добавил функциональность выделенных дат как в предыдущем посте от El.Если укажете правильный способ - поделюсь изменениями
Июнь 19th, 2010 at 10:56 пп
to WilderMesser
Мне не совсем понятно где именно можно добавлять массив дат которые с событиями, чтобы только дни с какими ни будь новостями были ссылками, а не все подряд
Июль 13th, 2010 at 5:28 дп
В моей версии надо просто передать массив hlDates: [] в качестве параметра. Это моя доработка и в исходной версии такой функциональности нет