Codeigniter 4 Fullcalendar Example Tutorial From Scratch

Apr 19, 2022

.

Admin

Codeigniter 4 Fullcalendar Example Tutorial From Scratch

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

#Codeigniter 4