Пълен календар. Част 2. Добавяне, редактиране и изтриване на събития.
Продължаваме прегледа на приставката FullCalendar jQuery, чието инсталиране беше описано в предишната статия за FullCalendar. Част 1. Инсталиране, конфигуриране и русификация. За да използваме повече функционалност на плъгина, ще настроим добавяне, редактиране и изтриване на събития, които ще се съхраняват в базата данни MySQL.
Добавяне на събития
И така, вече имаме инсталиран и конфигуриран FullCalendar. За да добавим събития, първо създаваме формуляр за въвеждане на данни.
Първо, нека направим този формуляр модален диалогов прозорец с помощта на jQuery UI Dialog и да създадем 4 бутона в него: Добавяне, Редактиране, Изтриване и Отказ.
След това ще създадем променливи за достъп до полетата на формуляра, ще настроим манипулатора на бутона Add event, ще създадем функция за изчистване на стойностите на формуляра emptyForm, както и функция за отваряне на формуляра formOpen, която приема параметъра на режима:
- add - добавяне на събитие
- редактиране - промяна на събитието
Сега, когато щракнете върху бутона Добавяне на събитие, ще видим следния диалогов прозорец:
За удобство при въвеждане на данни предлагам да използвате jQuery UI Datepicker с лека модификация. За да направите това, трябва да изтеглите плъгина Timepicker от сайта и да го свържете към нашия скрипт. След това активираме инструмента за избор на дата и час за полетата за начало и край:
Благодарение на Timepicker, изборът на дата и час ще стане още по-удобен:
Ще добавим и обработка за щракване върху определен ден от календара dayClick, за да се отвори формата за добавяне на събитие и да се зададе съответната дата. За да направите това, добавете обработка на събития към инициализацията на календара:
Формулярът за добавяне е готов, сега остава да обработим този формуляр. Първо, нека създадем база данни и таблица с желаната структура:
Нека променим дефиницията на бутона за добавяне в диалоговата форма, като добавим тялото на манипулатора:
Този код извлича данните от формуляра и изпраща AJAX заявка към скрипта ajax.php с етикет на операция op: 'add'. Също така, след успешна заявка, извикваме функцията renderEvent, за да добавим събитието директно към календара. Като втори параметър предаваме обект от тип Event, който се състои от интуитивни параметри. Свойството allDay на обекта Event показва дали даденото събитие обхваща целия ден. Ако етикетът е зададен на false, тогава часът на събитието ще се показва до заглавието в календара.
Съдържание на Ajax.php за добавяне на запис към базата данни:
Всичко е изключително просто, свързваме се с базата данни, извличаме данни от POST, създаваме SQL заявка и я изпълняваме след конвертиране на датата и часа във формата MySQL Datetime. Това завършва функционалната част от добавянето на събитие. Можете динамично да добавяте събития, които веднага ще бъдат приложени към календара.
Източник на събитие
Научихме как да добавяме данни. Сега трябва да ги показвате в календара не само при добавяне, но и при зареждане на страницата. За да направите това, добавете източник на данни към инициализацията на календара:
Този код прави AJAX заявка, предавайки параметъра op: 'source'. Нека добавим операция за връщане на данни във формат JSON към файла ajax.php:
Първо извличаме данни от базата данни, формираме масив и го връщаме във формат JSON. След това, когато календарът се зареди, всички добавени събития ще бъдат показани в него.
Промяна на събитията
За да променим събития, ще използваме функцията eventClick. За да направите това, добавете кода за обработка към инициализацията на календара, който попълва формуляра със свойствата на събитието и отваря диалогов прозорец с параметъра за редактиране:
Ще добавим и обработкащракнете върху бутона Редактиране във формуляра:
Кодът е много подобен на добавянето на събитие, различава се само в операцията op: 'edit' и добавянето на идентификатора на събитието към предадените данни. Също така, след успешно завършена AJAX операция, ние извикваме функцията на календара refetchEvents, за да извлечем отново информация за всички събития, като по този начин актуализираме данните от календара. Код на файл Ajax.php за актуализиране на данни:
Сега можем динамично да променяме свойствата на събитията, техните имена, начални и крайни дати.
Изтриване на събития
За да изтрием, трябва да отворим формата в режим на редактиране, като щракнем върху конкретно събитие. Във формата имаме бутон Изтриване. Добавете манипулатор за щракване върху бутон:
Тук предаваме само идентификатора на събитието и типа операция op: 'delete' на скрипта. След като заявката е успешна, извикваме функцията removeEvents и предаваме идентификатора на събитието, което е премахнато. Това е необходимо, за да премахнете това събитие от календара. Файловият код ajax.php за изтриване на събитието:
В резултат на това имаме пълноценен календар със значителна функционалност. Добавяне на данни и промяна чрез удобна форма, както и изтриване на събития в режим на редактиране. Това далеч не са всички функции на FullCalendar.
Следващата статия ще обхване събития с плъзгане и пускане, промяна на началната и крайната дата чрез преоразмеряване на блока за събития и някои други интересни неща.
Връзки към документацията на използваните добавки: