Демо
Календарь с событиями
Календарь на русском, первый день - понедельник. Вывод годов с 2010 по 2020.
Отображение событий: 3 февраля 2017 (2 события), 20 февраля 2017 (1 событие).
$('#calendar-1').bitroidCalendarEv({
lang: "ru",
sundayFirst: false,
years: "2010-2020",
format: "DD.MM.YYYY",
showEventBlock: true,
events : [
{
day : "03",
month : "02",
year : "2017",
event_description : "Описание события",
event_title : "Заголовок для события",
event_body : "Описание для события"
},
{
day : "03",
month : "02",
year : "2017",
event_description : "Описание события 2",
event_body : "Событие 2!"
},
{
day : "20",
month : "02",
year : "2017",
event_description : "Описание события",
event_body : "Событие!"
}
],
containers : {
events : ".calendarev-events-container"
}
});
Календарь без событий
Календарь на русском, первый день - воскресенье. Вывод годов с 2010 по 2020.
$('#calendar-2').bitroidCalendarEv({
lang: "en",
sundayFirst: true,
years: "2010-2020",
showEventBlock: false
});
Календарь на английском
Календарь на английском, первый день - воскресенье. Вывод годов с 2017 по 2050.
$('#calendar-3').bitroidCalendarEv({
lang: "en",
sundayFirst: true,
years: "2017-2050",
showEventBlock: false
});
Календарь на японском
Календарь на японском. Первый день недели - воскресенье. Возвращает дату в локализованом формате.
Доступный диапазон лет: текущий год минус 20 лет.
По клику на день отображает всплывающее окно с датой в формате, которая указана скриптом (LLLL).
$('#calendar-4').bitroidCalendarEv({
lang: "ja",
years: "20",
format: "LLLL",
onClick: function(date){
alert("onClick: " + date);
}
});
Подключение
Для использования CalendarEvents потребуется подключить библиотеку JQuery 1.9+ и Moments.js 2.1+.
В шапке сайта подключите файл стилей bitroidCalendarEv.css - в нем находятся стили календаря.
Также необходимо подключить следующие скрипты: библиотеку jQuery выше версии 1.9, moment-with-locales.min.js, bitroidCalendarEv.js
<link rel="stylesheet" type="text/css" href="css/bitroidCalendarEv.css"> <!-- стили -->
<script type="text/javascript" src="js/jquery.min.js"></script> <!-- библиотека jquery -->
<script type="text/javascript" src="js/moment-with-locales.min.js"></script> <!-- библиотека moment-with-locales.min.js -->
<script type="text/javascript" src="js/bitroidCalendarEv.js"></script> <!-- плагин CalendarEvents -->
Создайте контейнер, в котором будет находиться календарь.
<div id="calendar-id" class="my-class"></div>
Инициализируйте календарь с параметрами или без них
$('#calendar-id').bitroidCalendarEv();