READ UPDATE HERE
Introduction
This blog inspired me to make an event calendar using Codeigniter. You can download Bari’s source files. Please unzip it and save them. We are going to use them later. Bari puts a demo here. We are going to add this to Codeigniter.
Demo(new version) added: 8th August 2010
Download Files
login email: admin(at)gmail.com
pw: admin
I continue using BackendPro for this purpose. You can read more about it here. It has an excellent manual.
If you want to know how to install it, please read this page or my article here.
Goals
- Add all the CRUD in a site calendar.
- Add links to individual calendar
- Clicking a pop up which has details take you to a edit page
Folders and Files
Please create the following folders and files.
C:\xampp\htdocs\ci_backendpro2\modules\calendar\
C:\xampp\htdocs\ci_backendpro2\modules\calendar\controllers
C:\xampp\htdocs\ci_backendpro2\modules\calendar\controllers\admin.php
C:\xampp\htdocs\ci_backendpro2\modules\calendar\models\
C:\xampp\htdocs\ci_backendpro2\modules\calendar\models\mcalendar.php
C:\xampp\htdocs\ci_backendpro2\modules\calendar\views\admin\
C:\xampp\htdocs\ci_backendpro2\modules\calendar\views\admin\admin_calendar_create.php
C:\xampp\htdocs\ci_backendpro2\modules\calendar\views\admin\admin_calendar_edit.php
C:\xampp\htdocs\ci_backendpro2\modules\calendar\views\admin\admin_calendar_home.php
C:\xampp\htdocs\ci_backendpro2\modules\calendar\views\admin\admin_calendar_mycal.php
C:\xampp\htdocs\ci_backendpro2\modules\calendar\controllers
C:\xampp\htdocs\ci_backendpro2\modules\calendar\controllers\admin.php
C:\xampp\htdocs\ci_backendpro2\modules\calendar\models\
C:\xampp\htdocs\ci_backendpro2\modules\calendar\models\mcalendar.php
C:\xampp\htdocs\ci_backendpro2\modules\calendar\views\admin\
C:\xampp\htdocs\ci_backendpro2\modules\calendar\views\admin\admin_calendar_create.php
C:\xampp\htdocs\ci_backendpro2\modules\calendar\views\admin\admin_calendar_edit.php
C:\xampp\htdocs\ci_backendpro2\modules\calendar\views\admin\admin_calendar_home.php
C:\xampp\htdocs\ci_backendpro2\modules\calendar\views\admin\admin_calendar_mycal.php
Calendar Menu
Let’s add ‘Calendar’ in the Bep(BackendPro)’s main navigation.
Open C:\xampp\htdocs\ci_bep\system\application\language\english\backendpro_lang.php.
Add this at the bottom of the file.
$lang['backendpro_calendar'] = 'Calendar';
Then open C:\xampp\htdocs\ci_bep\system\application\views\admin\menu.php
And add the following after Messages like this. (We developed Message system in the previous article. Please read more details here and here.)
...
...
<li id="menu_bep_general"><span class="icon_general"><?php print $this->lang->line('backendpro_general')?></span>
<ul>
<li><?php print anchor('messages/admin',$this->lang->line('backendpro_messages'),array('class'=>'icon_comment'))?></li>
<li><?php print anchor('calendar/admin',$this->lang->line('backendpro_calendar'),array('class'=>'icon_calendar'))?></li>
</ul>
</li>
Icon for Calendar
Let’s add icons for this ‘Calendar’.
We just follow the same method as the previous article.
Download an icon set from here and rename one of icon as calendar.png and move it to C:\xampp\htdocs\ci_bep\assets\icons.
Go to the backend and see your new menu on the left.
Create a Resource and Permission
In the back-end, go to system>Access Control and click Resources.
Click Create Resource and enter Calendar in Name and select General for the parent and Save.
In order to check if a permission is granted to Administrator, go to system>Access Control>Permissions and click Advanced View Mode and select Administrator under Groups. You will see a tick to all including Calendar.
Database
Run the following SQL.
CREATE TABLE IF NOT EXISTS `eventcal` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`user` varchar(25) NOT NULL DEFAULT 'anonimous',
`user_id` int(25) NOT NULL,
`eventDate` date DEFAULT NULL,
`eventTitle` varchar(100) DEFAULT NULL,
`eventContent` text,
`privacy` enum('public','private') NOT NULL DEFAULT 'public',
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=27 ;
CSS and JS
Add master.css in C:\xampp\htdocs\ci_bep\assets\css. This CSS is a bit different from the original one in order to adjust with the BackendPro.
* {
/* old-style reset here 
*/
border: 0px;
padding: 0px;
}
body {
font-family: Helvetica;
background: white;
/* text-align: center;*/
/* background: url(../images/body.png) repeat-x;*/
}
body h1 {
padding-top: 20px;
font-size: 26px;
color: #335;
}
#content td {
border-bottom:medium none;
padding:2px;
}
#calmain table {
border-collapse: separate;
border: 1px solid #9DABCE;
border-width: 0px 0px 1px 1px;
margin: 10px auto;
font-size: 20px;
}
#calmain td, #calmain th {
width: 81px;
height: 81px;
text-align: center;
vertical-align: middle;
background: url(../images/cells.png);
color: #444;
position: relative;
padding:0;
}
#calmain th {
height: 30px;
font-weight: bold;
font-size: 14px;
}
#calmain td:hover, #calmain th:hover {
background-position: 0px -81px;
color: #222;
}
#calmain td.date_has_event {
background-position: 162px 0px;
color: white;
}
#calmain td.date_has_event:hover {
background-position: 162px -81px;
}
#calmain td.padding {
background: url(../images/calpad.jpg);
}
#calmain td#today {
background-position: 81px 0px;
color: white;
}
#calmain td#today:hover {
background-position: 81px -81px;
}
#calmain .events {
position: relative;* {
/* old-style reset here */
border: 0px;
padding: 0px;
}
body {
font-family: Helvetica;
background: white;
/* text-align: center;*/
/* background: url(../images/body.png) repeat-x;*/
}
body h1 {
padding-top: 20px;
font-size: 26px;
color: #335;
}
#content td {
border-bottom:medium none;
padding:2px;
}
#calmain table {
border-collapse: separate;
border: 1px solid #9DABCE;
border-width: 0px 0px 1px 1px;
margin: 10px auto;
font-size: 20px;
}
#calmain td, #calmain th {
width: 81px;
height: 81px;
text-align: center;
vertical-align: middle;
background: url(../images/cells.png);
color: #444;
position: relative;
padding:0;
}
#calmain th {
height: 30px;
font-weight: bold;
font-size: 14px;
}
#calmain td:hover, #calmain th:hover {
background-position: 0px -81px;
color: #222;
}
#calmain td.date_has_event {
background-position: 162px 0px;
color: white;
}
#calmain td.date_has_event:hover {
background-position: 162px -81px;
}
#calmain td.padding {
background: url(../images/calpad.jpg);
}
#calmain td#today {
background-position: 81px 0px;
color: white;
}
#calmain td#today:hover {
background-position: 81px -81px;
}
#calmain .events {
position: relative;
}
#calmain .events ul {
text-align: left;
position: absolute;
display: none;
z-index: 1000;
padding: 15px;
background: #E7ECF2 url(../images/popup.png) no-repeat;
color: white;
border: 1px solid white;
font-size: 15px;
width: 200px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
-border-radius: 3px;
list-style: none;
color: #444444;
-webkit-box-shadow: 0px 8px 8px #333;
}
#calmain .events li {
padding-bottom: 5px;
}
#calmain .events li span {
display: block;
font-size: 12px;
text-align: justify;
color: #555;
}
#calmain .events li span.title {
font-weight: bold;
color: #222;
}
#calmain th a{
text-decoration:none;
font-size:120%;
font-weight:bold;
color: #000;
outline-width:0;
}
#content textarea, #content input{
border: 1px solid #ccc;
}
/* Calendar */
#calmain{
width: 50%;
float: left;
}
#calleft{
float: left;
width: 20%;
padding: 20px;
}
#calright {
float: left;
width:20%;
padding: 20px;
}
Please find jquery.datepick.css from a downloaded file and save it in the same CSS folder.
You also find jquery.datepick.pack.js and coda.js in the downloaded files. Please save them in
C:\xampp\htdocs\ci_bep\assets\js.
Create a js file called site.j and store it in js folder as above.
Add the following in site.js. This will initiate a calendar pop out in edit page.
$(document).ready(function(){
//configure the date format to match mysql date
$('#date').datepick({dateFormat: 'yy-mm-dd'});
});
Adding CSS and JS to the Assets file
Open C:\xampp\htdocs\ci_bep\modules\site\config\bep_aeests.php
Add the followings.
// Calendar CSS
$config['asset'][] = array('file'=>'master.css');
$config['asset'][] = array('file'=>'jquery.datepick.css');
// Calendar JS
$config['asset'][] = array('file'=>'jquery.datepick.pack.js', 'needs'=>'jquery');
$config['asset'][] = array('file'=>'coda.js', 'needs'=>'jquery');
$config['asset'][] = array('file'=>'site.js', 'needs'=>'jquery');
And change $config['asset_group']['ADMIN'] to the followings.
$config['asset_group']['ADMIN'] = 'bep_admin_layout|bep_admin_style|FlashStatus|forms|buttons|bep_navigation|treeview|bep_icons|bep_select_all|admin|shoutbox|master|jquery.datepick|jquery.datepick.pack|coda|site';
Images
Copy three images, alpad.jpg, cells.png and pupup.png from downloaded file and paste them in
C:\xampp\htdocs\ci_bep\assets\images.
Controller
We are going to build a controller. Open C:\xampp\htdocs\ci_bep\modules\calendar\controllers\admin.php and paste the following code. I added comments in the code below.
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Admin extends Admin_Controller {
function Admin(){
parent::Admin_Controller();
$this->load->model('MCalendar');
$this->bep_assets->load_asset('master');
// Check for access permission. Only if you have permission, you can access to Calendar
check('Calendar');
// We are going to use form helper. So load it.
$this->load->helper('form');
// Set breadcrumb for the top level
$this->bep_site->set_crumb($this->lang->line('backendpro_calendar'),'calendar/admin');
}
function index(){
// The forth segment will be used as timeid
$timeid = $this->uri->segment(4);
if($timeid==0)
$time = time();
else
$time = $timeid;
// we call _date function
$data = $this->_date($time);
// Set all other variables here
$data['title'] = "Manage Calendar";
// Calling this will display links to everyone's calendar. If you don't use it delete it in the view
$data['members'] = $this->user_model->getUsers();
// You can use this variable to tell that this is your calendar at the top.
$data['user'] = $this->session->userdata('username');
$data['user_id'] = $this->session->userdata('id');
$data['header'] = $this->lang->line('backendpro_access_control');
$data['page'] = $this->config->item('backendpro_template_admin') . "admin_calendar_home";
// we are using calendar module
$data['module'] = 'calendar';
$this->load->view($this->_container,$data);
}
function create(){
$data['title'] = "Add Events to Calendar";
$data['user'] = $this->session->userdata('username');
$data['user_id'] = $this->session->userdata('id');
if(isset($_POST['add']))
{
//check for empty inputs
if((isset($_POST['date']) && !empty($_POST['date'])) && (isset($_POST['eventTitle']) && !empty($_POST['eventTitle'])) && (isset($_POST['eventContent']) && !empty($_POST['eventContent'])))
{
//add new event to the database
$data['alert']= $this->MCalendar->addEvents();
}
else
{
//alert message for empty input
$data['alert'] = "No empty input please";
}
}
// Set breadcrumb for the second level after Calendar. It will show like Calendar
// You have to add in language userlib
$this->bep_site->set_crumb($this->lang->line('userlib_calendar_add'),'calendar/admin/create');
$data['header'] = $this->lang->line('backendpro_access_control');
$data['page'] = $this->config->item('backendpro_template_admin') . "admin_calendar_create";
$data['module'] = 'calendar';
$this->load->view($this->_container,$data);
}
function edit($id=0){
$data['title'] = "Edit Events";
if(isset($_POST['add']))
{
//check for empty inputs
if((isset($_POST['date']) && !empty($_POST['date'])) && (isset($_POST['eventTitle']) && !empty($_POST['eventTitle'])) && (isset($_POST['eventContent']) && !empty($_POST['eventContent'])))
{
//add new event to the database
$this->MCalendar->addEvents();
$this->session->set_flashdata('message','Event created!');
redirect('calendar/admin/index','refresh');
}
else
{
//alert message for empty input
$data['alert'] = "No empty input please";
}
}
$data['event']= $this->MCalendar->getEventsById($id);
// Set breadcrumb
$this->bep_site->set_crumb($this->lang->line('userlib_calendar_edit'),'calendar/admin/edit');
$data['header'] = $this->lang->line('backendpro_access_control');
$data['page'] = $this->config->item('backendpro_template_admin') . "admin_calendar_edit";
$data['module'] = 'calendar';
$this->load->view($this->_container,$data);
}
function update($id=0){
if(isset($_POST['add']))
{
//check for empty inputs
if((isset($_POST['date']) && !empty($_POST['date'])) && (isset($_POST['eventTitle']) && !empty($_POST['eventTitle'])) && (isset($_POST['eventContent']) && !empty($_POST['eventContent'])))
{
//update event to the database
$this->MCalendar->updateEvent();
$this->session->set_flashdata('message', 'Event updated!');
redirect('calendar/admin/');
}
else
{
//alert message for empty input
$data['alert'] = "No empty input please";
}
}
$this->session->set_flashdata('message', 'Please fill up the information');
redirect('calendar/admin/update');
}
function delete($id=0){
$this->MCalendar->deleteEvent($id);
$this->session->set_flashdata('message', 'Event deleted successfully.');
redirect('calendar/admin/index');
}
function mycal($user_id=0){
// Get user's name/details
$this->load->module_model('auth','user_model');
$user = $this->user_model->getUsers(array('users.id'=>$user_id));
$data['user'] = $user->row_array();
$timeid = $this->uri->segment(5);
if($timeid==0)
$time = time();
else
$time = $timeid;
// we call _date function
$data = $this->_date($time);
// Set breadcrumb
$this->bep_site->set_crumb($this->lang->line('userlib_calendar_personal','calendar/admin/mycal/$user_id'));
$data['title'] = "Manage Calendar";
// get members from backendpro
$data['members'] = $this->user_model->getUsers();
$user_id = $this->uri->segment(4);
$data['user_id']=$user_id;
$data['header'] = $this->lang->line('backendpro_access_control');
$data['page'] = $this->config->item('backendpro_template_admin') . "admin_calendar_mycal";
$data['module'] = 'calendar';
$this->load->view($this->_container,$data);
}
function _date($time){
$data['events']=$this->MCalendar->getEvents($time);
$today = date("Y/n/j", time());
$data['today']= $today;
$current_month = date("n", $time);
$data['current_month'] = $current_month;
$current_year = date("Y", $time);
$data['current_year'] = $current_year;
$current_month_text = date("F Y", $time);
$data['current_month_text'] = $current_month_text;
$total_days_of_current_month = date("t", $time);
$data['total_days_of_current_month']= $total_days_of_current_month;
$first_day_of_month = mktime(0,0,0,$current_month,1,$current_year);
$data['first_day_of_month'] = $first_day_of_month;
//geting Numeric representation of the day of the week for first day of the month. 0 (for Sunday) through 6 (for Saturday).
$first_w_of_month = date("w", $first_day_of_month);
$data['first_w_of_month'] = $first_w_of_month;
//how many rows will be in the calendar to show the dates
$total_rows = ceil(($total_days_of_current_month + $first_w_of_month)/7);
$data['total_rows']= $total_rows;
//trick to show empty cell in the first row if the month doesn't start from Sunday
$day = -$first_w_of_month;
$data['day']= $day;
$next_month = mktime(0,0,0,$current_month+1,1,$current_year);
$data['next_month']= $next_month;
$next_month_text = date("F \'y", $next_month);
$data['next_month_text']= $next_month_text;
$previous_month = mktime(0,0,0,$current_month-1,1,$current_year);
$data['previous_month']= $previous_month;
$previous_month_text = date("F \'y", $previous_month);
$data['previous_month_text']= $previous_month_text;
$next_year = mktime(0,0,0,$current_month,1,$current_year+1);
$data['next_year']= $next_year;
$next_year_text = date("F \'y", $next_year);
$data['next_year_text']= $next_year_text;
$previous_year = mktime(0,0,0,$current_month,1,$current_year-1);
$data['previous_year']=$previous_year;
$previous_year_text = date("F \'y", $previous_year);
$data['previous_year_text']= $previous_year_text;
return $data;
}
}//end class
?>
Adding in userlib_lang.php
Add this to C:\xampp\htdocs\ci_bep\modules\auth\language\english\userlib_lang.php
/* Calendar */ $lang['userlib_calendar'] = 'Calendar'; $lang['userlib_calendar_add'] = 'Add event'; $lang['userlib_calendar_edit'] = 'Edit event'; $lang['userlib_calendar_personal'] = 'Personal calendar';
Model
Open C:\xampp\htdocs\ci_bep\modules\calendar\models\mcalendar.php and paste the following code.
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class MCalendar extends Model{
function MCalendar(){
parent::Model();
}
function getEvents($time){
$today = date("Y/n/j", time());
$current_month = date("n", $time);
$current_year = date("Y", $time);
$current_month_text = date("F Y", $time);
$total_days_of_current_month = date("t", $time);
$events = array();
$query = $this->db->query("
SELECT DATE_FORMAT(eventDate,'%d') AS day,
eventContent,eventTitle,id,user,user_id
FROM eventcal
WHERE eventDate BETWEEN '$current_year/$current_month/01'
AND '$current_year/$current_month/$total_days_of_current_month'");
foreach ($query->result() as $row_event)
{
$events[intval($row_event->day)][] = $row_event;
}
$query->free_result();
return $events;
}
function getMyEvents($time, $user_id=0){
$today = date("Y/n/j", time());
$current_month = date("n", $time);
$current_year = date("Y", $time);
$current_month_text = date("F Y", $time);
$total_days_of_current_month = date("t", $time);
$events = array();
$query = $this->db->query("
SELECT DATE_FORMAT(eventDate,'%d') AS day,
eventContent,
eventTitle,id,user,user_id
FROM eventcal
WHERE eventDate BETWEEN '$current_year/$current_month/01'
AND '$current_year/$current_month/$total_days_of_current_month'
AND user_id = '$user_id' ");
foreach ($query->result() as $row_event)
{
$events[intval($row_event->day)][] = $row_event;
}
$query->free_result();
return $events;
}
function getEventsById($id){
$this->db->where('id', $id);
$query = $this->db->get('eventcal');
foreach ($query->result_array() as $event)
{
$data[] = $event;
}
$query->free_result();
return $data;
}
function addEvents(){
$user_id = id_clean($_POST['user_id']);
$user = db_clean($_POST['user']);
$query = "INSERT INTO eventcal
(eventDate,eventTitle,eventContent,user, user_id)
VALUES('".$_POST['date']."','".addslashes($_POST['eventTitle'])."','".
addslashes($_POST['eventContent'])."', '$user', $user_id)";
$result = $this->db->query($query);
//check if the insertion is ok
if($result)
$alert = "New Event successfully added";
else
$alert = "Something is wrong. Try Again.";
}
function updateEvent(){
$data = array(
'eventDate' => db_clean($_POST['date']),
'eventTitle' => db_clean($_POST['eventTitle']),
'eventContent' => db_clean($_POST['eventContent'])
);
$this->db->where('id', id_clean($_POST['id']));
$this->db->update('eventcal', $data);
}
function deleteEvent($id){
$this->db->delete('eventcal', array('id' => $id));
}
// end of Model/MCalendar.php
}
Views
admin_calendar_home.php
First C:\xampp\htdocs\ci_bep\modules\calendar\views\admin\admin_calendar_home.php
<div id="calleft">
<?php
echo "<p>";
echo anchor('calendar/admin/create', 'Add Events to Calendar');
echo "</p>";
echo "<p>";
echo anchor('calendar/admin/index/', 'Show Site Calendar');
echo "</p>";
?>
</div>
<div id="calmain">
<?php
if ($this->session->flashdata('message')){
echo "<div class='status_box'>".$this->session->flashdata('message')."</div>";
}
?>
<h2><?=$current_month_text?></h2>
<table cellspacing="0">
<thead>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
</thead>
<tr>
<?php
for($i=0; $i< $total_rows; $i++)
{
for($j=0; $j<7;$j++)
{
$day++;
if($day>0 && $day<=$total_days_of_current_month)
{
//YYYY-MM-DD date format
$date_form = "$current_year/$current_month/$day";
echo '<td';
//check if the date is today
if($date_form == $today)
{
echo ' id="today"';
}
//check if any event stored for the date
if(array_key_exists($day,$events))
{
//adding the date_has_event class to the <td> and close it
echo ' class="date_has_event"> '.$day;
//adding the eventTitle and eventContent wrapped inside <span> & <li> to <ul>
echo '<div class="events"><ul>';
foreach ($events as $key=>$event){
if ($key == $day){
foreach ($event as $single){
echo '<li>';
echo anchor("calendar/admin/edit/$single->id",'<span class="title">'.$single->eventTitle.'(by '.$single->user.')</span><span class="desc">'.$single->eventContent.'</span>');
echo '</li>';
} // end of for each $event
}
} // end of foreach $events
echo '</ul></div>';
} // end of if(array_key_exists...)
else
{
//if there is not event on that date then just close the <td> tag
echo '> '.$day;
}
echo "</td>";
}
else
{
//showing empty cells in the first and last row
echo '<td class="padding"> </td>';
}
}
echo "</tr><tr>";
}
?>
</tr>
<tfoot>
<th>
<?php echo anchor('calendar/admin/index/'.$previous_year,'««', array('title'=>$previous_year_text));?>
</th>
<th>
<?php echo anchor('calendar/admin/index/'.$previous_month,'«', array('title'=>$previous_month_text));?>
</th>
<th> </th>
<th> </th>
<th> </th>
<th>
<?php echo anchor('calendar/admin/index/'.$next_month,'»', array('title'=>$next_month_text));?>
</th>
<th>
<?php echo anchor('calendar/admin/index/'.$next_year,'»»', array('title'=>$next_year_text));?>
</th>
</tfoot>
</table>
</div>
<div id="calright">
<?php
foreach ($members->result_array() as $member){
echo "<p>";
echo anchor('calendar/admin/mycal/'.$member['id'],$member['username'].'\'s Calendar' );
echo "</p>";
}
?>
</div>
admin_calendar_create.php
<h2><?php
echo anchor ('calendar/admin/index', 'See Calendar');
?></h2>
<?php
if ($this->session->flashdata('message')){
echo "<div class='status_box'>".$this->session->flashdata('message')."</div>";
}
echo form_open('calendar/admin/create');?>
<table align="center">
<tr>
<td colspan="2">
<h2>Add a New Event</h2>
</td>
</tr>
<tr>
<td>Date : </td>
<td><input id="date" name="date" size="30"></td>
</tr>
<tr>
<td>Event Title : </td>
<td><input id="eventTitle" name="eventTitle" size="50"></td>
</tr>
<tr>
<td>Event Details : </td>
<td><textarea cols="40" rows="5" name="eventContent" id="eventContent"></textarea></td>
</tr>
<tr>
<td><input type="hidden" name="user_id" id="user_id" value="<?php echo $user_id;?>" /></td>
<td><input type="hidden" name="user" id="nick" value="<?php echo $user;?>" /> </td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Add Event" name="add"></td>
</tr>
</table>
</form>
<?php
//check if there is any alert message set
if(isset($alert) && !empty($alert))
{
//message alert
echo $alert;
}
?>
admin_calendar_edit.php
<h2><?php
echo anchor ('calendar/admin/index', 'See Calendar');
?></h2>
<?php
if ($this->session->flashdata('message')){
echo "<div class='status_box'>".$this->session->flashdata('message')."</div>";
}
echo form_open('calendar/admin/update');?>
<table align="center">
<tr>
<td colspan="2">
<h2>Edit Event</h2>
</td>
</tr>
<tr>
<td>Date : </td>
<td><input id="date" name="date" size="30" value="<?php echo $event[0]['eventDate'] ;?>" ></td>
</tr>
<tr>
<td>Event Title : </td>
<td><input id="eventTitle" name="eventTitle" value="<?php echo $event[0]['eventTitle'] ;?>" size="50"></td>
</tr>
<tr>
<td>Event Details : </td>
<td><textarea cols="40" rows="5" name="eventContent" id="eventContent"><?php echo $event[0]['eventContent'] ;?></textarea></td>
</tr>
<input type="hidden" name="id" value="<?php echo $event[0]['id'] ;?>" />
<tr>
<td colspan="2"><input type="submit" value="Update Event" name="add"></td>
</tr>
<tr>
<td colspan="2">
<?php echo anchor("calendar/admin/delete/".$event[0]['id'],'Delete'); ?>
</td>
</tr>
</table>
</form>
admin_calendar_mycal.php
This will show an individual calendar.
<link rel="stylesheet" href="<?= base_url();?>css/datepick/master.css" type="text/css" media="screen" charset="utf-8" />
<script src="<?= base_url();?>js/datepick/coda.js" type="text/javascript"> </script>
<div id="calleft">
<?php
echo "<p>";
echo anchor('calendar/admin/create', 'Add Events to Calendar');
echo "</p>";
echo "<p>";
echo anchor('calendar/admin/index/', 'Show Site Calendar');
echo "</p>";
?>
</div>
<div id="calmain">
<?php
// this will outputs three times same thing. I need to create a new model to get the name only.
echo "<h3>".$user['username']."'s calendar";
if ($this->session->flashdata('message')){
echo "<div class='status_box'>".$this->session->flashdata('message')."</div>";
}
?>
<h2><?=$current_month_text?></h2>
<table cellspacing="0">
<thead>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
</thead>
<tr>
<?php
for($i=0; $i< $total_rows; $i++)
{
for($j=0; $j<7;$j++)
{
$day++;
if($day>0 && $day<=$total_days_of_current_month)
{
//YYYY-MM-DD date format
$date_form = "$current_year/$current_month/$day";
echo '<td';
//check if the date is today
if($date_form == $today)
{
echo ' id="today"';
}
//check if any event stored for the date
if(array_key_exists($day,$events))
{
//adding the date_has_event class to the <td> and close it
echo ' class="date_has_event"> '.$day;
//adding the eventTitle and eventContent wrapped inside <span> & <li> to <ul>
echo '<div class="events"><ul>';
foreach ($events as $key=>$event){
if ($key == $day){
foreach ($event as $single){
echo '<li>';
echo anchor("calendar/admin/edit/$single->id",'<span class="title">'.$single->eventTitle.'(by '.$single->user.')</span><span class="desc">'.$single->eventContent.'</span>');
echo '</li>';
} // end of for each $event
}
} // end of foreach $events
echo '</ul></div>';
} // end of if(array_key_exists...)
else
{
//if there is not event on that date then just close the <td> tag
echo '> '.$day;
}
echo "</td>";
}
else
{
//showing empty cells in the first and last row
echo '<td class="padding"> </td>';
}
}
echo "</tr><tr>";
}
?>
</tr>
<tfoot>
<th>
<?php echo anchor('calendar/admin/mycal/'.$user_id."/".$previous_year,'««', array('title'=>$previous_year_text));?>
</th>
<th>
<?php echo anchor('calendar/admin/mycal/'.$user_id."/".$previous_month,'«', array('title'=>$previous_month_text));?>
</th>
<th> </th>
<th> </th>
<th> </th>
<th>
<?php echo anchor('calendar/admin/mycal/'.$user_id."/".$next_month,'»', array('title'=>$next_month_text));?>
</th>
<th>
<?php echo anchor('calendar/admin/mycal/'.$user_id."/".$next_year,'»»', array('title'=>$next_year_text));?>
</th>
</tfoot>
</table>
</div>
<div id="calright">
<?php
foreach ($members->result_array() as $member){
echo "<p>";
echo anchor('calendar/admin/mycal/'.$member['id'],$member['username'].'\'s Calendar' );
echo "</p>";
}
?></div>
Additional change
I have added some changed in FlashStatus.css as follows.
.status_box {
padding:5px;
margin-bottom: 5px;
margin-top: 5px;
background:#FFF bottom center repeat-x;
border:1px solid;
border-color: #33CCFF;
white-space:normal;
width: 95%;
background-image:url('../images/status/bg_info.gif');
}
.status_box h6 {
text-align:left;
font-size:1.0em;
font-weight:bold;
margin: 5px auto 5px 5px;
}
.status_box ul {
text-align:left;
margin: 0;
padding-left: 30px;
color: #000;
}
.status_box ul li { list-style:disc; }
.status_box.info {
border-color: #33CCFF;
background-image:url('../images/status/bg_info.gif');
}
.status_box.info h6 { color: #33CCFF; background: url(../icons/information.png) no-repeat 0px 50%; padding-left: 25px; }
.status_box.success {
border-color: #00CC00;
background-image:url('../images/status/bg_success.gif');
}
.status_box.success h6 { color: #00CC00; background: url(../icons/accept.png) no-repeat 0px 50%; padding-left: 25px; }
.status_box.warning {
border-color: #FF6600;
background-image:url('../images/status/bg_warning.gif');
margin: 20px auto;
}
.status_box.warning h6 { color: #FF6600; background: url(../icons/error.png) no-repeat 0px 50%; padding-left: 25px; }
.status_box.error {
border-color: #FF0000;
background-image:url('../images/status/bg_error.gif');
}
.status_box.error h6 { color: #FF0000; background: url(../icons/exclamation.png) no-repeat 0px 50%; padding-left: 25px; }
Test Drive
Go to backend and General>Calendar to see the end product. You will see the ‘Add Events to Calendar’ and ‘Show Site Calendar’ on the left, the calendar on the centre and ‘Administrator’s Calendar’ on the right. You can create more users in System>Members>Create member. Then go back to the calendar to see more member names on the right. Log in as a different user and create events. When you click one of user it will take you to an individual calendar.
Final Thoughts
The problem with this calendar is that it does not work without js. When you click the date where there are events, it should take you to a page to see all the events. Extending Codeigniter’s Calendar Class will be the way to do it. Modal function will be nice to have when you click an event to see the details and also modify it.
Download Files
Update
24 February 2010
Shawn pointed out there is an error.
When I was tidying up codes, it seems I messed up a bit.
You need to change the admin controller to the following.
Add a couple of members as admin or superadmin and add some events.
This should show all the member names on the right and when you click one of member, it will show his/her calendar only. Click next month or previous month will show his/her events as well.
At the above of the calendar, it says whose calendar is.
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Admin extends Admin_Controller {
function Admin(){
parent::Admin_Controller();
$this->load->model('MCalendar');
$this->bep_assets->load_asset('master');
// Check for access permission. Only if you have permission, you can access to Calendar
check('Calendar');
// We are going to use form helper. So load it.
$this->load->helper('form');
// Set breadcrumb for the top level
$this->bep_site->set_crumb($this->lang->line('backendpro_calendar'),'calendar/admin');
}
function index(){
// The forth segment will be used as timeid
$timeid = $this->uri->segment(4);
if($timeid==0)
$time = time();
else
$time = $timeid;
// we call _date function
$data = $this->_date($time);
// Set all other variables here
$data['title'] = "Manage Calendar";
// Calling this will display links to everyone's calendar. If you don't use it delete it in the view
$data['members'] = $this->user_model->getUsers();
// You can use this variable to tell that this is your calendar at the top.
$data['user'] = $this->session->userdata('username');
$data['user_id'] = $this->session->userdata('id');
$data['header'] = $this->lang->line('backendpro_access_control');
$data['page'] = $this->config->item('backendpro_template_admin') . "admin_calendar_home";
// we are using calendar module
$data['module'] = 'calendar';
$this->load->view($this->_container,$data);
}
function create(){
$data['title'] = "Add Events to Calendar";
$data['user'] = $this->session->userdata('username');
$data['user_id'] = $this->session->userdata('id');
if(isset($_POST['add']))
{
//check for empty inputs
if((isset($_POST['date']) && !empty($_POST['date'])) && (isset($_POST['eventTitle']) && !empty($_POST['eventTitle'])) && (isset($_POST['eventContent']) && !empty($_POST['eventContent'])))
{
//add new event to the database
$data['alert']= $this->MCalendar->addEvents();
}
else
{
//alert message for empty input
$data['alert'] = "No empty input please";
}
}
// Set breadcrumb for the second level after Calendar. It will show like Calendar
// You have to add in language userlib
$this->bep_site->set_crumb($this->lang->line('userlib_calendar_add'),'calendar/admin/create');
$data['header'] = $this->lang->line('backendpro_access_control');
$data['page'] = $this->config->item('backendpro_template_admin') . "admin_calendar_create";
$data['module'] = 'calendar';
$this->load->view($this->_container,$data);
}
function edit($id=0){
$data['title'] = "Edit Events";
if(isset($_POST['add']))
{
//check for empty inputs
if((isset($_POST['date']) && !empty($_POST['date'])) && (isset($_POST['eventTitle']) && !empty($_POST['eventTitle'])) && (isset($_POST['eventContent']) && !empty($_POST['eventContent'])))
{
//add new event to the database
$this->MCalendar->addEvents();
$this->session->set_flashdata('message','Event created!');
redirect('calendar/admin/index','refresh');
}
else
{
//alert message for empty input
$data['alert'] = "No empty input please";
}
}
$data['event']= $this->MCalendar->getEventsById($id);
// Set breadcrumb
$this->bep_site->set_crumb($this->lang->line('userlib_calendar_edit'),'calendar/admin/edit');
$data['header'] = $this->lang->line('backendpro_access_control');
$data['page'] = $this->config->item('backendpro_template_admin') . "admin_calendar_edit";
$data['module'] = 'calendar';
$this->load->view($this->_container,$data);
}
function update($id=0){
if(isset($_POST['add']))
{
//check for empty inputs
if((isset($_POST['date']) && !empty($_POST['date'])) && (isset($_POST['eventTitle']) && !empty($_POST['eventTitle'])) && (isset($_POST['eventContent']) && !empty($_POST['eventContent'])))
{
//update event to the database
$this->MCalendar->updateEvent();
$this->session->set_flashdata('message', 'Event updated!');
redirect('calendar/admin/');
}
else
{
//alert message for empty input
$data['alert'] = "No empty input please";
}
}
$this->session->set_flashdata('message', 'Please fill up the information');
redirect('calendar/admin/update');
}
function delete($id=0){
$this->MCalendar->deleteEvent($id);
$this->session->set_flashdata('message', 'Event deleted successfully.');
redirect('calendar/admin/index');
}
function mycal($user_id=0){
$timeid = $this->uri->segment(5);
if($timeid==0)
$time = time();
else
$time = $timeid;
// we call _date function
$data = $this->_date($time, $user_id);
// get members from backendpro
$data['members'] = $this->user_model->getUsers();
$user_id = $this->uri->segment(4);
$data['user_id']=$user_id;
// Get user's name/details
$this->load->module_model('auth','user_model');
$user = $this->user_model->getUsers(array('users.id'=>$user_id));
$data['user'] = $user->row_array();
// Set breadcrumb
$this->bep_site->set_crumb($this->lang->line('userlib_calendar_personal','calendar/admin/mycal/$user_id'));
$data['title'] = "Manage Calendar";
$data['header'] = $this->lang->line('backendpro_access_control');
$data['page'] = $this->config->item('backendpro_template_admin') . "admin_calendar_mycal";
$data['module'] = 'calendar';
$this->load->view($this->_container,$data);
}
function _date($time, $user_id=0){
if($user_id<1){
$data['events']=$this->MCalendar->getEvents($time);
}else{
$data['events']=$this->MCalendar->getMyEvents($time, $user_id);
}
$today = date("Y/n/j", time());
$data['today']= $today;
$current_month = date("n", $time);
$data['current_month'] = $current_month;
$current_year = date("Y", $time);
$data['current_year'] = $current_year;
$current_month_text = date("F Y", $time);
$data['current_month_text'] = $current_month_text;
$total_days_of_current_month = date("t", $time);
$data['total_days_of_current_month']= $total_days_of_current_month;
$first_day_of_month = mktime(0,0,0,$current_month,1,$current_year);
$data['first_day_of_month'] = $first_day_of_month;
//geting Numeric representation of the day of the week for first day of the month. 0 (for Sunday) through 6 (for Saturday).
$first_w_of_month = date("w", $first_day_of_month);
$data['first_w_of_month'] = $first_w_of_month;
//how many rows will be in the calendar to show the dates
$total_rows = ceil(($total_days_of_current_month + $first_w_of_month)/7);
$data['total_rows']= $total_rows;
//trick to show empty cell in the first row if the month doesn't start from Sunday
$day = -$first_w_of_month;
$data['day']= $day;
$next_month = mktime(0,0,0,$current_month+1,1,$current_year);
$data['next_month']= $next_month;
$next_month_text = date("F \'y", $next_month);
$data['next_month_text']= $next_month_text;
$previous_month = mktime(0,0,0,$current_month-1,1,$current_year);
$data['previous_month']= $previous_month;
$previous_month_text = date("F \'y", $previous_month);
$data['previous_month_text']= $previous_month_text;
$next_year = mktime(0,0,0,$current_month,1,$current_year+1);
$data['next_year']= $next_year;
$next_year_text = date("F \'y", $next_year);
$data['next_year_text']= $next_year_text;
$previous_year = mktime(0,0,0,$current_month,1,$current_year-1);
$data['previous_year']=$previous_year;
$previous_year_text = date("F \'y", $previous_year);
$data['previous_year_text']= $previous_year_text;
return $data;
}
}//end class
?>
[...] Create an Event calendar using Codeigniter and jQuery [...]
[...] the Okada Design Blog there’s a recent tutorial posted showing you how to create a simple calendar system by combining the CodeIgniter PHP framework and jQuery for some of the client side features. This [...]
Hello, please help me use this calendar without backand pro.
But only with CodeIgniter alone. Because it is too difficult to add “backand pro” in the website that I created with CodeIgniter.
@Sapono Please read this article. Event calendar using Codeigniter and jQuery without BackendPro
Thanks ….
This article is very helpful.
I will always visit this website.
I hope the following article discusses about CodeIgniter again.
Thank you, thank you, thank you.
Thanks for the great post! However, I have one problem — when I get everything set up, then go to the Admin calendar, I receive an error (minor glitch, really):
Severity: Notice
Message: Undefined variable: username
Filename: admin/admin_calendar_mycal.php
Line Number: 18
Maybe I’m just too tired to figure this out right now, but where do I define “username”?
Other than that it works just fine: I can add, edit, and delete events.
Thanks.
Hi Shawn,
This is made for BackendPro in mind. You need to create users. Or this post may suit for you if you don’t want to use BackendPro. It does not have variable username.
Hi shinokada,
Thanks for the reply; however, I still come up with the same error — I’m using BackendPro — even after I add new members. The variable appears in /modules/calendar/views/admin/admin_calendar_mycal.php on line 18.
Anyway, it’s not a major problem, but a minor annoyance (Firebug/FirePHP doesn’t even notice it — the system just tosses it out directly above the calendar but still functions properly).
Thanks again.
@Shawn: Thanks for pointing out the error. I added an update at the end of the article. I will include this for the next Codeigniter Shopping Cart v1.1 update in the download page.
[...] Create an Event calendar using Codeigniter and jQuery [...]