How to show Full Calendar using Codeigniter calendar library

This tutorial illustrates how to use codeigniter calendar library to show a full calendar into your web apps. Calendar is most important part of your web app to show particular seasonal information like events,news or others .Codeigniter provides inbuilt calendar library which let you integrate a full calendar inside your web app with less effort.

Lets see how to integrate.Follow me i will explain step by step.

  1. Create controller called FullCalendarController.php inside application/controllers. Here we will load the library of calendar and put all configuration .Please find below the code.

FullCalendarController.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class FullCalendarController extends CI_Controller {
publicfunction __construct()
{
parent::__construct();
}
    public function index()
    {
/* data(events news and evnts) you want to show in calendar date */
$data['data'] = array(
3=>'Payment Due Date',
7=>'Fun Activity',
13=>'Event',
26=>'News'
);

/* Days name format */
$config['day_type'] = 'long'; /* x: Monday */

/* Template configuration for Calendar */
$config['template'] = '
{table_open}<table class="calendar">{/table_open}
{week_day_cell}<th class="dayHeader">{week_day}</th>{/week_day_cell}
{cal_cell_content}<span class="dayListing">{day}</span>&nbsp;&bull; {content}&nbsp;{/cal_cell_content}
{cal_cell_content_today}<div class="today"><span class="dayListing">{day}</span>&bull; {content}</div>{/cal_cell_content_today}
{cal_cell_no_content}<span class="dayListing">{day}</span>&nbsp;{/cal_cell_no_content}
{cal_cell_no_content_today}<div class="today"><span class="dayListing">{day}</span></div>{/cal_cell_no_content_today}
';

/* Load the Library with configuration */
//$this->load->library('calendar', $config);
$this->load->library('calendar', $config);
$this->load->view('calendar',$data);
    }
}
2. Next, we will create a view called calendar.php inside application/views. In view file, all CSS codes write here to give a beautiful look to your calendar. Here is how code looks.
calendar.php
<html>
<head>
<title>Registration</title>
</head>
<body>
<style>
h3{
font-family: Verdana;
font-size: 18pt;
font-style: normal;
font-weight: bold;
color:red;
text-align: center;
}

.calendar {
font-family: Arial, Verdana, Sans-serif;
width: 100%;
min-width: 960px;
border-collapse: collapse;
}

.calendar tbody tr:first-child th {
color: #505050;
margin: 0010px0;
}

.dayHeader {
font-weight: normal;
text-align: center;
color: #040404;
font-size: 15px;
font-weight: bold;
}
.calendar td {
width: 14%;
border: 2pxsolid#CCC;
height: 100px;
vertical-align: top;
font-size: 10px;
padding: 0;
background-color: #e2eabf;
font-size: 10px;
}
.calendar td:hover {
background: #F3F3F3;
}

.dayListing {
display: block;
text-align: right;
font-size: 50px;
color: #2C2C2C;
padding: 5px5px00;
}

div.today {
background: #E9EFF7;
height: 100%;
}
</style>
<h3>Full Calendar Example Using Codeigniter Calendar Library</h3>
<?php echo form_open('register',array('name'=>'registerview')); ?>
    <table align="center" cellpadding = "5">
        <tr>
            <td><?php echo $this->calendar->generate(2018, 9, $data); ?></td>
        </tr>
        
    </table>
<?php echo form_close();?>
</body>
</html>
3. For pretty Url change your routes inside application/config/routes.php file.
Finally, after you run this code you will see interface as i am showing below.

Full calendar codeigniter

In this way, there it is, a basic usage of the CodeIgniter Calendar class. You could keep on modifying out this application as per your needed.
Thank you for reading this post. we hope you like this Post, Please feel free to comment below, your suggestion. if you face any issue with this code let us know. We’d love to help!

 

I am Hitesh from Jamshedpur (India). I have been working as a Web Application Developer from last 4+ years. I love diverse and attention catching web presence for a variety of users. Also I love to learn new things in Web Development.

Tags: , ,