Implement Calendar in CodeIgniter with jQuery AJAX

In this tutorial, We share how to Implement Calendar in CodeIgniter with jQuery AJAX. A calendar is a system of organising task, meeting, event and more. CodeIgniter Calendar class enables you to dynamically create calendars. Your calendars can be formatted through the use of a calendar template, allowing 100% control over every aspect of its design. In addition, you can pass data to your calendar cells.

Before started to implement the CodeIgniter Calendar, look files structure:

codeIgniter-calendar
- application
  - config
    - constants.php
    - routes.php
  - controllers
    - CICalendar.php
  - views
    - cicalendar
      - index.php
    - templates
      - header.php
      - footer.php
- system
- index.php
- assets
  - css
  - js

Initializing the Class

Like most other classes in CodeIgniter, the Calendar class is initialized in your controller using the $this->load->library function:

<?php
    // load calendar library
    $this->load->library('calendar');
?>

<?php

// load calendar library

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

Once loaded, the Calendar object will be available using:

<?php
    // load calendar library
    $this->calendar
?>

<?php

// load calendar library

$this->calendar

Displaying a Calendar

Here is a very simple example showing how you can display a calendar:

    <?php
     $this->load->library('calendar');
     echo $this->calendar->generate();
    ?>

<?php

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

echo $this->calendar->generate();

Step 1: Create a controller file

Create a controller file named CICalendar.php inside “application/controllers” folder.

The CICalendar controller handles the calendar process.
__construct() – Loads the required library, helper and more.
index() – load Calendar.
getCalendar() – render Calendar process

<?php

/* * ***
 * Version: 1.0.0
 *
 * Description of CI Calendar Controller
 *
 * @author CodersMag Team
 *
 * @email  info@codersmag.com
 *
 * *** */
if (!defined('BASEPATH'))
    exit('No direct script access allowed');

class CICalendar extends CI_Controller {

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

    }
    // index method 
    public function index() { 
        $data = array();
        $data['metaDescription'] = 'Calendar';
        $data['metaKeywords'] = 'Calendar';
        $data['title'] = "Calendar - CodersMag";
        $data['breadcrumbs'] = array('Calendar' => '#');
        $this->load->view('calendar/index', $data);
    }
    // render Calendar method
    public function getCalendar() { 
            $data = array();
            $curentDate = date('Y-m-d', time());
            if ($this->input->post('page') !== null) {
                $malestr = str_replace("?", "", $this->input->post('page'));
                $navigation = explode('/', $malestr);
                $getYear = $navigation[1];
                $getMonth = $navigation[2];
            } else {
                $getYear = date('Y');
                $getMonth = date('m');
            }
            if ($this->input->post('year') !== null) {
                $getYear = $this->input->post('year');
            }
            if ($this->input->post('month') !== null) {
                $getMonth = $this->input->post('month'); 
            }

            $already_selected_value = $getYear;
            $earliest_year = 1950;
            $startYear = '';
            $googleEventArr = array();
            $calData = array();

            $class = 'href="javascript:void(0);" data-days="{day}"';

            $startYear .= '<div class="col-md-3 col-sm-5 col-xs-7 col-md-offset-3 col-sm-offset-1"><div class="select-control"><select name="year" id="setYearVal" class="form-control">';
        foreach (range
                (date
                        ('Y') + 50, $earliest_year) as $x) {
            $startYear .= '<option value="' . $x . '"' . ($x == $already_selected_value ? ' selected="selected"' : '') . '>' . $x . '</option>';
        }
        $startYear .= '</select></div></div>';
        $startMonth = '<div class="col-md-3 col-sm-5 col-xs-7 col-md-offset-3 col-sm-offset-1"><div class="select-control"><select name="mont h" id="setMonthVal" class="form-control"><option value="0">Select Month</option>
            <option value="01" ' . ('01' == $getMonth ? ' selected="selected"' : '') . '>January</option>
            <option value="02" ' . ('02' == $getMonth ? ' selected="selected"' : '') . '>February</option>
            <option value="03" ' . ('03' == $getMonth ? ' selected="selected"' : '') . '>March</option>
            <option value="04" ' . ('04' == $getMonth ? ' selected="selected"' : '') . '>April</option>
            <option value="05" ' . ('05' == $getMonth ? ' selected="selected"' : '') . '>May</option>
            <option value="06" ' . ('06' == $getMonth ? ' selected="selected"' : '') . '>June</option>
            <option value="07" ' . ('07' == $getMonth ? ' selected="selected"' : '') . '>July</option>
            <option value="08" ' . ('08' == $getMonth ? ' selected="selected"' : '') . '>August</option>
            <option value="09" ' . ('09' == $getMonth ? ' selected="selected"' : '') . '>September</option>
            <option value="10" ' . ('10' == $getMonth ? ' selected="selected"' : '') . '>October</option>
            <option value="11" ' . ('11' == $getMonth ? ' selected="selected"' : '') . '>November</option>
            <option value="12" ' . ('12' == $getMonth ? ' selected="selected"' : '') . '>December</option>
    </select></div></div>';
    
        $prefs['template'] = '        

        {table_open}<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" class="calendar">{/table_open}

        {heading_row_start}<tr style="border:none;">{/heading_row_start}

        {heading_previous_cell}<th style="border:none;" class="padB"><a class="calnav" data-calvalue="{previous_url}" href="javascript:void(0);"><i class="fa fa-chevron-left fa-fw"></i></a></th>{/heading_previous_cell}
        {heading_title_cell}<th style="border:none;" colspan="{colspan}"><div class="row">' . $startMonth . '' . $startYear . '</div></th>{/heading_title_cell}
        {heading_next_cell}<th style="border:none;" class="padB"><a class="calnav" data-calvalue="{next_url}" href="javascript:void(0);"><i class="fa fa-chevron-right fa-fw"></i></a></th>{/heading_next_cell}

        {heading_row_end}</tr>{/heading_row_end}

        {week_row_start}<tr>{/week_row_start}
        {week_day_cell}<th>{week_day}</th>{/week_day_cell}
        {week_row_end}</tr>{/week_row_end}

        {cal_row_start}<tr>{/cal_row_start}
        {cal_cell_start}<td>{/cal_cell_start}
        {cal_cell_start_today}<td>{/cal_cell_start_today}
        {cal_cell_start_other}<td class="other-month">{/cal_cell_start_other}

        {cal_cell_content}<a ' . $class . '>{day}</a>{content}{/cal_cell_content}
        {cal_cell_content_today}<a ' . $class . '>{day}</a>{content}<div class="highlight"></div>{/cal_cell_content_today}

        {cal_cell_no_content}<a ' . $class . '>{day}</a>{/cal_cell_no_content}
        {cal_cell_no_content_today}<a ' . $class . '>{day}</a><div class="highlight"></div>{/cal_cell_no_content_today}

        {cal_cell_blank}&nbsp;{/cal_cell_blank}

        {cal_cell_other}{day}{/cal_cel_other}

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

        {table_close}</table>{/table_close}';
        $prefs['start_day'] = 'monday';
        $prefs['day_type'] = 'short';
        $prefs['show_next_prev'] = TRUE;
        $prefs['next_prev_url'] = '?';

        // load calendar library 
        $this->load->library('calendar', $prefs);
        $data['calendar'] = $this->calendar->generate($getYear, $getMonth, $calData, $this->uri->segment(3), $this->uri->segment(4));
        echo $data['calendar'];
    }

}

?>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

<?php

/* * ***

* Version: 1.0.0

* Description of CI Calendar Controller

* @author CodersMag Team

* @email info@codersmag.com

* *** */

if (!defined('BASEPATH'))

exit('No direct script access allowed');

class CICalendar extends CI_Controller {

public function __construct() {

parent::__construct();

}

// index method

public function index() {

$data = array();

$data['metaDescription'] = 'Calendar';

$data['metaKeywords'] = 'Calendar';

$data['title'] = "Calendar - CodersMag";

$data['breadcrumbs'] = array('Calendar' => '#');

$this->load->view('calendar/index', $data);

}

// render Calendar method

public function getCalendar() {

$data = array();

$curentDate = date('Y-m-d', time());

if ($this->input->post('page') !== null) {

$malestr = str_replace("?", "", $this->input->post('page'));

$navigation = explode('/', $malestr);

$getYear = $navigation[1];

$getMonth = $navigation[2];

} else {

$getYear = date('Y');

$getMonth = date('m');

}

if ($this->input->post('year') !== null) {

$getYear = $this->input->post('year');

}

if ($this->input->post('month') !== null) {

$getMonth = $this->input->post('month');

}

$already_selected_value = $getYear;

$earliest_year = 1950;

$startYear = '';

$googleEventArr = array();

$calData = array();

$class = 'href="javascript:void(0);" data-days="{day}"';

$startYear .= '<div class="col-md-3 col-sm-5 col-xs-7 col-md-offset-3 col-sm-offset-1"><div class="select-control"><select name="year" id="setYearVal" class="form-control">';

foreach (range

(date

('Y') + 50, $earliest_year) as $x) {

$startYear .= '<option value="' . $x . '"' . ($x == $already_selected_value ? ' selected="selected"' : '') . '>' . $x . '</option>';

}

$startYear .= '</select></div></div>';

$startMonth = '<div class="col-md-3 col-sm-5 col-xs-7 col-md-offset-3 col-sm-offset-1"><div class="select-control"><select name="mont h" id="setMonthVal" class="form-control"><option value="0">Select Month</option>

<option value="01" ' . ('01' == $getMonth ? ' selected="selected"' : '') . '>January</option>

<option value="02" ' . ('02' == $getMonth ? ' selected="selected"' : '') . '>February</option>

<option value="03" ' . ('03' == $getMonth ? ' selected="selected"' : '') . '>March</option>

<option value="04" ' . ('04' == $getMonth ? ' selected="selected"' : '') . '>April</option>

<option value="08" ' . ('08' == $getMonth ? ' selected="selected"' : '') . '>August</option>

<option value="09" ' . ('09' == $getMonth ? ' selected="selected"' : '') . '>September</option>

<option value="10" ' . ('10' == $getMonth ? ' selected="selected"' : '') . '>October</option>

<option value="11" ' . ('11' == $getMonth ? ' selected="selected"' : '') . '>November</option>

<option value="12" ' . ('12' == $getMonth ? ' selected="selected"' : '') . '>December</option>

</select></div></div>';

$prefs['template'] = '

{table_open}<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" class="calendar">{/table_open}

{heading_row_start}<tr style="border:none;">{/heading_row_start}

{heading_previous_cell}<th style="border:none;" class="padB"><a class="calnav" data-calvalue="{previous_url}" href="javascript:void(0);"><i class="fa fa-chevron-left fa-fw"></i></a></th>{/heading_previous_cell}

{heading_title_cell}<th style="border:none;" colspan="{colspan}"><div class="row">' . $startMonth . '' . $startYear . '</div></th>{/heading_title_cell}

{heading_next_cell}<th style="border:none;" class="padB"><a class="calnav" data-calvalue="{next_url}" href="javascript:void(0);"><i class="fa fa-chevron-right fa-fw"></i></a></th>{/heading_next_cell}

{heading_row_end}</tr>{/heading_row_end}

{week_row_start}<tr>{/week_row_start}

{week_day_cell}<th>{week_day}</th>{/week_day_cell}

{week_row_end}</tr>{/week_row_end}

{cal_row_start}<tr>{/cal_row_start}

{cal_cell_start}<td>{/cal_cell_start}

{cal_cell_start_today}<td>{/cal_cell_start_today}

{cal_cell_start_other}<td class="other-month">{/cal_cell_start_other}

{cal_cell_content}<a ' . $class . '>{day}</a>{content}{/cal_cell_content}

{cal_cell_content_today}<a ' . $class . '>{day}</a>{content}<div class="highlight"></div>{/cal_cell_content_today}

{cal_cell_no_content}<a ' . $class . '>{day}</a>{/cal_cell_no_content}

{cal_cell_no_content_today}<a ' . $class . '>{day}</a><div class="highlight"></div>{/cal_cell_no_content_today}

{cal_cell_blank} {/cal_cell_blank}

{cal_cell_other}{day}{/cal_cel_other}

{cal_cell_end}</td>{/cal_cell_end}

{cal_cell_end_today}</td>{/cal_cell_end_today}

{cal_cell_end_other}</td>{/cal_cell_end_other}

{cal_row_end}</tr>{/cal_row_end}

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

$prefs['start_day'] = 'monday';

$prefs['day_type'] = 'short';

$prefs['show_next_prev'] = TRUE;

$prefs['next_prev_url'] = '?';

// load calendar library

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

$data['calendar'] = $this->calendar->generate($getYear, $getMonth, $calData, $this->uri->segment(3), $this->uri->segment(4));

echo $data['calendar'];

}

Step 2: Create a view(header)

Create a view file named header.php inside “application/views/templates” folder

This view contains the header section of the webpage. The Bootstrap library is used to provide a better UI, so, include it in the header section.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" type="image/ico" href="<?php print HTTP_IMAGE_PATH; ?>favicon.ico">
  <title><?php print $title; ?></title>
  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
  <!-- Custom fonts for this template -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css" />
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
  <!-- Custom styles for this template -->
  <link href="<?php print HTTP_CSS_PATH; ?>style.css" rel="stylesheet">
</head>
<body>
  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top header-bg-dark" style="background: ##FFFFFF!;">
  <div class="container">
    <a class="navbar-brand font-weight-bold" href="https://codersmag.com"><h1>Coders Mag</h1></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="https://codersmag.com">Home
                <span class="sr-only">(current)</span>
              </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://codersmag.com/php-script-demos/">LIVE DEMO</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

<!DOCTYPE html>

<head>

</head>

<body>

<a class="navbar-brand font-weight-bold" href="https://codersmag.com"><h1>Coders Mag</h1></a>

</button>

<a class="nav-link" href="https://codersmag.com">Home

<span class="sr-only">(current)</span>

</a>

</li>

</li>

</ul>

</div>

</nav>

Step 3: Create a view(footer)

Create a view file named footer.php inside “application/views/templates” folder

This view contains the footer section of the webpage.

 <!-- Footer -->
  <footer class="footer bg-light footer-bg-dark">
    <div class="container">
      <div class="row">
        <div class="col-lg-6 h-100 text-center text-lg-left my-auto">
          <ul class="list-inline mb-2">
            <li class="list-inline-item">
              <a href="#">About</a>
            </li>
            <li class="list-inline-item">&sdot;</li>
            <li class="list-inline-item">
              <a href="#">Contact</a>
            </li>
            <li class="list-inline-item">&sdot;</li>
            <li class="list-inline-item">
              <a href="#">Terms of Use</a>
            </li>
            <li class="list-inline-item">&sdot;</li>
            <li class="list-inline-item">
              <a href="#">Privacy Policy</a>
            </li>
          </ul>
          <p class="small mb-4 mb-lg-0" style="color: #E6ECF0;">Copyright &copy;  2017 - <?php print date('Y', time());?> <a style="color: #E6ECF0;" href="https://codersmag.com">CODERSMAG.COM</a> All rights reserved.</p>
        </div>
        <div class="col-lg-6 h-100 text-center text-lg-right my-auto">
          <ul class="list-inline mb-0">
            <li class="list-inline-item mr-3">
              <a href="#">
                <i class="fab fa-facebook fa-2x fa-fw"></i>
              </a>
            </li>
            <li class="list-inline-item mr-3">
              <a href="#">
                <i class="fab fa-twitter-square fa-2x fa-fw"></i>
              </a>
            </li>
            <li class="list-inline-item">
              <a href="#">
                <i class="fab fa-instagram fa-2x fa-fw"></i>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </footer>
  <!-- Bootstrap core JavaScript -->
    <script>
    var baseurl = "<?php print site_url();?>";
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.js"></script>
  <script>
    $(document).ready(function () {
        bsCustomFileInput.init()
    })
  </script>
  <script src="<?php print HTTP_JS_PATH; ?>application.js"></script>

</body>
</html>

<a href="#">About</a>

</li>

<a href="#">Contact</a>

</li>

<a href="#">Terms of Use</a>

</li>

<a href="#">Privacy Policy</a>

</li>

</ul>

<p class="small mb-4 mb-lg-0" style="color: #E6ECF0;">Copyright © 2017 - <?php print date('Y', time());?> <a style="color: #E6ECF0;" href="https://codersmag.com">CODERSMAG.COM</a> All rights reserved.</p>

</div>

</a>

</li>

</a>

</li>

</a>

</li>

</ul>

</div>

</footer>

var baseurl = "<?php print site_url();?>";

</script>

$(document).ready(function () {

bsCustomFileInput.init()

})

</script>

</body>

</html>

Step 4: Create a view(index)

Create a view file named index.php inside “application/views/cicalendar folder

  <?php $this->load->view('templates/header');?>
  <section class="showcase">
    <div class="container">
      <div class="pb-2 mt-4 mb-2 border-bottom">
        <h2>Implement Calendar in CodeIgniter with jQuery AJAX</h2>
      </div>       
      <div id="ci-calendar">
     <div class="text-center"><i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i></div>
   </div>
  </div>
  </section>    
<?php $this->load->view('templates/footer');?>

<?php $this->load->view('templates/header');?>

<h2>Implement Calendar in CodeIgniter with jQuery AJAX</h2>

</div>

</div>

</section>

<?php $this->load->view('templates/footer');?>

Step 5: Create a AJAX file

Create a js file named application.js inside “assets/js” folder

// load ajax calendar
if (jQuery('div#ci-calendar').length > 0) {
    jQuery.ajax({
        url: baseurl + 'cicalendar/getCalendar',
        dataType: 'html',
        beforeSend: function () {
            $('#ci-calendar').html('<div class="text-center mrgA padA"><i class="fa fa-spinner fa-pulse fa-4x fa-fw"></i></div>');
        },
        success: function (html) {
            jQuery('#ci-calendar').html(html);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
    });
}

// render calendar with navigation
jQuery(document).on("click", "a.calnav", function (e) {
    e.preventDefault();
    var page = jQuery(this).data("calvalue");
    jQuery.ajax({
        url: baseurl + 'cicalendar/getCalendar',
        type: 'post',
        data: {page: page},
        dataType: 'html',
        beforeSend: function () {
            $('#ci-calendar').html('<div class="text-center mrgA padA"><i class="fa fa-spinner fa-pulse fa-4x fa-fw"></i></div>');
        },
        success: function (html) {
            jQuery('#ci-calendar').html(html);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
    });
});


// render calendar change month 
jQuery(document).on("change", "#setMonthVal", function (e) {
    e.preventDefault();
    var month = this.value;
    var year = jQuery('#setYearVal > option:selected').val();
    jQuery.ajax({
        url: baseurl + 'cicalendar/getCalendar',
        type: 'post',
        data: {year: year, month: month},
        dataType: 'html',
        beforeSend: function () {
            $('#ci-calendar').html('<div class="text-center mrgA padA"><i class="fa fa-spinner fa-pulse fa-4x fa-fw"></i></div>');
        },
        success: function (html) {
            jQuery('#ci-calendar').html(html);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
    });

});

// render calendar change year 
jQuery(document).on("change", "#setYearVal", function (e) {
    e.preventDefault();
    var year = this.value;
    var month = jQuery('#setMonthVal > option:selected').val();
    jQuery.ajax({
        url: baseurl + 'cicalendar/getCalendar',
        type: 'post',
        data: {year: year, month: month},
        dataType: 'html',
        beforeSend: function () {
            $('#ci-calendar').html('<div class="text-center mrgA padA"><i class="fa fa-spinner fa-pulse fa-4x fa-fw"></i></div>');
        },
        complete: function () {
            jQuery('[data-caltoggle="tooltip"]').tooltip();
        },
        success: function (html) {
            jQuery('#ci-calendar').html(html);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
    });

});

// load ajax calendar

if (jQuery('div#ci-calendar').length > 0) {

jQuery.ajax({

url: baseurl + 'cicalendar/getCalendar',

dataType: 'html',

beforeSend: function () {

$('#ci-calendar').html('<div class="text-center mrgA padA"><i class="fa fa-spinner fa-pulse fa-4x fa-fw"></i></div>');

success: function (html) {

jQuery('#ci-calendar').html(html);

error: function (xhr, ajaxOptions, thrownError) {

console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);

}

});

}

// render calendar with navigation

jQuery(document).on("click", "a.calnav", function (e) {

e.preventDefault();

var page = jQuery(this).data("calvalue");

jQuery.ajax({

url: baseurl + 'cicalendar/getCalendar',

type: 'post',

data: {page: page},

dataType: 'html',

beforeSend: function () {

$('#ci-calendar').html('<div class="text-center mrgA padA"><i class="fa fa-spinner fa-pulse fa-4x fa-fw"></i></div>');

success: function (html) {

jQuery('#ci-calendar').html(html);

error: function (xhr, ajaxOptions, thrownError) {

console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);

}

});

// render calendar change month

jQuery(document).on("change", "#setMonthVal", function (e) {

e.preventDefault();

var month = this.value;

var year = jQuery('#setYearVal > option:selected').val();

jQuery.ajax({

url: baseurl + 'cicalendar/getCalendar',

type: 'post',

data: {year: year, month: month},

dataType: 'html',

beforeSend: function () {

$('#ci-calendar').html('<div class="text-center mrgA padA"><i class="fa fa-spinner fa-pulse fa-4x fa-fw"></i></div>');

success: function (html) {

jQuery('#ci-calendar').html(html);

error: function (xhr, ajaxOptions, thrownError) {

console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);

}

});

// render calendar change year

jQuery(document).on("change", "#setYearVal", function (e) {

e.preventDefault();

var year = this.value;

var month = jQuery('#setMonthVal > option:selected').val();

jQuery.ajax({

url: baseurl + 'cicalendar/getCalendar',

type: 'post',

data: {year: year, month: month},

dataType: 'html',

beforeSend: function () {

$('#ci-calendar').html('<div class="text-center mrgA padA"><i class="fa fa-spinner fa-pulse fa-4x fa-fw"></i></div>');

complete: function () {

jQuery('[data-caltoggle="tooltip"]').tooltip();

success: function (html) {

jQuery('#ci-calendar').html(html);

error: function (xhr, ajaxOptions, thrownError) {

console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);

}

});

Demo Download