Build an Event Calendar in CodeIgniter using jQuery

Event Calendar helps to list the events from the database in a user-friendly way. The full view calendar is the best option to display the events dynamically in a calendar. In the dynamic web application, the events are fetched from the database and listed in the large calendar. The dynamic event calendar can be easily built with PHP and MySQL.

If your web application built with the CodeIgniter framework, the event calendar functionality needs to integrate into the CodeIgniter application. You can easily create a custom event calendar to display events from the database in CodeIgniter. In this tutorial, we will show you how to build an event calendar in CodeIgniter using jQuery and Ajax.

In the sample CodeIgniter Event Calendar, the following functionality will be implemented.

• Fetch events data from the MySQL database.
• Create a full-view calendar with HTML and CSS.
• Display events in the date cell of the calendar.
• Navigate between the months and years using jQuery and Ajax.

Before getting started to build an event calendar script for CodeIgniter, take a look at the file structure.

codeigniter_event_calendar/
├── application/
│   ├── controllers/
│   │   └── Calendar.php
│   ├── models/
│   │   └── Event.php
│   └── views/
│       └── calendar/
│           ├── index.php
│           └── event-cal.php
└── assets/
    ├── js/
    │   └── jquery.min.js
    └── css/
        └── style.css

Create Database Table

To store the dynamic events data a table is required in the database. The following SQL creates an events table with some basic fields in the MySQL database.

CREATE TABLE `events` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 `date` date NOT NULL,
 `created` datetime NOT NULL,
 `modified` datetime NOT NULL,
 `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Controller (Calendar.php)

The Calendar controller helps to generate event calendar and display calendar in the full view.

• __construct() – Load the Event model.
• index() –
  • Get event calendar using eventCalendar() method.
  • Pass the calendar HTML to the view.
• eventCalendar() –
  • Build event calendar based on the year and month.
  • Load calendar view.
• getMonths() – Generate months options list for the select box.
• getYears() – Generate years options list for the select box.
• getEvents() –
  • Fetch events from the database using getRows() method of the Event model.
  • Generate an HTML view of the event lists.

<?php defined('BASEPATH') OR exit('No direct script access allowed'); 
 
class Calendar extends CI_Controller { 
     
    function __construct() { 
        parent::__construct(); 
         
        $this->load->model('event'); 
    } 
     
    public function index(){ 
        $data = array(); 
        $data['eventCalendar'] = $this->eventCalendar(); 
        $this->load->view('calendar/index', $data); 
    } 
     
    /* 
     * Generate calendar with events 
     */ 
    public function eventCalendar($year = '', $month = ''){ 
        $data = array(); 
         
        $dateYear = ($year != '')?$year:date("Y"); 
        $dateMonth = ($month != '')?$month:date("m"); 
        $date = $dateYear.'-'.$dateMonth.'-01'; 
        $eventDate = empty($year) && empty($month)?date("Y-m-d"):$date; 
        $currentMonthFirstDay = date("N", strtotime($date)); 
        $totalDaysOfMonth = cal_days_in_month(CAL_GREGORIAN, $dateMonth, $dateYear); 
        $totalDaysOfMonthDisplay = ($currentMonthFirstDay == 1)?($totalDaysOfMonth):($totalDaysOfMonth + ($currentMonthFirstDay - 1)); 
        $boxDisplay = ($totalDaysOfMonthDisplay <= 35)?35:42; 
         
        $prevMonth = date("m", strtotime('-1 month', strtotime($date))); 
        $prevYear = date("Y", strtotime('-1 month', strtotime($date))); 
        $totalDaysOfMonth_Prev = cal_days_in_month(CAL_GREGORIAN, $prevMonth, $prevYear); 
         
        $con = array( 
            'where' => array( 
                'status' => 1 
            ), 
            'where_year' => $dateYear, 
            'where_month' => $dateMonth 
        ); 
        $data['events'] = $this->event->getGroupCount($con); 
         
        $data['calendar'] = array( 
            'dateYear' => $dateYear, 
            'dateMonth' => $dateMonth, 
            'date' => $date, 
            'currentMonthFirstDay' => $currentMonthFirstDay, 
            'totalDaysOfMonthDisplay' => $totalDaysOfMonthDisplay, 
            'boxDisplay' => $boxDisplay, 
            'totalDaysOfMonth_Prev' => $totalDaysOfMonth_Prev 
        ); 
         
        $data['monthOptions'] = $this->getMonths($dateMonth); 
        $data['yearOptions'] = $this->getYears($dateYear); 
        $data['eventList'] = $this->getEvents($eventDate, 'return'); 
 
        if(!empty($_SERVER['HTTP_X_REQUESTED_WITH'])){ 
            $this->load->view('calendar/event-cal', $data); 
        }else{ 
            return $this->load->view('calendar/event-cal', $data, true); 
        } 
    } 
     
    /* 
     * Generate months options list for select box 
     */ 
    function getMonths($selected = ''){ 
        $options = ''; 
        for($i=1;$i<=12;$i++) 
        { 
            $value = ($i < 10)?'0'.$i:$i; 
            $selectedOpt = ($value == $selected)?'selected':''; 
            $options .= '<option value="'.$value.'" '.$selectedOpt.' >'.date("F", mktime(0, 0, 0, $i+1, 0, 0)).'</option>'; 
        } 
        return $options; 
    } 
    
    /* 
     * Generate years options list for select box 
     */ 
    function getYears($selected = ''){ 
        $yearInit = !empty($selected)?$selected:date("Y"); 
        $yearPrev = ($yearInit - 5); 
        $yearNext = ($yearInit + 5); 
        $options = ''; 
        for($i=$yearPrev;$i<=$yearNext;$i++){ 
            $selectedOpt = ($i == $selected)?'selected':''; 
            $options .= '<option value="'.$i.'" '.$selectedOpt.' >'.$i.'</option>'; 
        } 
        return $options; 
    } 
    
    /* 
     * Generate events list in HTML format 
     */ 
    function getEvents($date = '', $return='view'){ 
        $date = $date?$date:date("Y-m-d"); 
         
        // Fetch events based on the specific date 
        $con = array( 
            'where' => array( 
                'date' => $date, 
                'status' => 1 
            ) 
        ); 
        $events = $this->event->getRows($con); 
         
        $eventListHTML = '<h2 class="sidebar__heading">'.date("l", strtotime($date)).'<br>'.date("F d, Y", strtotime($date)).'</h2>'; 
        if(!empty($events)){ 
            $eventListHTML .= '<ul class="sidebar__list">'; 
            $eventListHTML .= '<li class="sidebar__list-item sidebar__list-item--complete">Events</li>'; 
            $i = 0; 
            foreach($events as $row){ $i++; 
                $eventListHTML .= '<li class="sidebar__list-item"><span class="list-item__time">'.$i.'.</span>'.$row['title'].'</li>'; 
            } 
            $eventListHTML .= '</ul>'; 
        } 
         
        if($return == 'return'){ 
            return $eventListHTML; 
        }else{ 
            echo $eventListHTML;     
        } 
    } 
}

Model (Event.php)

The Event model handles the database related operations.

• __construct() – Define the table name.
• getRows() – Fetch the events data from the database based on the conditions specified in $params. Returns the data array on success, and FALSE on error.
• getGroupCount() – Grouped by the events based on the date and returns data with event number for each date.

<?php defined('BASEPATH') OR exit('No direct script access allowed'); 
 
class Event extends CI_Model{ 
    function __construct() { 
        // Set table name 
        $this->table = 'events'; 
    } 
     
    /* 
     * Fetch event data from the database 
     * @param array filter data based on the passed parameters 
     */ 
    function getRows($params = array()){ 
        $this->db->select('*'); 
        $this->db->from($this->table); 
         
        if(array_key_exists("where", $params)){ 
            foreach($params['where'] as $key => $val){ 
                $this->db->where($key, $val); 
            } 
        } 
         
        if(array_key_exists("returnType",$params) && $params['returnType'] == 'count'){ 
            $result = $this->db->count_all_results(); 
        }else{ 
            if(array_key_exists("id", $params) || (array_key_exists("returnType", $params) && $params['returnType'] == 'single')){ 
                if(!empty($params['id'])){ 
                    $this->db->where('id', $params['id']); 
                } 
                $query = $this->db->get(); 
                $result = $query->row_array(); 
            }else{ 
                $this->db->order_by('date', 'asc'); 
                if(array_key_exists("start",$params) && array_key_exists("limit",$params)){ 
                    $this->db->limit($params['limit'],$params['start']); 
                }elseif(!array_key_exists("start",$params) && array_key_exists("limit",$params)){ 
                    $this->db->limit($params['limit']); 
                } 
                 
                $query = $this->db->get(); 
                $result = ($query->num_rows() > 0)?$query->result_array():FALSE; 
            } 
        } 
         
        // Return fetched data 
        return $result; 
    } 
     
    /* 
     * Fetch and group by events based on date 
     * @param array filter data based on the passed parameters 
     */ 
    function getGroupCount($params = array()){ 
        $this->db->select("date, COUNT(id) as event_num"); 
        $this->db->from($this->table); 
         
        if(array_key_exists("where", $params)){ 
            foreach($params['where'] as $key => $val){ 
                $this->db->where($key, $val); 
            } 
        } 
         
        if(array_key_exists("where_year", $params)){ 
            $this->db->where("YEAR(date) = ".$params['where_year']); 
        } 
         
        if(array_key_exists("where_month", $params)){ 
            $this->db->where("MONTH(date) = ".$params['where_month']); 
        } 
         
        $this->db->group_by('date'); 
         
        $query = $this->db->get(); 
        $result = ($query->num_rows() > 0)?$query->result_array():FALSE; 
         
        // Return fetched data 
        return $result; 
    } 
}

View

1. calendar/

1.1. index.php
Display the event calendar passed by the index() method of the Calendar controller.

<!-- Display event calendar -->
<div id="calendar_div">
    <?php echo $eventCalendar; ?>
</div>

Include the jQuery library.

<!-- jQuery library -->
<script src="<?php echo base_url('assets/js/jquery.min.js'); ?>"></script>

The following code is used to get the calendar and events data using jQuery and Ajax.

• The getCalendar() function Initiate Ajax request to get calendar HTML from eventCalendar() method of Calendar controller.
• The getEvents() function Initiate Ajax request to get events list from getEvents() method of Calendar controller.

<script>
function getCalendar(target_div, year, month){
    $.get( '<?php echo base_url('calendar/eventCalendar/'); ?>'+year+'/'+month, function( html ) {
        $('#'+target_div).html(html);
    });
}

function getEvents(date){
    $.get( '<?php echo base_url('calendar/getEvents/'); ?>'+date, function( html ) {
        $('#event_list').html(html);
    });
}
</script>

The following code helps to change the calendar days by changing the year or month dropdown.

<script>
$(document).on("change", ".month-dropdown", function(){
    getCalendar('calendar_div', $('.year-dropdown').val(), $('.month-dropdown').val());
});
$(document).on("change", ".year-dropdown", function(){
    getCalendar('calendar_div', $('.year-dropdown').val(), $('.month-dropdown').val());
});
</script>

1.2. event-cal.php
Create a large calendar and add events to this calendar.

• In the header, year and month dropdown is provided to navigate to the different month.
• Next and Prev button is provided to navigate to the next and previous month.
• Each date cell holds the number of the events. On hover, a tooltip appears with the event number for the selected date.
• By clicking the event number, the events are listed at the top of the calendar.

<main class="calendar-contain">
    <section class="title-bar">
        <a href="javascript:void(0);" class="title-bar__prev" onclick="getCalendar('calendar_div','<?php echo date("Y",strtotime($calendar['date'].' - 1 Month')); ?>','<?php echo date("m",strtotime($calendar['date'].' - 1 Month')); ?>');"></a>
        <div class="title-bar__month">
            <select class="month-dropdown">
                <?php echo $monthOptions; ?>
            </select>
        </div>
        <div class="title-bar__year">
            <select class="year-dropdown">
                <?php echo $yearOptions; ?>
            </select>
        </div>
        <a href="javascript:void(0);" class="title-bar__next" onclick="getCalendar('calendar_div','<?php echo date("Y",strtotime($calendar['date'].' + 1 Month')); ?>','<?php echo date("m",strtotime($calendar['date'].' + 1 Month')); ?>');"></a>
    </section>
	
    <aside class="calendar__sidebar" id="event_list">
        <?php echo $eventList; ?>
    </aside>
	
    <section class="calendar__days">
        <section class="calendar__top-bar">
            <span class="top-bar__days">Mon</span>
            <span class="top-bar__days">Tue</span>
            <span class="top-bar__days">Wed</span>
            <span class="top-bar__days">Thu</span>
            <span class="top-bar__days">Fri</span>
            <span class="top-bar__days">Sat</span>
            <span class="top-bar__days">Sun</span>
        </section>
		
        <?php  
            $dayCount = 1; 
            $eventNum = 0; 
             
            echo '<section class="calendar__week">'; 
            for($cb=1;$cb<=$calendar['boxDisplay'];$cb++){ 
                if(($cb >= $calendar['currentMonthFirstDay'] || $calendar['currentMonthFirstDay'] == 1) && $cb <= $calendar['totalDaysOfMonthDisplay']){ 
                    // Current date 
                    $dayCount = ($dayCount < 10 && strpos($dayCount, '0') == false)?'0'.$dayCount:$dayCount; 
                    $currentDate = $calendar['dateYear'].'-'.$calendar['dateMonth'].'-'.$dayCount; 
                     
                    // Get number of events based on the current date 
                    $eventNum = 0; 
                    if(!empty($events)){ 
                        $eventData = array_filter($events, function ($var) use ($currentDate) { 
                            return ($var['date'] == $currentDate); 
                        }); 
                        $eventData = array_values($eventData); 
                        $eventData = !empty($eventData[0])?$eventData[0]:''; 
                        $eventNum = !empty($eventData['event_num'])?$eventData['event_num']:0; 
                    } 
                     
                    // Define date cell color 
                    if(strtotime($currentDate) == strtotime(date("Y-m-d"))){ 
                        echo ' 
                            <div class="calendar__day today" onclick="getEvents(\''.$currentDate.'\');"> 
                                <span class="calendar__date">'.$dayCount.'</span> 
                                <span class="calendar__task calendar__task--today">'.$eventNum.' Events</span> 
                            </div> 
                        '; 
                    }elseif($eventNum > 0){ 
                        echo ' 
                            <div class="calendar__day event" onclick="getEvents(\''.$currentDate.'\');"> 
                                <span class="calendar__date">'.$dayCount.'</span> 
                                <span class="calendar__task">'.$eventNum.' Events</span> 
                            </div> 
                        '; 
                    }else{ 
                        echo ' 
                            <div class="calendar__day no-event" onclick="getEvents(\''.$currentDate.'\');"> 
                                <span class="calendar__date">'.$dayCount.'</span> 
                                <span class="calendar__task">'.$eventNum.' Events</span> 
                            </div> 
                        '; 
                    } 
                    $dayCount++; 
                }else{ 
                    if($cb < $calendar['currentMonthFirstDay']){ 
                        $inactiveCalendarDay = ((($calendar['totalDaysOfMonth_Prev']-$calendar['currentMonthFirstDay'])+1)+$cb); 
                        $inactiveLabel = 'expired'; 
                    }else{ 
                        $inactiveCalendarDay = ($cb-$calendar['totalDaysOfMonthDisplay']); 
                        $inactiveLabel = 'upcoming'; 
                    } 
                    echo ' 
                        <div class="calendar__day inactive"> 
                            <span class="calendar__date">'.$inactiveCalendarDay.'</span> 
                            <span class="calendar__task">'.$inactiveLabel.'</span> 
                        </div> 
                    '; 
                } 
                echo ($cb%7 == 0 && $cb != $calendar['boxDisplay'])?'</section><section class="calendar__week">':''; 
            } 
            echo '</section>'; 
        ?>
    </section>
</main>

How to Highlight Specific Dates in jQuery UI Datepicker

Conclusion

Our example code helps you to integrate the event calendar functionality in the CodeIgniter website. The events can be displayed in the calendar dynamically from the database. This calendar allows navigating to the different months without page refresh using jQuery and Ajax. You can easily enhance the functionality of the CodeIgniter event calendar as per your needs.