Fetch data from database and display in fullcalendar in codeigniter 4; In this tutorial, i will show you step by step guide on how to integrate fullcalendar in codeigniter 4 and fetch data from MySQL database and display in fullcalendar in codeigniter 4.
FullCalendar is a JavaScript event Calendar that allows you to make easy customisable calendars quickly. This tutorial is going to show you how you can display events in fullcalendar from database in PHP Codeigniter 4.
How to Fetch Data from Database and Display in FullCalendar in Codeigniter 4
- Install Codeigniter 4 Application
- Basic App Configurations
- Create Database and Table
- Connect App to Database
- Create FullCalendar Controller Class
- Create Display FullCalendar Views
- Setup Routes
- Start Development server
Step 1 – Install Codeigniter 4 Application
First of all, you need to ownload the latest version of Codeigniter 4. So, visit this link https://codeigniter.com/download Download Codeigniter 4 app and unzip the setup in your local system xampp/htdocs/ .
Note that, please change the download folder name “demo”.
Step 2 – Basic App Configurations
Now, you need to some basic configuration on the app/config/app.php file, so let’s go to application/config/config.php and open this file on text editor.
Set Base URL like this
public $baseURL = 'http://localhost:8080'; To public $baseURL = 'http://localhost/demo/';
Step 3 – Create Database and Table
Create database and table; so open your phpmyadmin and execute the following sql query on it to create table:
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 – Connect App to Database
To connect your codeigniter 4 app to the database. So, visit app/Config/ directory and open Database.php. Then add the databasae details like below into database.php file:
public $default = [ 'DSN' => '', 'hostname' => 'localhost', 'username' => 'test', 'password' => '4Mu99BhzK8dr4vF1', 'database' => 'demo', 'DBDriver' => 'MySQLi', 'DBPrefix' => '', 'pConnect' => false, 'DBDebug' => (ENVIRONMENT !== 'development'), 'cacheOn' => false, 'cacheDir' => '', 'charset' => 'utf8', 'DBCollat' => 'utf8_general_ci', 'swapPre' => '', 'encrypt' => false, 'compress' => false, 'strictOn' => false, 'failover' => [], 'port' => 3306, ];
Step 5 – Create FullCalendar Controller Class
Create FullCalendar.php file. So, visit app/Controllers directory and create FullCalendar.php.Then add the following code into it:
<?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); } }
- The
index()
function renders fullcalendar event with data on template into the view.
Step 6 – Create Display FullCalendar Views
Create home.php view file, so visit app/views/ directory and create home.php file. Then add the following HTML into home.php file:
<!DOCTYPE html> <html> <head> <title>Codeigniter 4 Fullcalendar example - laratutorials.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 4 Fullcalendar example - laratutorials.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 – Setup Routes
To define a route, So, visit app/Config/ directory and open Routes.php file. Then add the following routes into it:
// $routes->setDefaultController('FullCalendar'); $routes->get('/', 'FullCalendar::index');
Step 8 – Start Development server
Execute the following command into command prompt or terminal to start the codeigniter 4 application:
php spark serve
Then visit your web browser and hit the following url on it:
http://localhost/demo/ OR http://localhost:8080/
Conclusion
Codeigniter 4 integrate fullcalendar example; In this tutorial, you have learned how to integrate fullcalendar in codeigniter 4 and fetch data from database and display in fullcalendar in codeigniter 4.
Recommended CodeIgniter 4 Tutorial
- How to Install / Download Codeigniter 4 By Manual, Composer, Git
- How to Remove Public and Index.php From URL in Codeigniter 4
- Codeigniter 4 – Form Validation Example Tutorial
- How to add jQuery Validation on Form in Codeigniter 4 Example
- Codeigniter 4 Ajax Form Submit Validation Example
- Codeigniter 4 File Upload Validation Example
- Image Upload with Validation in Codeigniter 4
- Codeigniter 4 Image Upload Preview Using jQuery Example
- Codeigniter 4 Ajax Image Upload Preview Example
- How to Upload Multiple Images in Codeigniter 4
- Codeigniter 4 Multiple Image Upload with Preview
- Codeigniter 4 Pagination Example; Create Pagination in Codeigniter
- Simple Codeigniter 4 CRUD with Bootstrap and MySQL Example
- Codeigniter 4 CRUD with Datatables Example
- Codeigniter 4 Image Crop and Save using Croppie Example
- Dependent Dropdown using jQuery Ajax in Codeigniter 4
- CodeIgniter 4 Rest Api CRUD Example
- Codeigniter 4 Login Registration and Logout Example
- Get Address from Latitude and Longitude in Codeigniter 4
- Codeigniter 4 Google Column Charts Example
- Codeigniter 4 Google Place Autocomplete Address
- Export Data to Excel Example in Codeigniter 4
- Codeigniter 4 Google ReCaptcha V2 Example
- Google Pie Chart in Codeigniter 4