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 4however, 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 ConfigurationsSo, 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.phppublic $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...