CodeIgniter 4 FullCalendar Example Tutorial Integrating FullCalendar with events in CodeIgniter 4 is a straightforward process that provides a powerful and responsive calendar system for your application. FullCalendar is an open-source jQuery library that allows you to create, edit, and manage events efficiently. With drag-and-drop functionality and customization options, FullCalendar makes event handling seamless.
Table Of Content
1 Prerequisites
1.) PHP version of >= 8.2
2.) Composer
3.) Mysql
2 Introduction
This guide walks you through an example of creating a CRUD application in CodeIgniter 4 to manage events using FullCalendar. You will set up a database, create a migration, define a model, and implement a controller to handle FullCalendar operations.
3 Create / Install a Codeigniter 4 Project
3.1 Install Codeigniter 4 Project
Install CodeIgniter 4 using Composer:
composer create-project codeigniter4/appstarter ci-4-fullcalendar-app
Then, navigate to your project directory:
cd ci-4-fullcalendar-app
Rename
.env and update the database configuration:
# CI_ENVIRONMENT = production
CI_ENVIRONMENT = development
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=ci4_fullcalender
DB_USERNAME=root
DB_PASSWORD=
4 Create Migration and Model
Generate a migration for the events table and define its structure:
php spark make:model Event
Edit
app/Models/Event.php to configure the model:
<?php
namespace App\Models;
use CodeIgniter\Model;
class Event extends Model
{
protected $table = 'events';
protected $primaryKey = 'id';
protected $allowedFields = ['title','start','end', 'created_at','updated_at'];
}
Update the migration file to include fields for the event table, such as title, start, end, created_at, and updated_at.
php spark make:migration AddEvent
Edit the migration file to define the table structure:
<?php
namespace App\Database\Migrations;
use CodeIgniter\Database\Migration;
class CreateEventsTable extends Migration
{
public function up()
{
$this->forge->addField([
'id' => [
'type' => 'BIGINT',
'constraint' => 255,
'unsigned' => true,
'auto_increment' => true
],
'title' => [
'type' => 'VARCHAR',
'constraint' => '255',
],
'start' => [
'type' => 'DATE',
'null' => true
],
'end' => [
'type' => 'DATE',
'null' => true
],
'created_at' => [
'type' => 'TIMESTAMP',
'null' => true
],
'updated_at' => [
'type' => 'TIMESTAMP',
'null' => true
],
]);
$this->forge->addPrimaryKey('id');
$this->forge->createTable('events');
}
public function down()
{
$this->forge->dropTable('events');
}
}
Run the migration:
php spark migrate
5 Create Database Seeder
For seeding test data in the events table, use the Seeder class:
php spark make:seeder EventSeeder
Inside the
EventSeeder.php file, use the Faker library to generate fake data:
<?php
namespace App\Database\Seeds;
use CodeIgniter\Database\Seeder;
use CodeIgniter\I18n\Time;
use App\Models\Event;
class EventSeeder extends Seeder
{
public function run()
{
$event = new Event;
$faker = \Faker\Factory::create();
for ($i = 0; $i < 10; $i++) {
$start = $faker->dateTimeBetween('next Monday', 'next Monday +7 days');
$end = $faker->dateTimeBetween($start, $start->format('Y-m-d').' +3 days');
$event->save(
[
'title' => $faker->name,
'start' => $start->format('Y-m-d'),
'end' => $end->format('Y-m-d'),
'created_at' => Time::createFromTimestamp($faker->unixTime()),
'updated_at' => Time::now()
]
);
}
}
}
Run this below command to insert the data.
php spark db:seed EventSeeder
6 Create New Controller - FullCalenderController
Create a controller, This will handle operations like adding, updating, and deleting events.
php spark make:controller FullCalenderController
In
app/Controllers/FullCalenderController.php , define the index and ajax function:
<?php
namespace App\Controllers;
use App\Controllers\BaseController;
use CodeIgniter\HTTP\ResponseInterface;
use App\Models\Event;
class FullCalenderController extends BaseController
{
public function index()
{
if(!empty($this->request->getGet('start')))
{
$event = new Event();
$data = $event->where('start>=',$this->request->getGet('start'))->where('end<=',$this->request->getGet('end'))->findAll();
return response()->setJSON($data);
}
return view('fullcalender');
}
public function ajax()
{
$event = new Event();
switch ($this->request->getPost('type')) {
case 'add':
$data = [
"title" => $this->request->getPost("title"),
"start" => $this->request->getPost("start"),
"end" => $this->request->getPost("end"),
];
$event_id=$event->insert($data);
$eventData=$event->find($event_id);
return response()->setJSON($eventData);
break;
case 'update':
$data = [
"title" => $this->request->getPost("title"),
"start" => $this->request->getPost("start"),
"end" => $this->request->getPost("end"),
];
$event_id= $event->update( $this->request->getPost("id"), $data);
$eventData=$event->find($event_id);
return response()->setJSON($eventData);
break;
case 'delete':
$eventData = $event->where("id",$this->request->getPost("id"))->delete();
return response()->setJSON($eventData);
break;
default:
# code...
break;
}
}
}
?>
7 Create a View
Develop a view file
(index.php) to display the FullCalendar. Include the FullCalendar and jQuery libraries for rendering and interaction.
<!DOCTYPE html>
<html>
<head>
<title>Codeigniter 4 Fullcalender Tutorial Tutorial - GetSampleCode.com</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />
</head>
<body>
<div class="container">
<div class="card mt-5">
<h3 class="card-header p-3">Codeigniter 4 FullCalender Tutorial Example - GetSampleCode.com</h3>
<div class="card-body">
<div id='calendar'></div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
var calendar = $('#calendar').fullCalendar({
editable: true,
events: "fullcalender",
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: "/fullcalenderAjax",
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: '/fullcalenderAjax',
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: '/fullcalenderAjax',
data: {
id: event.id,
type: 'delete'
},
success: function (response) {
calendar.fullCalendar('removeEvents', event.id);
displayMessage("Event Deleted Successfully");
}
});
}
}
});
});
/*------------------------------------------
--------------------------------------------
Toastr Success Code
--------------------------------------------
--------------------------------------------*/
function displayMessage(message) {
toastr.success(message, 'Event');
}
</script>
</body>
</html>
8 Define a Route
In
app/Config/Routes.php , define routes for your FullCalenderController:
use CodeIgniter\Router\RouteCollection;
/**
* @var RouteCollection $routes
*/
$routes->get('/', 'Home::index');
$routes->get('/fullcalender', 'FullCalenderController::index');
$routes->post('/fullcalenderAjax', 'FullCalenderController::ajax');
9 Folder Structure
10 Run Web Server to Test the App
Start the server using
php spark serve
Access the applicationat
http://localhost:8080/fullcalendar/ 11 Conclusion
This tutorial explained
how to integrate FullCalendar with events in CodeIgniter 4 . With features like drag-and-drop and AJAX integration, FullCalendar enhances event management capabilities. Use this
CodeIgniter 4 FullCalendar example tutorial as a foundation to customize and extend your application.
Tags
