Codeigniter 4 Fullcalendar Example Tutorial

September 5, 2021 XpertPhp

In this article, we will explain to you how to integrate fullcalendar example in Codeigniter 4(Codeigniter 4 Fullcalendar Example Tutorial). we can easily select one date or multiple dates in CodeIgniter 4.

In this example, we use jQuery, jQuery UI, FullCalendar js, and Moment.js. which is useful for appointment booking, event scheduling, task management, etc. so you can see our following example.

Overview
Step 1: Download Codeigniter
Step 2: Basic Configurations
Step 3: Create a Database in table
Step 4: Connect to Database
Step 5: Create Controller and Model
Step 6: Create Views Files
Step 7: Run The Application

Step 1: Download Codeigniter
If you want to download or install the latest version of CodeIgniter 4 then you can go to Codeigniter’s official site and download the latest version of Codeigniter 4. after the downloaded you can configure in “xampp/htdocs/” directory.

Step 2: Basic Configurations
If you want to Basic Configurations in your project then you can below Url.
Codeigniter 4 Removing Index.Php From Url

Step 3: Create a Database in table
In this step, We will create the database and 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=1 ;

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=1 ;

Step 4: Connect to Database
Go to the “app/Config/Database.php” folder and open the database.php file some changes in this file like hostname, database username, database password, and database name.

	public $default = [
		'DSN'      => '',
		'hostname' => 'localhost',
		'username' => 'root',
		'password' => '',
		'database' => 'ci4_demo',
		'DBDriver' => 'MySQLi',
		'DBPrefix' => '',
		'pConnect' => false,
		'DBDebug'  => (ENVIRONMENT !== 'production'),
		'cacheOn'  => false,
		'cacheDir' => '',
		'charset'  => 'utf8',
		'DBCollat' => 'utf8_general_ci',
		'swapPre'  => '',
		'encrypt'  => false,
		'compress' => false,
		'strictOn' => false,
		'failover' => [],
		'port'     => 3306,
	];

public $default = [

'DSN' => '',

'hostname' => 'localhost',

'username' => 'root',

'password' => '',

'database' => 'ci4_demo',

'DBDriver' => 'MySQLi',

'DBPrefix' => '',

'pConnect' => false,

'DBDebug' => (ENVIRONMENT !== 'production'),

'cacheOn' => false,

'cacheDir' => '',

'charset' => 'utf8',

'DBCollat' => 'utf8_general_ci',

'swapPre' => '',

'encrypt' => false,

'compress' => false,

'strictOn' => false,

'failover' => [],

'port' => 3306,

];

Step 5: Create Controller and Model
In this step, we will create the “Fullcalendar.php” controller and the “EventModel.php” model.
app/Controllers/Fullcalendar.php

<?php 

namespace App\Controllers;
 
use CodeIgniter\Controller;
use App\Models\EventModel;
 
class Fullcalendar extends Controller
{
 
	public function __construct()
	{
		helper(['html','form', 'url']);
	}
	public function index()
	{   
		return view('event');
	}
	
	public function loadData()
	{
		$model = new EventModel();

		$data = $model->select('id, title, start_date as start, end_date as end')->where([
			'start_date >=' => $this->request->getVar('start'),
			'end_date <='=> $this->request->getVar('end')
		])->findAll();

		return json_encode($data);
	}

	public function eventAjax()
	{
		$model = new EventModel();

		switch ($this->request->getVar('type')) {

			// For add Event
			case 'add':
				$data = [
					'title' => $this->request->getVar('title'),
					'start_date' => $this->request->getVar('start'),
					'end_date' => $this->request->getVar('end'),
				];
				$model->insert($data);
				return json_encode($model);
				break;

			// For update Event
			case 'update':
				$data = [
					'title' => $this->request->getVar('title'),
					'start_date' => $this->request->getVar('start'),
					'end_date' => $this->request->getVar('end'),
				];

				$event_id = $this->request->getVar('id');
				
				$model->update($event_id, $data);

				return json_encode($model);
				break;

			// For delete Event
			case 'delete':

				$event_id = $this->request->getVar('id');

				$model->delete($event_id);

				return json_encode($model);
				break;

			default:
				break;
		}
	}
 
}

?>

<?php

namespace App\Controllers;

use CodeIgniter\Controller;

use App\Models\EventModel;

class Fullcalendar extends Controller

{

public function __construct()

{

helper(['html','form', 'url']);

}

public function index()

{

return view('event');

}

public function loadData()

{

$model = new EventModel();

$data = $model->select('id, title, start_date as start, end_date as end')->where([

'start_date >=' => $this->request->getVar('start'),

'end_date <='=> $this->request->getVar('end')

])->findAll();

return json_encode($data);

}

public function eventAjax()

{

$model = new EventModel();

switch ($this->request->getVar('type')) {

// For add Event

case 'add':

$data = [

'title' => $this->request->getVar('title'),

'start_date' => $this->request->getVar('start'),

'end_date' => $this->request->getVar('end'),

];

$model->insert($data);

return json_encode($model);

break;

// For update Event

case 'update':

$data = [

'title' => $this->request->getVar('title'),

'start_date' => $this->request->getVar('start'),

'end_date' => $this->request->getVar('end'),

];

$event_id = $this->request->getVar('id');

$model->update($event_id, $data);

return json_encode($model);

break;

// For delete Event

case 'delete':

$event_id = $this->request->getVar('id');

$model->delete($event_id);

return json_encode($model);

break;

default:

break;

}

app/Models/EventModel.php

<?php 
namespace App\Models;
use CodeIgniter\Database\ConnectionInterface;
use CodeIgniter\Model;
 
class EventModel extends Model
{
    protected $table = 'Events';
 
    protected $allowedFields = ['title','start_date','end_date'];
}
?>

<?php

namespace App\Models;

use CodeIgniter\Database\ConnectionInterface;

use CodeIgniter\Model;

class EventModel extends Model

{

protected $table = 'Events';

protected $allowedFields = ['title','start_date','end_date'];

}

Step 6: Create Views Files
Finally, we will create the event.php in the app/views directory.

app/views/event.php

<!DOCTYPE html>
<html>
<head>
    <title>Codeigniter 4 Fullcalendar Example Tutorial - XpertPhp</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 Example Tutorial - XpertPhp</h3>
    <div id="calendar"></div>
</div>
   
<script>
  var site_url = "<?= site_url() ?>";
  $(document).ready(function() {

    var calendar = $('#calendar').fullCalendar({
        editable: true,
        events: "<?php echo site_url(); ?>fullcalendar/loadData",
        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: "<?php echo site_url(); ?>fullcalendar/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: "<?php echo site_url(); ?>fullcalendar/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: "<?php echo site_url(); ?>fullcalendar/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');
}
</script>  
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

<!DOCTYPE html>

<html>

<head>

<title>Codeigniter 4 Fullcalendar Example Tutorial - XpertPhp</title>

</head>

<body>

<h3 style="text-align: center">Codeigniter 4 Fullcalendar Example Tutorial - XpertPhp</h3>

</div>

var site_url = "<?= site_url() ?>";

$(document).ready(function() {

var calendar = $('#calendar').fullCalendar({

editable: true,

events: "<?php echo site_url(); ?>fullcalendar/loadData",

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: "<?php echo site_url(); ?>fullcalendar/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: "<?php echo site_url(); ?>fullcalendar/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: "<?php echo site_url(); ?>fullcalendar/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');

}

</script>

</body>

</html>

Step 7: Run The Application
We can start the server and run the codeigniter 4 application using the below command.

php spark serve

1	php spark serve

Now we will run our example using the below Url in the browser.

http://localhost:8080/student

1	http://localhost:8080/student

If you liked this article, you can also download it through our Github Repository.

Please follow and like us: