FullCalendar. Окно добавления события

От автора: в этом уроке мы с вами продолжим работу с мощным плагином для организации календаря событий — FullCalendar. В предыдущем уроке мы реализовали вывод событий из БД в календарь. Пришло время заняться добавлением событий в БД. В этом уроке мы добавим функционал открытия модального окна с формой при клике по любой дате календаря. Также к полям даты формы мы добавим появляющийся календарик, позволяющий удобно выбрать нужную дату.

Начнем с подключения скрипта из комплекта jQuery UI. Сейчас у нас подключены только стили из этой библиотеки. После подключения jQuery допишем подключения jQuery UI:

<script src="js/jquery-ui.min.js"></script>

Также я подключу Bootstrap, чтобы меньше писать стилей и элементы страницы выглядели при этом красиво.

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

Создадим в индексном файле необходимую нам разметку для добавления события.

<div id="dialog">
		<form>
			<div class="form-group">
				<label for="title">Название события</label>
				<input type="text" class="form-control" id="title" placeholder="Название события">
			</div>
			<div class="form-group">
				<label for="start">Начало события</label>
				<input type="text" class="form-control datepicker" id="start" placeholder="Начало события">
			</div>
			<div class="form-group">
				<label for="end">Конец события</label>
				<input type="text" class="form-control datepicker" id="end" placeholder="Конец события">
			</div>
			<button type="submit" class="btn btn-success">Добавить событие</button>
		</form>
	</div>

И опишем необходимую клиентскую логику в файле main.js. Итоговый вид файла будет таким:

$(function(){

	$('#calendar').fullCalendar({
		dayClick: function(date, jsEvent, view) {
	        var clickDate = date.format();
	        $('#start').val(clickDate);
	        $('#dialog').dialog('open');
    	},
		// theme: true,
		lang: 'ru',
		eventSources : [
			{
				events : events,
				color : '#0EB6A2',
				textColor : '#fff'
			}
		]
	});

	$('#dialog').dialog({
		autoOpen: false,
		show: {
			effect: 'drop',
			duration: 500
		},
		hide: {
			effect: 'clip',
			duration: 500
		}
	});

	$('.datepicker').datepicker({
		dateFormat: "yy-mm-dd"
	});

});

Если мы нигде не ошиблись, то теперь при клике по любому числу календаря событий должна появляться форма в модальном окне. При этом к полям дат формы прикручены календарики — datepicker.

На этом текущий урок завершен. Удачи и до новых встреч!