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

FullCalendar. Получение данных из базы данных

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

автор

Автор: Андрей Кудлай

Зовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP, JavaScript.

скачать исходникискачать урок

Начнем с подключения скрипта из комплекта 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.

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

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (4)

  1. Tablee

    Подскажите, есть ли возможность изменить формат отображения таблицы «Неделя», если да, то куда наложить руки? :) Спасибо!

    • Андрей Кудлай

      Для того, чтобы попытаться что-то ответить, нужно понимать, что именно Вы хотите поменять :) В любом случае, поменять структуру без лазания в код плагина вряд ли получится.

  2. Алексей

    Здравствуйте Андрей!
    Подскажите, когда выйдет следующий урок по этой теме. Добавление данных календаря в базу данных. Есть один не понятный момент: как выровнять даты?

    • Андрей Кудлай

      Здравствуйте, Алексей.
      Запись уроков по теме прекратил, поскольку особого отклика от аудитории не получил. Поскольку тема в основной массе не заинтересовала — смысл ее продолжать? По поводу выравнивания дат, то это можно сделать через CSS. Можете задать вопрос на нашем форуме, описать конкретнее проблему, посмотрим, что можно сделать.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree