От автора: в этом уроке мы с вами продолжим работу с мощным плагином для организации календаря событий — FullCalendar. В предыдущем уроке мы реализовали вывод событий из БД в календарь. Пришло время заняться добавлением событий в БД. В этом уроке мы добавим функционал открытия модального окна с формой при клике по любой дате календаря. Также к полям даты формы мы добавим появляющийся календарик, позволяющий удобно выбрать нужную дату.
Начнем с подключения скрипта из комплекта jQuery UI. Сейчас у нас подключены только стили из этой библиотеки. После подключения jQuery допишем подключения jQuery UI:
1 |
<script src="js/jquery-ui.min.js"></script> |
Также я подключу Bootstrap, чтобы меньше писать стилей и элементы страницы выглядели при этом красиво.
1 |
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> |
Создадим в индексном файле необходимую нам разметку для добавления события.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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. Итоговый вид файла будет таким:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
$(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.
На этом текущий урок завершен. Удачи и до новых встреч!
Комментарии (21)