Codeigniter 4 Fullcalendar Example Tutorial

Apr 19, 2022 . Admin

Hi Guys,

Are you looking for example of how to use fullcalendar in codeigniter 4. This article goes in detailed on codeigniter 4 fullcalendar example tutorial from scratch. you'll learn codeigniter 4 fullcalendar ajax crud tutorial example. I would like to show you fullcalendar with php and codeigniter 4 database events. you will do the following things for codeigniter 4 calendar.

In this tutorial I would like to show you codeigniter 4 fullcalendar example tutorial from scratch step by step on how to integrate full calendar in Codeigniter 4 app.

So let's start the example..

Step 1: Install Codeigniter 4

however, if you have not created the codeigniter app, then you may go ahead and execute the below command:

composer create-project codeigniter4/appstarter ci-news

After Download successfully, extract clean new Codeigniter 4 application.

Step 2 : Basic Configurations

So, we will now set basic configuration on the app/config/app.php file, so let’s implement to application/config/config.php and open this file on text editor.

public $baseURL = 'http://localhost:8080';
public $baseURL = 'http://localhost/example/';
Step 3 : Create Table in Database
  `title` varchar(255) NOT NULL,
  `start_date` date NOT NULL,
  `end_date` date NOT NULL,
  PRIMARY KEY (`id`)
Step 4 : Database Configurations application/config/database.php
public $default = [
    'DSN'      => '',
    'hostname' => 'localhost',
    'username' => 'root',
    'password' => '',
    'database' => '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

In this step, go to app/Controllers and create a controller name FullCalendar.php. In this controller, you need to add the following methods into it:

namespace App\Controllers;
use CodeIgniter\Controller;
use CodeIgniter\HTTP\RequestInterface;
class FullCalendar extends Controller
     * Write code on Method
     * @return response()
    public function index() {
        $db = \Config\Database::connect();
        $builder = $db->table('events');   
        $query = $builder->select('*')
        $data = $query->getResult();
        foreach ($data as $key => $value) {
            $data['data'][$key]['title'] = $value->title;
            $data['data'][$key]['start'] = $value->start_date;
            $data['data'][$key]['end'] = $value->end_date;
            $data['data'][$key]['backgroundColor'] = "#00a65a";

        return view('home',$data);
Step 6 : Create Views File

In this step, you need to create view file. So visit your application/views directory and create home.php and then add the following code into:

application/views/home.php file
<!DOCTYPE html>
    <title>Codeigniter Fullcalendar Example Tutorial From Scratch -</title>
    <link rel="stylesheet" href="" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src=""></script>
    <link rel="stylesheet" href="" />
    <script src=""></script>
    <script src=""></script>
<div class="container">
    <h1>Codeigniter Fullcalendar Example Tutorial From Scratch -</h1>
    <div class="row" style="width:50%">
        <div class="col-md-12">
            <div id="calendar"></div>
<script type="text/javascript">
    var events = <?php echo json_encode($data) ?>;
    var date = new Date()
    var d    = date.getDate(),
        m    = date.getMonth(),
        y    = date.getFullYear()
        header    : {
            left  : 'prev,next today',
            center: 'title',
            right : 'month,agendaWeek,agendaDay'
        buttonText: {
            today: 'today',
            month: 'month',
            week : 'week',
            day  : 'day'
        events    : events
Step 7 : Create Route app/Config/Routes.php
$routes->get('/', 'FullCalendar::index');
Step 8 : Run Codeigniter App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Codeigniter app:

php spark serve

Now, Go to your web browser, type the given URL and view the app output:


It will help you...

#Codeigniter 4