Автор

Календарь событий на jQuery

Календарь событий на jQuery


Дорогие веб-мастера, хочу поделиться с вами очень хорошим решением создания календаря событий, так как при создании нового сайта заказчику нужен был именно ткого рода календарь мероприятий и я перелопатил весь инет в поисках чего-то приличного! И вот оно счастье!!! Я выкладываю уже перелапаченый мной вариант и в него забил даты до 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" : [ "Вс","Пн","Вт","Ср","Чт",
"Пт","Сб" ]
}
}
});
});

Тут по моему всё видно и далее писать особо нечего! Пользуйтель!

 

Вот и всё!


Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

Календарь событий на jQuery

В передыдущем уроке «Интересные кнопки поделиться в соцсетях на CSS3» я уже писал как можно сделать красивые кнопки для соцсетей. Продолжая эту тему хочу поделиться еще одним примером как можно оформить свой сайт! В данном примере используется только CSS и не каких скриптов!


Календарь событий на jQuery

Версия скрипта от TRANE73. Скрипт показывает время существования сайта, с указанной вами даты. Сам по себе скрипт простой, но он удобный и небольшой. В зависимости от даты меняются слова например сайт существует 2 дня 7 дней 101 день. Если вам надоело каждый день менять цифры, то просто установите этот скрипт:


Календарь событий на jQuery

Создавая сайт необходимо помнить о всем мелочах, ведь именно они бросаются в глаза первыми, как бы это странно не звучало. Именно маленькая деталь может стать залогом успеха или ее отсутствие обернется вам полным провалом. В сегодняшнем уроке речь пойдет о создании индикатора загрузки, или как их еще называют индикатор прогрузки. Если вы используете медленный интернет, то соответственно и элементы на странице загружаются медленно. Если вы разработчик, то вы можете скрасить загрузку элементов на вашем сайте с помощью красивого индикатора.


Календарь событий на jQuery

Вариант реализации CSS3 градиента на тексте. Нужный эффект достигается за счет такой подборки цвета заднего фона, что накладываемый на него градиент практически не виден, а текст приобретает градиент, за счет более светлого цвета используемого для самого текста.


Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close