Skip to content

All topics  /  CodeIgniter

Codeigniter 4 Fullcalendar Example Tutorial From Scratch

CodeIgniter ·

Teams applying “Codeigniter 4 Fullcalendar Example Tutorial From Scratch” in a production project can use this delivery reference to record implementation, review and debugging time, then compare that effort with tests and shipped functionality instead of treating activity as performance by itself.

Before copying the example into a live application, confirm version-specific behaviour with CodeIgniter and test it against the project’s actual database and runtime.

Hi Friends,

Today our leading topic is codeigniter 4 fullcalendar ajax crud tutorial example. I would like to show you codeigniter 4 fullcalendar example tutorial from scratch. This article goes in detailed on fullcalendar with php and codeigniter 4 database events. We will look at example of codeigniter 4 calendar. follow bellow step for codeigniter 4 calendar example.

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.

Step 1: Install Codeigniter 4


This is optional; 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.

app/config/app.php 

public $baseURL = 'http://localhost:8080';
To
public $baseURL = 'http://localhost/example/';

Step 3 : Create Table in Database 

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 : 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:

app/controller/FullCalendar.php 

<?php
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('*')
                    ->limit(10)->get();

 
        $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>
<html>
<head>
    <title>Codeigniter Fullcalendar Example Tutorial From Scratch - Nicesnippets.com</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
</head>
<body>

   
<div class="container">
    <h1>Codeigniter Fullcalendar Example Tutorial From Scratch - Nicesnippets.com</h1>
    <div class="row" style="width:50%">
        <div class="col-md-12">
            <div id="calendar"></div>
        </div>
    </div>
</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()

            
    $('#calendar').fullCalendar({
        header    : {
            left  : 'prev,next today',
            center: 'title',
            right : 'month,agendaWeek,agendaDay'
        },
        buttonText: {
            today: 'today',
            month: 'month',
            week : 'week',
            day  : 'day'
        },
        events    : events
    })
</script>

    
</body>
</html>

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: 

http://localhost:8080

It will help you...

More on this topic