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

Дата публикации: 2016-04-14

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">

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

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее

<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.

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