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}"><<</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}">>></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} {/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.
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}"><<</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}">>></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} {/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.
One Reply to “CodeIgniter Calendar Class For Creating Dynamic Calendar”
Hi,
I would like to know how to show the dynamic data from database in to the calender cells . i have an event calender where i need to show the heading of event in particular date and when user hovers it the description related to it will be displayed.
Thanks.