In this tutorial, we will learn how to integrate Fullcalendar in Codeigniter 4 application. Fullcalendar is a JavaScript library that provides a full-sized, drag & drop calendar. It is used to create a user-friendly calendar and date picker in the web application.
Fullcalendar is a very popular library for displaying events in a calendar view. It is very easy to use and provides a lot of features like customizing the calendar view, adding events, and more.
In this tutorial, we will show you how to integrate Fullcalendar in Codeigniter 4 application. We will create a simple calendar view with events and display them in the calendar.
Prerequisites
Codeigniter 4 Application
MySQL Database
Apache Server
Step 1 – Create Database Table
First, we will create a database table to store the events data. Execute the following SQL query to create the events table.
CREATE TABLE `events` ( `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT, `title` varchar(255) NOT NULL, `start` datetime NOT NULL, `end` datetime NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Step 2 – Setup Project
Now, we will setup the Codeigniter 4 project.
Download the Codeigniter 4 fresh setup.
Extract zip file
Create a database with the name codeigniter4
Add database details in the .env file
file Open the command prompt and run the following command
php spark migrate
Step 3 – Add Route
In this step, we will add the route for the calendar view.
Open the app/Config/Routes.php file and add the following route.
$routes->get(‘calendar’, ‘CalendarController::index’);
Step 4 – Create Controller
In this step, we will create the CalendarController.
Open the command prompt and run the following command.
php spark make:controller Calendar
It will create the CalendarController.php file in the app/Controllers directory.
Open the CalendarController.php file and add the following code.
getEvents(); return view(‘calendar’, $data); } }
Step 5 – Create Model
In this step, we will create the EventsModel.
Open the command prompt and run the following command.
php spark make:model Events
It will create the EventsModel.php file in the app/Models directory.
Open the EventsModel.php file and add the following code.
findAll(); } }
Step 6 – Create View
In this step, we will create the calendar view.
Create the calendar.php file in the app/Views directory and add the following code.
Step 7 – Run Development Server
In this step, we will start the development server.
Open the command prompt and run the following command.
php spark serve
Now, you can access the calendar view at http://localhost:8080/calendar.
Conclusion
In this tutorial, we have learned how to integrate Fullcalendar in Codeigniter 4 application. We have created a simple calendar view with events and displayed them in the calendar.
Codeigniter 4 fetch data from database and display in fullcalendar example. In this example tutorial, you will learn how to get records from MySQL in codeigniter 4 app and display in it on fullcalendar.
This tutorial will guide you step by step on how to integrate full calendar in Codeigniter 4 app.
- 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
In this step, you will download the latest version of Codeigniter 4, Go to this link https://codeigniter.com/download Download Codeigniter 4 fresh new setup and unzip the setup in your local system xampp/htdocs/ . And change the download folder name “demo”
Step 2: Basic Configurations
Next, you will set 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 Table in Database
In this step, you need to create table in database and as well as insert some data for fullcalendar app in codeiginter 4. So visit your phpmyadmin panel and execute the following sql query in it:
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
In this step, you need to connect our project to the database. you need to go app/Config/Database.php and open database.php file in text editor. After opening the file in a text editor, you need to set up database credentials in this file like below.
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, Visit app/Controllers and create a controller name FullCalendar.php. In this controller, you need to add the following methods 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);
}
}
Step 6: Create View
In this step, you need to create one view files name home.php and update the following code into your file:
<!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 - Tutsmake.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>
Implement Javascript code
Finally, need to implement javascript code for showing a data on fullcalendar in codeigniter 4 app. Now you update the code on script tag after the closing of 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
In this step, you need to create a route that renders the table into the view, place the following code in app/Config/Routes.php file.
$routes->get('/', 'FullCalendar::index');
Step 8: Start Development Server
In this step, open your terminal and execute the following command to start development sever:
php spark serve
Then, Go to the browser and hit below the URL:
http://localhost:8080
Conclusion
Fetch data from database and display in fullcalendar in codeigniter 4. In this tutorial, you have successfully fetched data from database and display in fullcalendar in codeigniter 4.
If you have any questions or thoughts to share, use the comment form below to reach us.
