От автора: в этом уроке мы с вами продолжим работу с мощным плагином для организации календаря событий — 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.
На этом текущий урок завершен. Удачи и до новых встреч!
Источник: https://webformyself.com/fullcalendar-okno-dobavleniya-sobytiya/
Свежие комментарии