19-Apr-2022
.
Admin
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
