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.

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 - Mywebtuts.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 - Mywebtuts.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...

#Codeigniter 4

You might also like...