Автор

Календарь событий на 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" : [ "Вс","Пн","Вт","Ср","Чт",
"Пт","Сб" ]
}
}
});
});

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

 

Вот и всё!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

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


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

В последнее время стали весьма популярны неординарные решения к построению сайта, зачастую веб-мастера стали отказываться от привычного построения ресурса и разрабатывать новые концепции верстки. Большое влияние на современный веб дизайн оказал дизайн metro ui который покорил своим минимализмом и простотой решений, что дизайнеры принялись разрабатывать сайты под данный интерфейс. В данном уроке мы рассмотрим как создать фиксированное вертикальное меню в стиле metro ui.


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

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


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

Рассмотрим оригинальную форму обратной саязи на jQuery. Такая форма легко украсит любой сайт.


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close