FullCalendar event CRUD using ajax in Codeigniter 4 apps; In this tutorial, i will provide you step by step guide on how to integrate fullcalendar and create event crud(create, read, update and delete) from MySQL database in codeigniter 4.
Codeigniter 4 FullCalendar Event CRUD using Ajax Example
Let’s use the following steps to create ajax crud with FullCalendar in CodeIgniter 4 apps:
- Install Codeigniter 4 Application
- Basic App Configurations
- Create Database and Table
- Connect App to Database
- Create FullCalendar Modal and Controller Class
- Create Display FullCalendar Views
- Setup Routes
- Start Development server
Step 1 – Install Codeigniter 4 Application
First of all, you need to ownload the latest version of Codeigniter 4. So, visit this link https://codeigniter.com/download Download Codeigniter 4 app and unzip the setup in your local system xampp/htdocs/ .
Note that, please change the download folder name “demo”.
Step 2 – Basic App Configurations
Now, you need to some basic configuration on the app/config/app.php file, so let’s go to application/config/config.php and open this file on text editor.
Set Base URL like this
public $baseURL = 'http://localhost:8080'; To public $baseURL = 'http://localhost/demo/';
Step 3 – Create Database and Table
Create database and table; so open your phpmyadmin and execute the following sql query on it to create table:
CREATE TABLE IF NOT EXISTS `events` ( `id` int(11) NOT NULL AUTO_INCREMENT, `title` varchar(255) NOT NULL, `start_date` date NOT NULL, `end_date` date NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;
Step 4 – Connect App to Database
To connect your codeigniter 4 app to the database. So, visit app/Config/ directory and open Database.php. Then add the databasae details like below into database.php file:
public $default = [ 'DSN' => '', 'hostname' => 'localhost', 'username' => 'test', 'password' => '4Mu99BhzK8dr4vF1', 'database' => 'demo', 'DBDriver' => 'MySQLi', 'DBPrefix' => '', 'pConnect' => false, 'DBDebug' => (ENVIRONMENT !== 'development'), 'cacheOn' => false, 'cacheDir' => '', 'charset' => 'utf8', 'DBCollat' => 'utf8_general_ci', 'swapPre' => '', 'encrypt' => false, 'compress' => false, 'strictOn' => false, 'failover' => [], 'port' => 3306, ];
Step 5 – Create FullCalendar Modal and Controller Class
Create EventModel.php file. So, visit app/Models directory and create EventModel.php.Then add the following code into it:
<?php namespace App\Models; use CodeIgniter\Model; class EventModel extends Model { protected $DBGroup = 'default'; protected $table = 'events'; protected $primaryKey = 'id'; protected $useAutoIncrement = true; protected $insertID = 0; protected $returnType = 'array'; protected $useSoftDelete = false; protected $protectFields = true; protected $allowedFields = [ 'title', 'start', 'end' ]; // Dates protected $useTimestamps = false; protected $dateFormat = 'datetime'; protected $createdField = 'created_at'; protected $updatedField = 'updated_at'; protected $deletedField = 'deleted_at'; // Validation protected $validationRules = []; protected $validationMessages = []; protected $skipValidation = false; protected $cleanValidationRules = true; // Callbacks protected $allowCallbacks = true; protected $beforeInsert = []; protected $afterInsert = []; protected $beforeUpdate = []; protected $afterUpdate = []; protected $beforeFind = []; protected $afterFind = []; protected $beforeDelete = []; protected $afterDelete = []; }
Create FullcalendarController.php file. So, visit app/Controllers directory and create FullcalendarController.php.Then add the following code into it:
<?php namespace App\Controllers; use App\Controllers\BaseController; use App\Models\EventModel; class FullcalendarController extends BaseController { public function __construct() { helper(["html"]); } public function index() { return view('fullcalendar'); } public function loadData() { $event = new EventModel(); // on page load this ajax code block will be run $data = $event->where([ 'start >=' => $this->request->getVar('start'), 'end <='=> $this->request->getVar('end') ])->findAll(); return json_encode($data); } public function ajax() { $event = new EventModel(); switch ($this->request->getVar('type')) { // For add EventModel case 'add': $data = [ 'title' => $this->request->getVar('title'), 'start' => $this->request->getVar('start'), 'end' => $this->request->getVar('end'), ]; $event->insert($data); return json_encode($event); break; // For update EventModel case 'update': $data = [ 'title' => $this->request->getVar('title'), 'start' => $this->request->getVar('start'), 'end' => $this->request->getVar('end'), ]; $event_id = $this->request->getVar('id'); $event->update($event_id, $data); return json_encode($event); break; // For delete EventModel case 'delete': $event_id = $this->request->getVar('id'); $event->delete($event_id); return json_encode($event); break; default: break; } } }
- The
index()
function renders fullcalendar event with data on template into the view.
Step 6 – Create Display FullCalendar Views
Create fullcalendar.php view file, so visit app/views/ directory and create fullcalendar.php file. Then add the following HTML into fullcalendar.php file:
<!DOCTYPE html> <html> <head> <title>CodeIgniter 4 Fullcalender Tutorial - Laratutorials.com</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <!--fullcalendar plugin files --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.js"></script> <!-- for plugin notification --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script> </head> <body> <div class="container"> <h3 style="text-align: center">CodeIgniter 4 Fullcalendar Tutorial</h3> <div id="calendar"></div> </div> <script> var site_url = "<?= site_url() ?>"; </script> $(document).ready(function() { var calendar = $('#calendar').fullCalendar({ editable: true, events: site_url + "/event", displayEventTime: false, editable: true, eventRender: function(event, element, view) { if (event.allDay === 'true') { event.allDay = true; } else { event.allDay = false; } }, selectable: true, selectHelper: true, select: function(start, end, allDay) { var title = prompt('Event Title:'); if (title) { var start = $.fullCalendar.formatDate(start, "Y-MM-DD"); var end = $.fullCalendar.formatDate(end, "Y-MM-DD"); $.ajax({ url: site_url + "/eventAjax", data: { title: title, start: start, end: end, type: 'add' }, type: "POST", success: function(data) { displayMessage("Event Created Successfully"); calendar.fullCalendar('renderEvent', { id: data.id, title: title, start: start, end: end, allDay: allDay }, true); calendar.fullCalendar('unselect'); } }); } }, eventDrop: function(event, delta) { var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD"); var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD"); $.ajax({ url: site_url + '/eventAjax', data: { title: event.title, start: start, end: end, id: event.id, type: 'update' }, type: "POST", success: function(response) { displayMessage("Event Updated Successfully"); } }); }, eventClick: function(event) { var deleteMsg = confirm("Do you really want to delete?"); if (deleteMsg) { $.ajax({ type: "POST", url: site_url + '/eventAjax', data: { id: event.id, type: 'delete' }, success: function(response) { calendar.fullCalendar('removeEvents', event.id); displayMessage("Event Deleted Successfully"); } }); } } }); }); function displayMessage(message) { toastr.success(message, 'Event'); } </body> </html>
Step 7 – Setup Routes
To define a route, So, visit app/Config/ directory and open Routes.php file. Then add the following routes into it:
// $routes->setDefaultController('FullcalendarController'); $routes->get('/', 'FullcalendarController::index');
Step 8 – Start Development server
Execute the following command into command prompt or terminal to start the codeigniter 4 application:
php spark serve
Then visit your web browser and hit the following url on it:
http://localhost/demo/ OR http://localhost:8080/
Conclusion
FullCalendar event CRUD using ajax in Codeigniter 4 apps; In this tutorial, You have learned how to integrate fullcalendar and create event crud(create, read, update and delete) from MySQL database in codeigniter 4.
Recommended CodeIgniter 4 Tutorial
- How to Install / Download Codeigniter 4 By Manual, Composer, Git
- How to Remove Public and Index.php From URL in Codeigniter 4
- Codeigniter 4 – Form Validation Example Tutorial
- How to add jQuery Validation on Form in Codeigniter 4 Example
- Codeigniter 4 Ajax Form Submit Validation Example
- Codeigniter 4 File Upload Validation Example
- Image Upload with Validation in Codeigniter 4
- Codeigniter 4 Image Upload Preview Using jQuery Example
- Codeigniter 4 Ajax Image Upload Preview Example
- How to Upload Multiple Images in Codeigniter 4
- Codeigniter 4 Multiple Image Upload with Preview
- Codeigniter 4 Pagination Example; Create Pagination in Codeigniter
- Simple Codeigniter 4 CRUD with Bootstrap and MySQL Example
- Codeigniter 4 CRUD with Datatables Example
- Codeigniter 4 Image Crop and Save using Croppie Example
- Dependent Dropdown using jQuery Ajax in Codeigniter 4
- CodeIgniter 4 Rest Api CRUD Example
- Codeigniter 4 Login Registration and Logout Example
- Get Address from Latitude and Longitude in Codeigniter 4
- Codeigniter 4 Google Column Charts Example
- Codeigniter 4 Google Place Autocomplete Address
- Export Data to Excel Example in Codeigniter 4
- Codeigniter 4 Google ReCaptcha V2 Example
- Google Pie Chart in Codeigniter 4