Codeigniter 4 Fullcalendar Tutorial Example

torque-programming 0 Comments Codeigniter, Codeigniter 4 Fullcalendar Tutorial Example, Fullcalendar Populate Data from Database in Codeigniter 4, How to Integrate Calendar in Codeigniter 4 6 min read

This tutorial will show you how to use Codeigniter 4 to get data from a database and display it on a fullcalendar. You will learn how to get records from a MySQL database and display them on the fullcalendar in your Codeigniter 4 app. The tutorial will guide you through each step of the process of integrating the fullcalendar into your Codeigniter 4 app.

Fullcalendar Populate Data from Database in Codeigniter 4

Download Codeigniter 4 Project
Basic Configurations
Create Table in Database
Setup Database Credentials
Create Controller
Create View
Create Route
Start Development Server

Step 1: Download Codeigniter 4 Project

Now, let’s get started by downloading the latest version of CodeIgniter 4. To do this, go to this link https://codeigniter.com/download and download the fresh new setup. After downloading, extract the setup and place it in your local system’s xampp/htdocs/ directory. You can also change the folder name from “demo” to any name of your choice.

Step 2: Basic Configurations

Next, we need to configure some basic settings in the app/config/app.php file. To do this, open the file in a text editor by navigating to the application/config/ directory.

Once you have opened the file, you need to set the Base URL by adding the following code:

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

Step 3: Create Table in Database

Next, you’ll need to create a table in your database and add some data for the fullcalendar app in Codeigniter 4. To do this, go to your phpmyadmin panel and run the following SQL query:

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: Setup Database Credentials

Next, we will connect our project to the database. To do this, go to app/Config/Database.php and open the database.php file in a text editor. Once you have opened the file, you need to enter your database details in the file just like this:

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

Now, go to app/Controllers and create a new controller named MorrisChart.php. In this controller, you need to add the following methods:

<?php namespace App\Controllers;
use CodeIgniter\Controller;
use CodeIgniter\HTTP\RequestInterface;
 
 
class FullCalendar extends Controller
{
 
    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 View

Next, we will create a view file named home.php and add the following code to it:

<!DOCTYPE html>
<html>
    <head>
        <title></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 4 Fullcalendar example - torqueprogramming.co.in</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>

Implement Javascript code

To display the data on fullcalendar in codeigniter 4 app, you need to implement some JavaScript code. To do this, simply update the code inside the script tag after the closing of the body tag.

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

Step 7: Create Route

Now, we need to create a route that renders the table into the view. To do this, open the app/Config/Routes.php file and add the following code:

$routes->get('/', 'FullCalendar::index');

Step 8: Start Development Server

Finally, we are ready to start the development server. To do this, open your terminal and execute the following command:

php spark serve

then, Go to the browser and hit below the URL:

http://localhost:8080

You May Also Like

Fullcalendar Populate Data from Database in Codeigniter 4

Recommended Post

Leave a Reply Cancel reply

Read Next