Автор

24 04.2017
Календарь событий на 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

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


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

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

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

Решить данный вопрос можно таким способом, при нажатии на ссылку мы перейдем к диалогу с пользователем....


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

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


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close