In this tutorial we are going to explain an example, which shows how to use CodeIgniter’s Calendar class which enables you to create dynamic calendars.

By using calendar template you can format the calendars in your own way as it gives 100% control over every aspect of its design. To load calendar library use:

Syntax:

$this->load->library('calendar');

You can find Calendar.php class inside your CodeIgniter project’s system/libraries folder

Once loaded, the Calendar object will be available using: $this->calendar
To display a calendar use the below mentioned code in your controller file.

//Like most other library in CodeIgniter, the calendar library is loaded in your controller
$this->load->library('calendar');

//Below code will help you to  generate calendar in view
echo $this->calendar->generate();

We have used the below calendar template in our example, you can use it or can even modify as per your requirement:


$prefs['template'] = '
{table_open}<table cellpadding="1" cellspacing="2">{/table_open}

{heading_row_start}<tr>{/heading_row_start}

{heading_previous_cell}<th class="prev_sign"><a href="{previous_url}">&lt;&lt;</a></th>{/heading_previous_cell}
{heading_title_cell}<th colspan="{colspan}">{heading}</th>{/heading_title_cell}
{heading_next_cell}<th class="next_sign"><a href="{next_url}">&gt;&gt;</a></th>{/heading_next_cell}

{heading_row_end}</tr>{/heading_row_end}

//Deciding where to week row start
{week_row_start}<tr class="week_name" >{/week_row_start}
//Deciding  week day cell and  week days
{week_day_cell}<td >{week_day}</td>{/week_day_cell}
//week row end
{week_row_end}</tr>{/week_row_end}

{cal_row_start}<tr>{/cal_row_start}
{cal_cell_start}<td>{/cal_cell_start}

{cal_cell_content}<a href="{content}">{day}</a>{/cal_cell_content}
{cal_cell_content_today}<div class="highlight"><a href="{content}">{day}</a></div>{/cal_cell_content_today}

{cal_cell_no_content}{day}{/cal_cell_no_content}
{cal_cell_no_content_today}<div class="highlight">{day}</div>{/cal_cell_no_content_today}

{cal_cell_blank}&nbsp;{/cal_cell_blank}

{cal_cell_end}</td>{/cal_cell_end}
{cal_row_end}</tr>{/cal_row_end}

{table_close}</table>{/table_close}
';

 


 

Refer our live demo or download the Script file. Extract the downloaded files and run it on your Local server.

codeigniter-calendar

 


 

How to run file:

http://localhost/codeigniter_calendar/index.php/ci_calendar_tutorial

 


Tutorial Codes In details:

Below are the codes used in this tutorial with proper explanation.

Controllers : ci_calendar_tutorial.php

Copy the below code in your controller.

<?php

class CI_Calendar_Tutorial extends CI_Controller {

public function __construct() {
parent::__construct();
}

public function index() {
$data = array(
'year' => $this->uri->segment(3),
'month' => $this->uri->segment(4)
);

// Creating template for table
$prefs['template'] = '
{table_open}<table cellpadding="1" cellspacing="2">{/table_open}

{heading_row_start}<tr>{/heading_row_start}

{heading_previous_cell}<th class="prev_sign"><a href="{previous_url}">&lt;&lt;</a></th>{/heading_previous_cell}
{heading_title_cell}<th colspan="{colspan}">{heading}</th>{/heading_title_cell}
{heading_next_cell}<th class="next_sign"><a href="{next_url}">&gt;&gt;</a></th>{/heading_next_cell}

{heading_row_end}</tr>{/heading_row_end}

//Deciding where to week row start
{week_row_start}<tr class="week_name" >{/week_row_start}
//Deciding  week day cell and  week days
{week_day_cell}<td >{week_day}</td>{/week_day_cell}
//week row end
{week_row_end}</tr>{/week_row_end}

{cal_row_start}<tr>{/cal_row_start}
{cal_cell_start}<td>{/cal_cell_start}

{cal_cell_content}<a href="{content}">{day}</a>{/cal_cell_content}
{cal_cell_content_today}<div class="highlight"><a href="{content}">{day}</a></div>{/cal_cell_content_today}

{cal_cell_no_content}{day}{/cal_cell_no_content}
{cal_cell_no_content_today}<div class="highlight">{day}</div>{/cal_cell_no_content_today}

{cal_cell_blank}&nbsp;{/cal_cell_blank}

{cal_cell_end}</td>{/cal_cell_end}
{cal_row_end}</tr>{/cal_row_end}

{table_close}</table>{/table_close}
';

$prefs['day_type'] = 'short';
$prefs['show_next_prev'] = true;
$prefs['next_prev_url'] = 'http://localhost/codeigniter_calendar/index.php/ci_calendar_tutorial/index';

// Loading calendar library and configuring table template
$this->load->library('calendar', $prefs);
// Load view page
$this->load->view('calendar_show', $data);
}

}

?>

 

Views : calendar_show.php

Copy the below code in your view.

<html>
<head>
<title>CodeIgniter Calendar</title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet' type='text/css'>
</head>
<body>
<?php
// Generate calendar
echo $this->calendar->generate($year, $month);
?>
</body>
</html>

 

CSS : style.css

Styling HTML Elements.

table{
border: 15px solid #25BAE4;
border-collapse:collapse;
margin-top: 50px;
margin-left: 250px;
}
td{
width: 50px;
height: 50px;
text-align: center;
border: 1px solid #e2e0e0;
font-size: 18px;
font-weight: bold;
}
th{
height: 50px;
padding-bottom: 8px;
background:#25BAE4;
font-size: 20px;
}
.prev_sign a, .next_sign a{
color:white;
text-decoration: none;
}
tr.week_name{
font-size: 16px;
font-weight:400;
color:red;
width: 10px;
background-color: #efe8e8;
}
.highlight{
background-color:#25BAE4;
color:white;
height: 27px;
padding-top: 13px;
padding-bottom: 7px;
}

 

Conclusion:

Thanks for reading the complete post. Hope you have got the concept. You can share your views in the space provided below and get in touch with us.