От автора: в этом уроке мы с вами продолжим работу с мощным плагином для организации календаря событий — FullCalendar. В предыдущем уроке мы реализовали вывод событий из БД в календарь. Пришло время заняться добавлением событий в БД. В этом уроке мы добавим функционал открытия модального окна с формой при клике по любой дате календаря. Также к полям даты формы мы добавим появляющийся календарик, позволяющий удобно выбрать нужную дату.
Начнем с подключения скрипта из комплекта jQuery UI. Сейчас у нас подключены только стили из этой библиотеки. После подключения jQuery допишем подключения jQuery UI:
| 1 | <script src="js/jquery-ui.min.js"></script> |
Бесплатный курс «Full-Stack практика»
Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS
Получить курсТакже я подключу 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.
На этом текущий урок завершен. Удачи и до новых встреч!
Бесплатный курс «Full-Stack практика»
Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS
Получить курс
Хотите узнать, что необходимо для создания сайта?
Посмотрите 3-х минутное видео и у Вас будет четкий пошаговый план по созданию сайта с нуля!
Смотреть видео
Подскажите, есть ли возможность изменить формат отображения таблицы «Неделя», если да, то куда наложить руки?
Спасибо!
Для того, чтобы попытаться что-то ответить, нужно понимать, что именно Вы хотите поменять
В любом случае, поменять структуру без лазания в код плагина вряд ли получится.
Здравствуйте Андрей!
Подскажите, когда выйдет следующий урок по этой теме. Добавление данных календаря в базу данных. Есть один не понятный момент: как выровнять даты?
Здравствуйте, Алексей.
Запись уроков по теме прекратил, поскольку особого отклика от аудитории не получил. Поскольку тема в основной массе не заинтересовала — смысл ее продолжать? По поводу выравнивания дат, то это можно сделать через CSS. Можете задать вопрос на нашем форуме, описать конкретнее проблему, посмотрим, что можно сделать.
Здравствуйте Андрей!
Подскажите, когда выйдет следующий урок.
Здравствуйте.
Эта серия закончена, уроков больше не планируется.
Здравствуйте Андрей! Извините что обращаюсь опять к этой теме но я хочу закончит работу с этим скриптом.
Вы не могли подсказать как добавить дату начало события и конец события в БД после выбора.
Спасибо!
Здравствуйте.
Взять значения указанных полей и отправить их аяксом на сервер, где и добавить sql-запросом в БД. В целом, так. В коде, как Вы понимаете, в рамках комментария все это показать не получится, нужен полноценный урок.
Здравствуйте!
Как реализовать индивидуальный доступ к календарю для каждого пользователя?
Андрей, здравствуйте.
Может уже сталкивались с такой проблемой. При клике на ячейку календаря в Ваших исходниках все работает отлично, переношу один в один в собственный проект — модальное окно не появляется, браузер пишет… Uncaught TypeError: $(…).dialog is not a function
at m.fn.init.dayClick…
Если сделать autoOpen: true, то можно отследить, что строки var clickDate = date.format(); и $(‘#start’).val(clickDate); исполняются отлично. А вот открытие окна не происходит.
Здравствуйте, Марина.
Скорее всего, не подключилась библиотека jquery-ui.min.js, поскольку данный метод принадлежит ей. Поэтому проверьте этот момент.
Спасибо.
Меняла варианты подключения, тот же результат. Да и все остальные опции плагина работают как надо. Сайт представляет собой платформу, подключений много и возможно, что-то конфликтует именно с этим методом библиотеки jquery-ui.min.js.
Возможен и конфликт, тут только смотреть сайт нужно.
Здравствуйте!
Как реализовать индивидуальный доступ к календарю для каждого пользователя?
Спасибо
Здравствуйте.
Авторизация пользователей + хранение событий в БД с привязкой к пользователю.
Да! хотелось бы так.
Можете сделать урок по этой теме?
Возможно позже. Сейчас в планах другие уроки.
Очень интересные уроки и «многообещающая» концовка. Надеюсь, что у Вас снова появится интерес к данной теме.
Буду ждать и следить.
Здравствуйте! Очень заинтересовала данная серия уроков. Надеюсь, продолжение всё-таки будет
поддерживаю!!!
Здравствуйте!
Скажите, пожалуйста, если какое-либо событие в календаре начинается и заканчивается в один день, то при клике на данном событии в календаре для редактирования возникает ошибка:
TypeError: calEvent.end is null.
У меня диалог открывается в том случае, если дата завершения события больше чем дата начала.
Следует ли в таком случае добавлять время к дате?