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

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

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

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

Начнем с подключения скрипта из комплекта jQuery UI. Сейчас у нас подключены только стили из этой библиотеки. После подключения jQuery допишем подключения jQuery UI:

Также я подключу Bootstrap, чтобы меньше писать стилей и элементы страницы выглядели при этом красиво.

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

И опишем необходимую клиентскую логику в файле main.js. Итоговый вид файла будет таким:

Если мы нигде не ошиблись, то теперь при клике по любому числу календаря событий должна появляться форма в модальном окне. При этом к полям дат формы прикручены календарики — datepicker.

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

Метки:

Похожие статьи:

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

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