FullCalendar. Частина 2. Додавання, редагування та видалення подій.
Продовжуємо розгляд jQuery плагіна FullCalendar, встановлення якого було описано у попередній статті FullCalendar. Частина 1. Встановлення, налаштування та русифікація. Щоб використовувати більше функціональних можливостей плагіна, ми налаштуємо додавання, редагування та видалення подій, які зберігатимуться в базі даних MySQL.
Додавання подій
І так, ми вже маємо встановлений і налаштований FullCalendar. Для того щоб додавати події спочатку створимо форму для введення даних.
Для початку зробимо цю форму модальним діалоговим вікном за допомогою jQuery UI Dialog і створимо в ній 4 кнопки: Додати, Змінити, Видалити та Скасувати.
Після цього створимо змінні для доступу до полів форми, налаштуємо обробник кнопки Додати подію, створимо функцію очищення значень форми emptyForm, а також функцію відкриття форми formOpen, яка приймає параметр mode:
- add — додавання події
- edit — зміна події
Тепер при натисканні кнопки Додати подію ми побачимо таке діалогове вікно:
Для зручності введення даних пропоную використовувати jQuery UI Datepicker із невеликою модифікацією. Для цього необхідно завантажити з сайту плагін Timepicker та підключити до нашого скрипту. Після цього активуємо Datetimepicker для полів початок і кінець:
Завдяки Timepicker вибір дати та часу стане ще зручнішим:
Також додамо обробку натискання на певному дні календаря dayClick, щоб у нас відкривалася форма додавання події та встановлювалася відповідна дата. Для цього додамо до ініціалізації календаря обробку події:
Форма додавання готова, тепер залишилося зробити обробку цієї форми. Для початку створимо базу та таблицю необхідної структури:
Змінимо визначення кнопки додавання у діалоговій формі, додавши тіло оброблювача:
Цей код отримує дані з форми і відправляє AJAX запитом скрипту ajax.php з міткою операції op: 'add'. Також після успішного виконання запиту, ми викликаємо функцію renderEvent для додавання події безпосередньо до календаря. Другим параметром передаємо об'єкт типу Event, що складається з інтуїтивно зрозумілих параметрів. Властивість allDay об'єкта Event показує, чи займає цю подію весь день. Якщо позначка стоїть false, то в календарі поряд із заголовком буде виведено час події.
Вміст ajax.php для додавання запису до бази даних:
Все гранично просто, з'єднуємося з базою, виймаємо дані з POST, створюємо SQL запит і виконуємо його, попередньо перетворивши дату і час у формат MySQL Datetime. На цьому функціональна частина додавання події виконана. Можна динамічно додавати події, які відразу наносяться на календар.
Джерело подій
Додавати дані ми навчилися. Тепер необхідно відобразити їх на календарі не лише під час додавання, а й під час завантаження сторінки. Для цього додамо в ініціалізацію календаря джерело даних:
Цей код робить AJAX запит передаючи оп: 'source'. Додамо до файлу ajax.php операцію повернення даних у форматі JSON:
Спочатку витягуємо дані з бази, формуємо масив та повертаємо його в JSON форматі. Після цього під час завантаження календаря на ньому будуть відображатися всі додані події.
Зміна подій
Для зміни подій будемо використовувати функцію eventClick. Для цього до ініціалізації календаря додамо код обробки, який заповнює форму властивостями події та відкриває діалогове вікно з параметром edit:
Також додамо обробкунатискання кнопки Змінити у формі:
Код дуже схожий на додавання події, відрізняється він тільки операцією op: 'edit', і додаванням в дані id події, що передаються. Так само після успішно виконаної операції AJAX, викликаємо функцію календаря refetchEvents, для того, щоб заново витягти інформацію для всіх подій, таким чином оновивши дані календаря. Код файлу ajax.php для оновлення даних:
Тепер ми можемо динамічно змінювати властивості подій, їх назви, дату початку та кінця.
Видалення подій
Для видалення нам необхідно відкрити форму в режимі редагування, клацнувши за певною подією. У формі ми маємо кнопку Видалити. Додамо обробник натискання кнопки:
Тут ми передаємо скрипту тільки id події та тип операції op: 'delete'. Після успішного виконання запиту ми викликаємо функцію removeEvents і передаємо id події, що видалено. Це необхідно для того, щоб видалити цю подію з календаря. Код файлу ajax.php для видалення події:
У результаті ми маємо повноцінний календар з чималим функціоналом. Додавання даних та зміна за допомогою зручної форми, а також видалення подій у режимі редагування. Це ще далеко не всі можливості FullCalendar.
У наступній статті буде розглянуто перетягування подій drag-and-drop, зміна дат початку та кінця за допомогою зміни розміру блоку події та ще дещо цікаве.
Посилання на документацію використовуваних плагінів: