{"id":4998,"date":"2022-07-11T05:11:43","date_gmt":"2022-07-11T05:11:43","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=4998"},"modified":"2025-08-22T05:28:08","modified_gmt":"2025-08-22T05:28:08","slug":"php-event-calendar-using-fullcalendar-javascript-library","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/php-event-calendar-using-fullcalendar-javascript-library\/","title":{"rendered":"PHP Event Calendar using FullCalendar JS Library"},"content":{"rendered":"<p>The <b>Event Calendar<\/b> lists the events date-wise in a large calendar view. The events are fetched dynamically and listed under the date cell. An event calendar makes it easier to find the events for a specific date. You can build a custom <a href=\"https:\/\/www.codexworld.com\/build-event-calendar-using-jquery-ajax-php\/\">event calendar with dynamic data using PHP<\/a> and MySQL. In the previous tutorial, we learn how to build an event calendar with PHP and MySQL. This tutorial will show you how to create an event calendar with PHP using the FullCalendar JavaScript library.<\/p>\n<p>FullCalendar is a JavaScript library that helps to integrate a Full-sized event calendar on a website quickly. It provides a user-friendly way to add events to the calendar and display them on the date cell. We will use the FullCalendar library to build an event calendar with PHP and MySQL. Not only the event listing, but we will also integrate CRUD functionality with FullCalendar.<\/p>\n<p>The following functionality will be implemented to build <b>PHP event calendar with FullCalendar<\/b>.<\/p>\n<ul>\n<li>Fetch events data from the MySQL database.<\/li>\n<li>Create a large calendar with FullCalendar JS library.<\/li>\n<li>Display events in the date cell of the calendar.<\/li>\n<li>View, add, edit, update, and delete events from the calendar.<\/li>\n<\/ul>\n<p>Before getting started, take a look at the file structure of the PHP event calendar with FullCalendar JS plugin script.<\/p>\n<pre class=\"file-struc\">php_event_calendar_with_fullcalendar<span style=\"color:#794938\">\/<\/span>\r\n\u251c\u2500\u2500 index.html\r\n\u251c\u2500\u2500 fetchEvents.php\r\n\u251c\u2500\u2500 eventHandler.php\r\n\u251c\u2500\u2500 dbConfig.php\r\n\u251c\u2500\u2500 js<span style=\"color:#794938\">\/<\/span>\r\n\u2502   \u251c\u2500\u2500 fullcalendar<span style=\"color:#794938\">\/<\/span>\r\n\u2502   \u2514\u2500\u2500 sweetalert2.all.min.js\r\n\u2514\u2500\u2500 css<span style=\"color:#794938\">\/<\/span>\r\n    \u2514\u2500\u2500 style.css\r\n<\/pre>\n<h2>Create Database Table<\/h2>\n<p>To display the dynamic events in the calendar, the event data need to be stored in the database. The following SQL creates a <code>events<\/code> table with some basic fields in the MySQL database.<\/p>\n<pre style=\"color: rgb(0, 0, 0);\"><span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">CREATE<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">TABLE<\/span> <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`events`<\/span> (\r\n  <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`id`<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(0, 134, 179);\">int<\/span>(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">11<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span> AUTO_INCREMENT,\r\n  <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`title`<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(0, 134, 179);\">varchar<\/span>(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">255<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">COLLATE<\/span> utf8_unicode_ci <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n  <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`description`<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(0, 134, 179);\">varchar<\/span>(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">500<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">COLLATE<\/span> utf8_unicode_ci <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">DEFAULT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n  <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`url`<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(0, 134, 179);\">varchar<\/span>(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">100<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">COLLATE<\/span> utf8_unicode_ci <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">DEFAULT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n  <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`start`<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(0, 134, 179);\">date<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n  <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`end`<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(0, 134, 179);\">date<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n  PRIMARY <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">KEY<\/span> (<span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`id`<\/span>)\r\n) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">ENGINE<\/span>=<span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">InnoDB<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">DEFAULT<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">CHARSET<\/span>=utf8 <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">COLLATE<\/span>=utf8_unicode_ci;\r\n<\/pre>\n<h2>Database Configuration (dbConfig.php)<\/h2>\n<p>This file is used to connect with the database using PHP and MySQL. Specify the database host (<code>DB_HOST<\/code>), username (<code>DB_USERNAME<\/code>), password (<code>DB_PASSWORD<\/code>), and name (<code>DB_NAME<\/code>) as per your database credentials.<\/p>\n<pre><span style=\"color: #0000BB\">&lt;?php&nbsp; <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Database&nbsp;configuration&nbsp; <br \/><\/span><span style=\"color: #0000BB\">define<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">'DB_HOST'<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">'MySQL_Database_Host'<\/span><span style=\"color: #007700\">); <br \/><\/span><span style=\"color: #0000BB\">define<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">'DB_USERNAME'<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">'MySQL_Database_Username'<\/span><span style=\"color: #007700\">); <br \/><\/span><span style=\"color: #0000BB\">define<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">'DB_PASSWORD'<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">'MySQL_Database_Password'<\/span><span style=\"color: #007700\">); <br \/><\/span><span style=\"color: #0000BB\">define<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">'DB_NAME'<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">'MySQL_Database_Name'<\/span><span style=\"color: #007700\">); <br \/>&nbsp; <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Create&nbsp;database&nbsp;connection&nbsp; <br \/><\/span><span style=\"color: #0000BB\">$db&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;new&nbsp;<\/span><span style=\"color: #0000BB\">mysqli<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">DB_HOST<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">DB_USERNAME<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">DB_PASSWORD<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">DB_NAME<\/span><span style=\"color: #007700\">);&nbsp; <br \/>&nbsp; <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Check&nbsp;connection&nbsp; <br \/><\/span><span style=\"color: #007700\">if&nbsp;(<\/span><span style=\"color: #0000BB\">$db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">connect_error<\/span><span style=\"color: #007700\">)&nbsp;{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;die(<\/span><span style=\"color: #DD0000\">\"Connection&nbsp;failed:&nbsp;\"&nbsp;<\/span><span style=\"color: #007700\">.&nbsp;<\/span><span style=\"color: #0000BB\">$db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">connect_error<\/span><span style=\"color: #007700\">);&nbsp; <br \/>}<\/span><\/pre>\n<h2>Build Event Calendar (index.html)<\/h2>\n<p><b>Dialog Boxes:<\/b> Include the sweetalert2 plugin library to initialize and use it for popup boxes.<\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"js\/sweetalert2.all.min.js\"<\/span>&gt;<\/span><span class=\"undefined\"><\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<p><b>Calendar Plugin:<\/b> Include FullCalendar JS &#038; CSS library to build full-sized calendar using JavaScript.<\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">link<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"js\/fullcalendar\/lib\/main.css\"<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"stylesheet\"<\/span> \/&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"js\/fullcalendar\/lib\/main.js\"<\/span>&gt;<\/span><span class=\"undefined\"><\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<p><b>Calendar Container:<\/b> Define an HTML element to attach the event calendar.<\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"calendar\"<\/span>&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span><\/pre>\n<p>Initialize the FullCalendar class on the DOMContentLoaded event and render the calendar on the web page.<\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span>\r\n<span style=\"color: rgb(110, 107, 94);\"><span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.addEventListener(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'DOMContentLoaded'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>) <\/span>{\r\n  <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> calendarEl = <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'calendar'<\/span>);\r\n\r\n  <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> calendar = <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">new<\/span> FullCalendar.Calendar(calendarEl, {\r\n    initialView: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'dayGridMonth'<\/span>,\r\n    height: <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">650<\/span>,\r\n  });\r\n\r\n  calendar.render();\r\n});<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<p>In the following examples, we will see how to integrate event listing, details, add, and delete functionality to FullCalendar using JavaScript.<\/p>\n<p><b>Fetch events from the server-side and list them on the Calendar:<\/b><\/p>\n<ul class=\"bullet_disk_list\">\n<li>Use the <code>events<\/code> option in FullCalendar configurations to set the server-side script URL (<code>fetchEvents.php<\/code>) that the calendar will fetch the event data from.<\/li>\n<li>The data must be provided as a JSON feed.<\/li>\n<\/ul>\n<pre style=\"color: rgb(110, 107, 94);\"><span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.addEventListener(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'DOMContentLoaded'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>) <\/span>{\r\n  <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> calendarEl = <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'calendar'<\/span>);\r\n\r\n  <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> calendar = <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">new<\/span> FullCalendar.Calendar(calendarEl, {\r\n    initialView: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'dayGridMonth'<\/span>,\r\n    height: <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">650<\/span>,\r\n    events: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'fetchEvents.php'<\/span>,\r\n  });\r\n\r\n  calendar.render();\r\n});<\/pre>\n<p><b>Add Event:<\/b><\/p>\n<ul class=\"bullet_disk_list\">\n<li>Use <code>select<\/code> callback function to attach Event Add feature.<\/li>\n<li>The <code>selectable<\/code> option must be set to <code>true<\/code> which makes the date cell selectable.<\/li>\n<li><code>Swal.fire()<\/code> method is used to display popup boxes.<\/li>\n<li>On select, the popup will appear with input fields (title, description, and URL).<\/li>\n<li>After the submission, the event data is posted to the server-side script (<code>eventHandler.php<\/code>) via HTTP POST request using JavaScript Fetch API.<\/li>\n<li>Based on the status, the message is shown on the popup.<\/li>\n<li>The <code>calendar.refetchEvents()<\/code> method is called to fetch the updated events list.<\/li>\n<\/ul>\n<pre style=\"color: rgb(110, 107, 94);\"><span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.addEventListener(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'DOMContentLoaded'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>) <\/span>{\r\n  <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> calendarEl = <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'calendar'<\/span>);\r\n\r\n  <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> calendar = <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">new<\/span> FullCalendar.Calendar(calendarEl, {\r\n\tinitialView: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'dayGridMonth'<\/span>,\r\n\theight: <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">650<\/span>,\r\n\tevents: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'fetchEvents.php'<\/span>,\r\n\r\n\tselectable: <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">true<\/span>,\r\n\tselect: <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span> (<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\">start, end, allDay<\/span>) <\/span>{\r\n\t  <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">const<\/span> { value: formValues } = <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">await<\/span> Swal.fire({\r\n\t\ttitle: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Add Event'<\/span>,\r\n\t\thtml:\r\n\t\t  <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;input id=\"swalEvtTitle\" class=\"swal2-input\" placeholder=\"Enter title\"&gt;'<\/span> +\r\n\t\t  <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;textarea id=\"swalEvtDesc\" class=\"swal2-input\" placeholder=\"Enter description\"&gt;&lt;\/textarea&gt;'<\/span> +\r\n\t\t  <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;input id=\"swalEvtURL\" class=\"swal2-input\" placeholder=\"Enter URL\"&gt;'<\/span>,\r\n\t\tfocusConfirm: <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">false<\/span>,\r\n\t\tpreConfirm: () =&gt; {\r\n\t\t  <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">return<\/span> [\r\n\t\t\t<span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'swalEvtTitle'<\/span>).value,\r\n\t\t\t<span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'swalEvtDesc'<\/span>).value,\r\n\t\t\t<span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'swalEvtURL'<\/span>).value\r\n\t\t  ]\r\n\t\t}\r\n\t  });\r\n\r\n\t  <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span> (formValues) {\r\n\t\t<span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Add event<\/span>\r\n\t\tfetch(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"eventHandler.php\"<\/span>, {\r\n\t\t  method: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"POST\"<\/span>,\r\n\t\t  headers: { <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"Content-Type\"<\/span>: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"application\/json\"<\/span> },\r\n\t\t  body: <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">JSON<\/span>.stringify({ request_type:<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'addEvent'<\/span>, start:start.startStr, end:start.endStr, event_data: formValues}),\r\n\t\t})\r\n\t\t.then(response =&gt; response.json())\r\n\t\t.then(data =&gt; {\r\n\t\t  <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span> (data.status == <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">1<\/span>) {\r\n\t\t\tSwal.fire(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Event added successfully!'<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">''<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'success'<\/span>);\r\n\t\t  } <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">else<\/span> {\r\n\t\t\tSwal.fire(data.error, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">''<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'error'<\/span>);\r\n\t\t  }\r\n\r\n\t\t  <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Refetch events from all sources and rerender<\/span>\r\n\t\t  calendar.refetchEvents();\r\n\t\t})\r\n\t\t.catch(<span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">console<\/span>.error);\r\n\t  }\r\n\t}\r\n  });\r\n\r\n  calendar.render();\r\n});<\/pre>\n<p><b>View event details:<\/b><\/p>\n<ul class=\"bullet_disk_list\">\n<li>Use <code>eventClick<\/code> callback function to attach the event view details feature.<\/li>\n<li>On click, the event details are displayed on the popup box.<\/li>\n<li><code>Swal.fire()<\/code> method is used to display popup boxes.<\/li>\n<li>The <code>info.event<\/code> object is used to get the event details set in Event Objects.<\/li>\n<li>The <code>info.event.extendedProps<\/code> is used to get the additional info from Event Objects.<\/li>\n<\/ul>\n<pre style=\"color: rgb(110, 107, 94);\"><span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.addEventListener(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'DOMContentLoaded'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>) <\/span>{\r\n  <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> calendarEl = <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'calendar'<\/span>);\r\n\r\n  <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> calendar = <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">new<\/span> FullCalendar.Calendar(calendarEl, {\r\n    initialView: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'dayGridMonth'<\/span>,\r\n    height: <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">650<\/span>,\r\n    events: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'fetchEvents.php'<\/span>,\r\n\r\n    eventClick: <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\">info<\/span>) <\/span>{\r\n      info.jsEvent.preventDefault();\r\n      \r\n      <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ change the border color<\/span>\r\n      info.el.style.borderColor = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'red'<\/span>;\r\n      \r\n      Swal.fire({\r\n        title: info.event.title,\r\n        icon: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'info'<\/span>,\r\n        html:<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;p&gt;'<\/span>+info.event.extendedProps.description+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;\/p&gt;&lt;a href=\"'<\/span>+info.event.url+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'\"&gt;Visit event page&lt;\/a&gt;'<\/span>,\r\n      });\r\n    }\r\n  });\r\n\r\n  calendar.render();\r\n});<\/pre>\n<p><b>Edit and Delete Event:<\/b><\/p>\n<ul class=\"bullet_disk_list\">\n<li>The Edit button is placed in the event details popup.\n<ul>\n<li>On edit request, the form appears with the prefilled event data in the input fields.<\/li>\n<li>On confirm, the update request is sent to the server-side script (<code>eventHandler.php<\/code>). The <code>info.event.id<\/code> is passed to this POST request as the DB reference ID of the selected event, along with the form input data.<\/li>\n<\/ul>\n<\/li>\n<li>The Delete button is placed in the event details popup.\n<ul>\n<li>On confirm, the delete request is sent to the server-side script (<code>eventHandler.php<\/code>). The <code>info.event.id<\/code> is passed to this POST request as the DB reference ID of the selected event.<\/li>\n<\/ul>\n<\/li>\n<li>Based on the status, the message is shown on the popup.<\/li>\n<li>The <code>calendar.refetchEvents()<\/code> method is called to fetch the updated events list.<\/li>\n<\/ul>\n<pre style=\"color: rgb(110, 107, 94);\"><span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.addEventListener(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'DOMContentLoaded'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>) <\/span>{\r\n  <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> calendarEl = <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'calendar'<\/span>);\r\n\r\n  <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> calendar = <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">new<\/span> FullCalendar.Calendar(calendarEl, {\r\n    initialView: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'dayGridMonth'<\/span>,\r\n    height: <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">650<\/span>,\r\n    events: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'fetchEvents.php'<\/span>,\r\n    \r\n    selectable: <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">true<\/span>,\r\n    select: <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span> (<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\">start, end, allDay<\/span>) <\/span>{\r\n      <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">const<\/span> { value: formValues } = <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">await<\/span> Swal.fire({\r\n        title: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Add Event'<\/span>,\r\n        confirmButtonText: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Submit'<\/span>,\r\n        showCloseButton: <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">true<\/span>,\r\n\t\t    showCancelButton: <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">true<\/span>,\r\n        html:\r\n          <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;input id=\"swalEvtTitle\" class=\"swal2-input\" placeholder=\"Enter title\"&gt;'<\/span> +\r\n          <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;textarea id=\"swalEvtDesc\" class=\"swal2-input\" placeholder=\"Enter description\"&gt;&lt;\/textarea&gt;'<\/span> +\r\n          <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;input id=\"swalEvtURL\" class=\"swal2-input\" placeholder=\"Enter URL\"&gt;'<\/span>,\r\n        focusConfirm: <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">false<\/span>,\r\n        preConfirm: () =&gt; {\r\n          <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">return<\/span> [\r\n            <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'swalEvtTitle'<\/span>).value,\r\n            <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'swalEvtDesc'<\/span>).value,\r\n            <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'swalEvtURL'<\/span>).value\r\n          ]\r\n        }\r\n      });\r\n\r\n      <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span> (formValues) {\r\n        <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Add event<\/span>\r\n        fetch(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"eventHandler.php\"<\/span>, {\r\n          method: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"POST\"<\/span>,\r\n          headers: { <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"Content-Type\"<\/span>: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"application\/json\"<\/span> },\r\n          body: <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">JSON<\/span>.stringify({ request_type:<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'addEvent'<\/span>, start:start.startStr, end:start.endStr, event_data: formValues}),\r\n        })\r\n        .then(response =&gt; response.json())\r\n        .then(data =&gt; {\r\n          <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span> (data.status == <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">1<\/span>) {\r\n            Swal.fire(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Event added successfully!'<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">''<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'success'<\/span>);\r\n          } <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">else<\/span> {\r\n            Swal.fire(data.error, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">''<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'error'<\/span>);\r\n          }\r\n\r\n          <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Refetch events from all sources and rerender<\/span>\r\n          calendar.refetchEvents();\r\n        })\r\n        .catch(<span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">console<\/span>.error);\r\n      }\r\n    },\r\n\r\n    eventClick: <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\">info<\/span>) <\/span>{\r\n      info.jsEvent.preventDefault();\r\n      \r\n      <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ change the border color<\/span>\r\n      info.el.style.borderColor = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'red'<\/span>;\r\n      \r\n      Swal.fire({\r\n        title: info.event.title,\r\n        icon: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'info'<\/span>,\r\n        html:<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;p&gt;'<\/span>+info.event.extendedProps.description+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;\/p&gt;&lt;a href=\"'<\/span>+info.event.url+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'\"&gt;Visit event page&lt;\/a&gt;'<\/span>,\r\n        showCloseButton: <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">true<\/span>,\r\n        showCancelButton: <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">true<\/span>,\r\n        showDenyButton: <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">true<\/span>,\r\n        cancelButtonText: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Close'<\/span>,\r\n        confirmButtonText: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Delete'<\/span>,\r\n        denyButtonText: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Edit'<\/span>,\r\n      }).then((result) =&gt; {\r\n        <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span> (result.isConfirmed) {\r\n          <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Delete event<\/span>\r\n          fetch(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"eventHandler.php\"<\/span>, {\r\n            method: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"POST\"<\/span>,\r\n            headers: { <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"Content-Type\"<\/span>: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"application\/json\"<\/span> },\r\n            body: <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">JSON<\/span>.stringify({ request_type:<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'deleteEvent'<\/span>, event_id: info.event.id}),\r\n          })\r\n          .then(response =&gt; response.json())\r\n          .then(data =&gt; {\r\n            <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span> (data.status == <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">1<\/span>) {\r\n              Swal.fire(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Event deleted successfully!'<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">''<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'success'<\/span>);\r\n            } <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">else<\/span> {\r\n              Swal.fire(data.error, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">''<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'error'<\/span>);\r\n            }\r\n\r\n            <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Refetch events from all sources and rerender<\/span>\r\n            calendar.refetchEvents();\r\n          })\r\n          .catch(<span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">console<\/span>.error);\r\n        } <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">else<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span> (result.isDenied) {\r\n          <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Edit and update event<\/span>\r\n          Swal.fire({\r\n            title: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Edit Event'<\/span>,\r\n            html:\r\n              <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;input id=\"swalEvtTitle_edit\" class=\"swal2-input\" placeholder=\"Enter title\" value=\"'<\/span>+info.event.title+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'\"&gt;'<\/span> +\r\n              <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;textarea id=\"swalEvtDesc_edit\" class=\"swal2-input\" placeholder=\"Enter description\"&gt;'<\/span>+info.event.extendedProps.description+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;\/textarea&gt;'<\/span> +\r\n              <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;input id=\"swalEvtURL_edit\" class=\"swal2-input\" placeholder=\"Enter URL\" value=\"'<\/span>+info.event.url+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'\"&gt;'<\/span>,\r\n            focusConfirm: <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">false<\/span>,\r\n            confirmButtonText: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Submit'<\/span>,\r\n            preConfirm: () =&gt; {\r\n            <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">return<\/span> [\r\n              <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'swalEvtTitle_edit'<\/span>).value,\r\n              <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'swalEvtDesc_edit'<\/span>).value,\r\n              <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'swalEvtURL_edit'<\/span>).value\r\n            ]\r\n            }\r\n          }).then((result) =&gt; {\r\n            <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span> (result.value) {\r\n              <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Edit event<\/span>\r\n              fetch(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"eventHandler.php\"<\/span>, {\r\n                method: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"POST\"<\/span>,\r\n                headers: { <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"Content-Type\"<\/span>: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"application\/json\"<\/span> },\r\n                body: <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">JSON<\/span>.stringify({ request_type:<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'editEvent'<\/span>, start:info.event.startStr, end:info.event.endStr, event_id: info.event.id, event_data: result.value})\r\n              })\r\n              .then(response =&gt; response.json())\r\n              .then(data =&gt; {\r\n                <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span> (data.status == <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">1<\/span>) {\r\n                  Swal.fire(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Event updated successfully!'<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">''<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'success'<\/span>);\r\n                } <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">else<\/span> {\r\n                  Swal.fire(data.error, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">''<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'error'<\/span>);\r\n                }\r\n\r\n                <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Refetch events from all sources and rerender<\/span>\r\n                calendar.refetchEvents();\r\n              })\r\n              .catch(<span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">console<\/span>.error);\r\n            }\r\n          });\r\n        } <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">else<\/span> {\r\n          Swal.close();\r\n        }\r\n      });\r\n    }\r\n  });\r\n\r\n  calendar.render();\r\n});<\/pre>\n<h2>Server-side Handler Script with PHP and MySQL<\/h2>\n<p>The following code snippet shows how to handle the List\/View\/Add\/Edit\/Update\/Delete functionality from the server-side using PHP and MySQL.<\/p>\n<p><b>Fetch Events (fetchEvents.php):<\/b><\/p>\n<ul class=\"bullet_disk_list\">\n<li>Fetch the events from the database.<\/li>\n<li>Render event data in JSON format using json_encode() function.<\/li>\n<\/ul>\n<pre><span style=\"color: #0000BB\">&lt;?php&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Include&nbsp;database&nbsp;configuration&nbsp;file&nbsp; <br \/><\/span><span style=\"color: #007700\">require_once&nbsp;<\/span><span style=\"color: #DD0000\">'dbConfig.php'<\/span><span style=\"color: #007700\">; <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Filter&nbsp;events&nbsp;by&nbsp;calendar&nbsp;date <br \/><\/span><span style=\"color: #0000BB\">$where_sql&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">; <br \/>if(!empty(<\/span><span style=\"color: #0000BB\">$_GET<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'start'<\/span><span style=\"color: #007700\">])&nbsp;&amp;&amp;&nbsp;!empty(<\/span><span style=\"color: #0000BB\">$_GET<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'end'<\/span><span style=\"color: #007700\">])){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$where_sql&nbsp;<\/span><span style=\"color: #007700\">.=&nbsp;<\/span><span style=\"color: #DD0000\">\"&nbsp;WHERE&nbsp;start&nbsp;BETWEEN&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$_GET<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'start'<\/span><span style=\"color: #007700\">].<\/span><span style=\"color: #DD0000\">\"'&nbsp;AND&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$_GET<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'end'<\/span><span style=\"color: #007700\">].<\/span><span style=\"color: #DD0000\">\"'&nbsp;\"<\/span><span style=\"color: #007700\">; <br \/>} <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Fetch&nbsp;events&nbsp;from&nbsp;database <br \/><\/span><span style=\"color: #0000BB\">$sql&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"SELECT&nbsp;*&nbsp;FROM&nbsp;events&nbsp;<\/span><span style=\"color: #0000BB\">$where_sql<\/span><span style=\"color: #DD0000\">\"<\/span><span style=\"color: #007700\">; <br \/><\/span><span style=\"color: #0000BB\">$result&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">query<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$sql<\/span><span style=\"color: #007700\">);&nbsp; <br \/> <br \/><\/span><span style=\"color: #0000BB\">$eventsArr&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;array(); <br \/>if(<\/span><span style=\"color: #0000BB\">$result<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">num_rows&nbsp;<\/span><span style=\"color: #007700\">&gt;&nbsp;<\/span><span style=\"color: #0000BB\">0<\/span><span style=\"color: #007700\">){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;while(<\/span><span style=\"color: #0000BB\">$row&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$result<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">fetch_assoc<\/span><span style=\"color: #007700\">()){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">array_push<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$eventsArr<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$row<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>} <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Render&nbsp;event&nbsp;data&nbsp;in&nbsp;JSON&nbsp;format <br \/><\/span><span style=\"color: #007700\">echo&nbsp;<\/span><span style=\"color: #0000BB\">json_encode<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$eventsArr<\/span><span style=\"color: #007700\">);<\/span><\/pre>\n<p>The <code>eventHandler.php<\/code> file is used to handle Add and Delete functionality. Based on the <code>request_type<\/code> param, the code block is executed.<\/p>\n<p><b>Add Event (eventHandler.php):<\/b><br \/>\nThe request is accepted if the <code>request_type=addEvent<\/code>.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Retrieve the event details from the POST input fields.<\/li>\n<li>Insert event data in the database using MySQL prepare statement.<\/li>\n<li>Return status response in JSON format.<\/li>\n<\/ul>\n<p><b>Update Event (eventHandler.php):<\/b><br \/>\nThe request is accepted if the <code>request_type=editEvent<\/code>.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Retrieve the event reference ID from the POST body.<\/li>\n<li>Retrieve the event data from the POST input fields.<\/li>\n<li>Update event data in the database based on the event id.<\/li>\n<li>Return status response in JSON format.<\/li>\n<\/ul>\n<p><b>Delete Event (eventHandler.php):<\/b><br \/>\nThe request is accepted if the <code>request_type=deleteEvent<\/code>.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Retrieve the event reference ID from the POST body.<\/li>\n<li>Delete event data from the database.<\/li>\n<li>Return status response in JSON format.<\/li>\n<\/ul>\n<pre><span style=\"color: #0000BB\">&lt;?php <br \/>&nbsp;&nbsp; <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Include&nbsp;database&nbsp;configuration&nbsp;file&nbsp; <br \/><\/span><span style=\"color: #007700\">require_once&nbsp;<\/span><span style=\"color: #DD0000\">'dbConfig.php'<\/span><span style=\"color: #007700\">; <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Retrieve&nbsp;JSON&nbsp;from&nbsp;POST&nbsp;body <br \/><\/span><span style=\"color: #0000BB\">$jsonStr&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">file_get_contents<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">'php:\/\/input'<\/span><span style=\"color: #007700\">); <br \/><\/span><span style=\"color: #0000BB\">$jsonObj&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">json_decode<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$jsonStr<\/span><span style=\"color: #007700\">); <br \/> <br \/>if(<\/span><span style=\"color: #0000BB\">$jsonObj<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">request_type&nbsp;<\/span><span style=\"color: #007700\">==&nbsp;<\/span><span style=\"color: #DD0000\">'addEvent'<\/span><span style=\"color: #007700\">){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$start&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$jsonObj<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">start<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$end&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$jsonObj<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">end<\/span><span style=\"color: #007700\">; <br \/> <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$event_data&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$jsonObj<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">event_data<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$eventTitle&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;!empty(<\/span><span style=\"color: #0000BB\">$event_data<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #0000BB\">0<\/span><span style=\"color: #007700\">])?<\/span><span style=\"color: #0000BB\">$event_data<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #0000BB\">0<\/span><span style=\"color: #007700\">]:<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$eventDesc&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;!empty(<\/span><span style=\"color: #0000BB\">$event_data<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #0000BB\">1<\/span><span style=\"color: #007700\">])?<\/span><span style=\"color: #0000BB\">$event_data<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #0000BB\">1<\/span><span style=\"color: #007700\">]:<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$eventURL&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;!empty(<\/span><span style=\"color: #0000BB\">$event_data<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #0000BB\">2<\/span><span style=\"color: #007700\">])?<\/span><span style=\"color: #0000BB\">$event_data<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #0000BB\">2<\/span><span style=\"color: #007700\">]:<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;if(!empty(<\/span><span style=\"color: #0000BB\">$eventTitle<\/span><span style=\"color: #007700\">)){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Insert&nbsp;event&nbsp;data&nbsp;into&nbsp;the&nbsp;database <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$sqlQ&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"INSERT&nbsp;INTO&nbsp;events&nbsp;(title,description,url,start,end)&nbsp;VALUES&nbsp;(?,?,?,?,?)\"<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$stmt&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">prepare<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$sqlQ<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$stmt<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">bind_param<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">\"sssss\"<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$eventTitle<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$eventDesc<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$eventURL<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$start<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$end<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$insert&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$stmt<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">execute<\/span><span style=\"color: #007700\">(); <br \/> <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(<\/span><span style=\"color: #0000BB\">$insert<\/span><span style=\"color: #007700\">){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$output&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;[ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'status'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">1 <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">]; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;<\/span><span style=\"color: #0000BB\">json_encode<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$output<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;<\/span><span style=\"color: #0000BB\">json_encode<\/span><span style=\"color: #007700\">([<\/span><span style=\"color: #DD0000\">'error'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'Event&nbsp;Add&nbsp;request&nbsp;failed!'<\/span><span style=\"color: #007700\">]); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>}elseif(<\/span><span style=\"color: #0000BB\">$jsonObj<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">request_type&nbsp;<\/span><span style=\"color: #007700\">==&nbsp;<\/span><span style=\"color: #DD0000\">'editEvent'<\/span><span style=\"color: #007700\">){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$start&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$jsonObj<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">start<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$end&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$jsonObj<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">end<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$event_id&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$jsonObj<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">event_id<\/span><span style=\"color: #007700\">; <br \/> <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$event_data&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$jsonObj<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">event_data<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$eventTitle&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;!empty(<\/span><span style=\"color: #0000BB\">$event_data<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #0000BB\">0<\/span><span style=\"color: #007700\">])?<\/span><span style=\"color: #0000BB\">$event_data<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #0000BB\">0<\/span><span style=\"color: #007700\">]:<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$eventDesc&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;!empty(<\/span><span style=\"color: #0000BB\">$event_data<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #0000BB\">1<\/span><span style=\"color: #007700\">])?<\/span><span style=\"color: #0000BB\">$event_data<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #0000BB\">1<\/span><span style=\"color: #007700\">]:<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$eventURL&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;!empty(<\/span><span style=\"color: #0000BB\">$event_data<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #0000BB\">2<\/span><span style=\"color: #007700\">])?<\/span><span style=\"color: #0000BB\">$event_data<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #0000BB\">2<\/span><span style=\"color: #007700\">]:<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;if(!empty(<\/span><span style=\"color: #0000BB\">$eventTitle<\/span><span style=\"color: #007700\">)){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Update&nbsp;event&nbsp;data&nbsp;into&nbsp;the&nbsp;database <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$sqlQ&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"UPDATE&nbsp;events&nbsp;SET&nbsp;title=?,description=?,url=?,start=?,end=?&nbsp;WHERE&nbsp;id=?\"<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$stmt&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">prepare<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$sqlQ<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$stmt<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">bind_param<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">\"sssssi\"<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$eventTitle<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$eventDesc<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$eventURL<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$start<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$end<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$event_id<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$update&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$stmt<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">execute<\/span><span style=\"color: #007700\">(); <br \/> <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(<\/span><span style=\"color: #0000BB\">$update<\/span><span style=\"color: #007700\">){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$output&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;[ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'status'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">1 <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">]; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;<\/span><span style=\"color: #0000BB\">json_encode<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$output<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;<\/span><span style=\"color: #0000BB\">json_encode<\/span><span style=\"color: #007700\">([<\/span><span style=\"color: #DD0000\">'error'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'Event&nbsp;Update&nbsp;request&nbsp;failed!'<\/span><span style=\"color: #007700\">]); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>}elseif(<\/span><span style=\"color: #0000BB\">$jsonObj<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">request_type&nbsp;<\/span><span style=\"color: #007700\">==&nbsp;<\/span><span style=\"color: #DD0000\">'deleteEvent'<\/span><span style=\"color: #007700\">){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$id&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$jsonObj<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">event_id<\/span><span style=\"color: #007700\">; <br \/> <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$sql&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"DELETE&nbsp;FROM&nbsp;events&nbsp;WHERE&nbsp;id=<\/span><span style=\"color: #0000BB\">$id<\/span><span style=\"color: #DD0000\">\"<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$delete&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">query<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$sql<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;if(<\/span><span style=\"color: #0000BB\">$delete<\/span><span style=\"color: #007700\">){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$output&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;[ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'status'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">1 <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">]; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;<\/span><span style=\"color: #0000BB\">json_encode<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$output<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;}else{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;<\/span><span style=\"color: #0000BB\">json_encode<\/span><span style=\"color: #007700\">([<\/span><span style=\"color: #DD0000\">'error'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'Event&nbsp;Delete&nbsp;request&nbsp;failed!'<\/span><span style=\"color: #007700\">]); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>} <br \/> <br \/><\/span><span style=\"color: #0000BB\">?&gt;<\/span><\/pre>\n<p class=\"seeAlso\"><span><\/span><a href=\"https:\/\/www.codexworld.com\/build-event-calendar-using-jquery-ajax-php\/\">Build an Event Calendar with PHP using jQuery, Ajax, and MySQL<\/a><\/p>\n<h2>Conclusion<\/h2>\n<p>This guide helps you to create an <b>event calendar with PHP using the FullCalendar<\/b> plugin. The example code shows how to integrate list\/view\/add\/edit\/update\/delete functionality with the FullCalendar library using PHP and MySQL. You can allow the user to manage events on a full-sized calendar dynamically. The functionality of the event calendar can be enhanced easily with FullCalendar as per your needs.<br \/>\nIf you want to add an event for multiple days, the event creation form requires inputs for FromDate and ToDate. Just submit the service request from the link below for functionality enhancement as needed. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Event Calendar lists the events date-wise in a large calendar view. The events are fetched dynamically and listed under the date cell. An event calendar makes it easier to find the events for a <\/p>\n","protected":false},"author":1,"featured_media":5177,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[4],"tags":[89,88,364,66,166,19,14,299],"class_list":["post-4998","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php","tag-calendar","tag-eventcalendar","tag-fullcalendar","tag-javascript","tag-library","tag-mysql","tag-php","tag-plugin","cat-4-id","has_thumb"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>PHP Event Calendar using FullCalendar JS Library - CodexWorld<\/title>\n<meta name=\"description\" content=\"PHP Event Calendar with FullCalendar - Build an event calendar with PHP using the FullCalendar JavaScript library. List, view, add, edit, update and delete events from the database with calendar.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codexworld.com\/php-event-calendar-using-fullcalendar-javascript-library\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"PHP Event Calendar using FullCalendar JS Library - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"PHP Event Calendar with FullCalendar - Build an event calendar with PHP using the FullCalendar JavaScript library. List, view, add, edit, update and delete events from the database with calendar.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/php-event-calendar-using-fullcalendar-javascript-library\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-11T05:11:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-22T05:28:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2022\/07\/php-event-calendar-using-fullcalendar-javascript-library-add-edit-delete-operations-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/php-event-calendar-using-fullcalendar-javascript-library\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/php-event-calendar-using-fullcalendar-javascript-library\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"PHP Event Calendar using FullCalendar JS Library\",\"datePublished\":\"2022-07-11T05:11:43+00:00\",\"dateModified\":\"2025-08-22T05:28:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/php-event-calendar-using-fullcalendar-javascript-library\\\/\"},\"wordCount\":960,\"commentCount\":7,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/php-event-calendar-using-fullcalendar-javascript-library\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2022\\\/07\\\/php-event-calendar-using-fullcalendar-javascript-library-add-edit-delete-operations-codexworld.png\",\"keywords\":[\"Calendar\",\"EventCalendar\",\"FullCalendar\",\"JavaScript\",\"Library\",\"MySQL\",\"PHP\",\"Plugin\"],\"articleSection\":[\"PHP\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/php-event-calendar-using-fullcalendar-javascript-library\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/php-event-calendar-using-fullcalendar-javascript-library\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/php-event-calendar-using-fullcalendar-javascript-library\\\/\",\"name\":\"PHP Event Calendar using FullCalendar JS Library - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/php-event-calendar-using-fullcalendar-javascript-library\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/php-event-calendar-using-fullcalendar-javascript-library\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2022\\\/07\\\/php-event-calendar-using-fullcalendar-javascript-library-add-edit-delete-operations-codexworld.png\",\"datePublished\":\"2022-07-11T05:11:43+00:00\",\"dateModified\":\"2025-08-22T05:28:08+00:00\",\"description\":\"PHP Event Calendar with FullCalendar - Build an event calendar with PHP using the FullCalendar JavaScript library. List, view, add, edit, update and delete events from the database with calendar.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/php-event-calendar-using-fullcalendar-javascript-library\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/php-event-calendar-using-fullcalendar-javascript-library\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/php-event-calendar-using-fullcalendar-javascript-library\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2022\\\/07\\\/php-event-calendar-using-fullcalendar-javascript-library-add-edit-delete-operations-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2022\\\/07\\\/php-event-calendar-using-fullcalendar-javascript-library-add-edit-delete-operations-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"php-event-calendar-using-fullcalendar-javascript-library-add-edit-delete-operations-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/php-event-calendar-using-fullcalendar-javascript-library\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"PHP Event Calendar using FullCalendar JS Library\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web &amp; Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"PHP Event Calendar using FullCalendar JS Library - CodexWorld","description":"PHP Event Calendar with FullCalendar - Build an event calendar with PHP using the FullCalendar JavaScript library. List, view, add, edit, update and delete events from the database with calendar.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codexworld.com\/php-event-calendar-using-fullcalendar-javascript-library\/","og_locale":"en_US","og_type":"article","og_title":"PHP Event Calendar using FullCalendar JS Library - CodexWorld","og_description":"PHP Event Calendar with FullCalendar - Build an event calendar with PHP using the FullCalendar JavaScript library. List, view, add, edit, update and delete events from the database with calendar.","og_url":"https:\/\/www.codexworld.com\/php-event-calendar-using-fullcalendar-javascript-library\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2022-07-11T05:11:43+00:00","article_modified_time":"2025-08-22T05:28:08+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2022\/07\/php-event-calendar-using-fullcalendar-javascript-library-add-edit-delete-operations-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/php-event-calendar-using-fullcalendar-javascript-library\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/php-event-calendar-using-fullcalendar-javascript-library\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"PHP Event Calendar using FullCalendar JS Library","datePublished":"2022-07-11T05:11:43+00:00","dateModified":"2025-08-22T05:28:08+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/php-event-calendar-using-fullcalendar-javascript-library\/"},"wordCount":960,"commentCount":7,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/php-event-calendar-using-fullcalendar-javascript-library\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2022\/07\/php-event-calendar-using-fullcalendar-javascript-library-add-edit-delete-operations-codexworld.png","keywords":["Calendar","EventCalendar","FullCalendar","JavaScript","Library","MySQL","PHP","Plugin"],"articleSection":["PHP"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/php-event-calendar-using-fullcalendar-javascript-library\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/php-event-calendar-using-fullcalendar-javascript-library\/","url":"https:\/\/www.codexworld.com\/php-event-calendar-using-fullcalendar-javascript-library\/","name":"PHP Event Calendar using FullCalendar JS Library - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/php-event-calendar-using-fullcalendar-javascript-library\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/php-event-calendar-using-fullcalendar-javascript-library\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2022\/07\/php-event-calendar-using-fullcalendar-javascript-library-add-edit-delete-operations-codexworld.png","datePublished":"2022-07-11T05:11:43+00:00","dateModified":"2025-08-22T05:28:08+00:00","description":"PHP Event Calendar with FullCalendar - Build an event calendar with PHP using the FullCalendar JavaScript library. List, view, add, edit, update and delete events from the database with calendar.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/php-event-calendar-using-fullcalendar-javascript-library\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/php-event-calendar-using-fullcalendar-javascript-library\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/php-event-calendar-using-fullcalendar-javascript-library\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2022\/07\/php-event-calendar-using-fullcalendar-javascript-library-add-edit-delete-operations-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2022\/07\/php-event-calendar-using-fullcalendar-javascript-library-add-edit-delete-operations-codexworld.png","width":1366,"height":768,"caption":"php-event-calendar-using-fullcalendar-javascript-library-add-edit-delete-operations-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/php-event-calendar-using-fullcalendar-javascript-library\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"PHP Event Calendar using FullCalendar JS Library"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web &amp; Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2022\/07\/php-event-calendar-using-fullcalendar-javascript-library-add-edit-delete-operations-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-1iC","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/4998","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=4998"}],"version-history":[{"count":8,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/4998\/revisions"}],"predecessor-version":[{"id":5862,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/4998\/revisions\/5862"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/5177"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=4998"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=4998"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=4998"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}