Дорогие веб-мастера, хочу поделиться с вами очень хорошим решением создания календаря событий, так как при создании нового сайта заказчику нужен был именно ткого рода календарь мероприятий и я перелопатил весь инет в поисках чего-то приличного! И вот оно счастье!!! Я выкладываю уже перелапаченый мной вариант и в него забил даты до 28.01.2021.
ДЕМО
ИСХОДНИКИ
Я оставил для примера и скачивания всю цветовую гамму которую использовал при создании сайта «All For Business» и вот страница с этим календарём!
HTML
Между тегами <head> </head> подключаем скрипты:
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/moment.js"></script>
<script src="js/jquery.eventCalendar.js"></script>Устанавливаем в нужном месте сам div вывод календара:
<div id="eventCalendar" style="width: 500px; margin: 150px auto;"></div>
CSS
Если у Вас уже есть сайт и там прописаны все его стили, то просто добавьте:
.eventCalendar-wrap {
border:none;
margin-bottom:20px;
margin-top:-20px;
background-color:#fff;
color:#807E7E;
}
.eventCalendar-wrap .eventCalendar-arrow {
text-decoration:none;
color:#fff;
padding:0 5px;
line-height:28px;
top:-6px;
padding:18px 10px;
}
.eventCalendar-wrap .eventCalendar-arrow.prev {
}
.eventCalendar-wrap .eventCalendar-arrow:hover { opacity:0.7;}
.eventCalendar-wrap .eventCalendar-arrow span {
height: 0;
width: 0;
font-size: 0;
line-height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid #fff;
float:left;
text-indent:-5000px;
}
.eventCalendar-wrap .eventCalendar-arrow.eventCalendar-prev span {
border-left-width:0;
border-right: 6px solid #fff;
}
.eventCalendar-slider { height:80px;}
.eventCalendar-monthWrap {
top:0px;
left:0px;
}
.eventCalendar-currentTitle {
line-height:35px;
background-color:#33a7b5;
outline:1px solid #33a7b5;
}
.eventCalendar-currentTitle .eventCalendar-monthTitle {
font-size:120%;
text-decoration:none;
color:#fff;
}
.eventCalendar-daysList {
zoom: 1;
padding:0;
width:100%;
}
.eventCalendar-daysList.eventCalendar-showAsWeek {
margin:10px 0px;
width:auto;
border-bottom-width:0;
border-radius:0;
background-color:#fff;
}
.eventCalendar-daysList.showDayNames.eventCalendar-showAsWeek {
border-radius:none;
}
.eventCalendar-daysList:before, .eventCalendar-daysList:after { content:""; display:table; }
.eventCalendar-daysList:after { clear: both; }
.eventCalendar-day-header {
text-transform:lowercase;
text-align:center;
font-size:15px;
border-bottom:solid 1px #e3e3e3;
}
.eventCalendar-daysList.eventCalendar-showAsWeek li {
height:auto; margin:0;
}
.eventCalendar-daysList.eventCalendar-showAsWeek li.eventCalendar-empty {
background-color: #e3e3e3;
min-height:29px;
}
.eventCalendar-day a {
text-decoration:none;
font-size:10px;
color:#424242;
}
.eventCalendar-day {
border-left:none;
}
.eventCalendar-day a {
border:none;
}
.eventCalendar-showAsWeek .eventCalendar-day { border-left-width:0;}
.eventCalendar-showAsWeek .eventCalendar-day a {
border:solid 1px #e3e3e3;
border-color:#fff #e3e3e3 #e3e3e3 #e3e3e3;
line-height:27px;
font-size:12px;
}
.eventCalendar-day a:hover {
background-color:#E4E4E4;
/* box-shadow:inset 5px 5px 10px #C1C1C1;
text-shadow: 2px 2px 2px #C1C1C1;*/
}
.eventCalendar-daysList li.today a {
color:#fff;
background:#33a7b5;
/* box-shadow:inset 5px 5px 10px #777;
text-shadow: 2px 2px 2px #777;*/
}
li.eventCalendar-day.today a:hover {
background-color:#9cdce4;
/*box-shadow:inset 5px 5px 10px #999;*/
}
.eventCalendar-daysList li.eventCalendar-dayWithEvents a {
background:#f77a11;
color:#fff;
}
li.eventCalendar-day.eventCalendar-dayWithEvents a:hover {
background-color:#f9a45d;
}
.eventCalendar-daysList li.current a {
color:#fff;
background:#449FB2;
}
li.eventCalendar-day.current a:hover {
background-color:#79BDCC;
}
.eventCalendar-loading {
margin:0 auto;
padding:0px;
background-color:#ccc;
color:#fff;
text-align:center;
position:absolute;
z-index:4;
top:38px;
left:0px;
}
.eventCalendar-loading.error {
background-color:red;
}
.eventCalendar-subtitle { padding-top:10px;}
.eventCalendar-list-wrap {
min-height:100px;
position:relative;
}
.eventCalendar-list-content.scrollable {
height:100px;
overflow-y:auto;
margin:0 5px 5px 0;
}
.eventCalendar-list {
margin:0; padding:0; list-style-type:none;
}
.eventCalendar-list li {
padding:0 0px 5px;
margin:0;
margin-bottom:20px;
clear:both;
border-bottom:1px dashed #ebebeb;
}
.eventCalendar-list li time {
font-size:11px;
line-height:15px;
}
.eventCalendar-list li time em {
float:left;
font-style:normal;
background-color:#767676;
color:#fff;
padding:2px 5px 2px 5px;
}
.eventCalendar-list li time small {
font-size:11px;
float:left;
background-color:#f77a11;
color:#fff;
padding:2px 5px 2px 5px;
margin:0 0 0 3px;
}
.eventCalendar-list li .eventCalendar-eventTitle {
display:block;
clear:both;
font-size:150%;
text-decoration:none;
}
.eventCalendar-list li a.eventCalendar-eventTitle {
color:#33a7b5;
}
.eventCalendar-list li a.eventCalendar-eventTitle:hover { text-decoration:underline;}
.eventCalendar-list li .eventDesc {
clear: both;
margin:0 0 5px 0;
font-size:80%;
line-height:1.2em;
}
.eventCalendar-list .eventCalendar-noEvents {
font-size:120%;
padding:5px;
background-color:#f77a11;
border-bottom: none;
color:#fff;
text-align:center;
}
.bt {
font-size:15px;
display:block;
clear:both;
text-align: center;
margin-top:10px;
padding: 11px 34px 12px;
text-decoration: none;
line-height: 1;
color: #ffffff !important;
background-color: #33a7b5;
text-shadow: none;
box-shadow: none;
-webkit-transition: 0.1s linear all;
-moz-transition: 0.1s linear all;
-ms-transition: 0.1s linear all;
-o-transition: 0.1s linear all;
transition: 0.1s linear all;
}
.bt:hover {
background-color: #f77a11;
text-decoration: none;
}
jS
Делаем вызов скрипта:
$(function(){
var data = [
{ "date": "2017-09-21 10:15:20", "title": "Событие 1", "description": "Анонс меоприятия", "url": "https://s-sd.ru/" },
{ "date": "2018-09-21 10:15:20", "title": "Событие 2", "description": "Анонс меоприятия", "url": "https://s-sd.ru/" },
{ "date": "2019-09-01 10:15:20", "title": "Событие 3", "description": "Анонс меоприятия", "url": "https://s-sd.ru/" },
{ "date": "2020-10-21 10:15:20", "title": "Событие 4", "description": "Анонс меоприятия", "url": "https://s-sd.ru/" },
{ "date": "2021-08-22 10:15:20", "title": "Событие 5", "description": "Анонс меоприятия", "url": "https://s-sd.ru/" },
{ "date": "2021-04-23 10:15:20", "title": "Событие 6", "description": "Анонс меоприятия", "url": "https://s-sd.ru/" },
{ "date": "2021-08-04 10:15:20", "title": "Событие 7", "description": "Анонс меоприятия", "url": "https://s-sd.ru/" },
{ "date": "2021-12-25 10:15:20", "title": "Событие 8", "description": "Анонс меоприятия", "url": "https://s-sd.ru/" },
{ "date": "2021-11-26 10:15:20", "title": "Событие 9", "description": "Анонс меоприятия", "url": "https://s-sd.ru/" },
{ "date": "2021-09-27 10:15:20", "title": "Событие 10", "description": "Анонс меоприятия", "url": "https://s-sd.ru/" },
{ "date": "2021-01-28 10:15:20", "title": "Событие 11", "description": "Анонс меоприятия", "url": "https://s-sd.ru/" }
];
$('#eventCalendar').eventCalendar({
jsonData: data,
eventsjson: 'data.json',
jsonDateFormat: 'human',
startWeekOnMonday: false,
openEventInNewWindow: true,
dateFormat: 'DD-MM-YYYY',
showDescription: false,
locales: {
locale: "ru",
txt_noEvents: "Нет запланированных событий",
txt_SpecificEvents_prev: "",
txt_SpecificEvents_after: "события:",
txt_NextEvents: "Следующие события:",
txt_GoToEventUrl: "Смотреть",
moment: {
"months" : [ "Январь", "Февраль", "Март", "Апрель", "Май", "Июнь",
"Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь" ],
"monthsShort" : [ "Янв", "Фев", "Мар", "Апр", "Май", "Июн",
"Июл", "Авг", "Сен", "Окт", "Ноя", "Дек" ],
"weekdays" : [ "Воскресенье", "Понедельник","Вторник","Среда","Четверг",
"Пятница","Суббота" ],
"weekdaysShort" : [ "Вс","Пн","Вт","Ср","Чт",
"Пт","Сб" ],
"weekdaysMin" : [ "Вс","Пн","Вт","Ср","Чт",
"Пт","Сб" ]
}
}
});
});Тут по моему всё видно и далее писать особо нечего! Пользуйтель!
