Implement Calendar Library in CodeIgniter

In this tutorial, We will explain how to Implement Calendar in CodeIgniter.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. This is a very simple example, you can just copy paste, and change according to your requirement.

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

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

Step 1: Load “calendar” class in controller.

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

<?php

// load calendar library

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

Step 2: Create a controller file

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

<?php

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

class MyCalendar extends CI_Controller {

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

    }
    // index method 
    public function index() { 
        $data = array();
        $data['metaDescription'] = 'Calendar';
        $data['metaKeywords'] = 'Calendar';
        $data['title'] = "Calendar - Techarise";
        $data['breadcrumbs'] = array('Calendar' => '#');
        $this->load->view('calendar/index', $data);
    }
    // getCalendar 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();
            $calendarData = 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, $calendarData, $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

132

<?php

/* * ***

* Version: 1.0.0

* Description of My Calendar Controller

* @author Techarise Team

* @email info@techarise.com

* *** */

if (!defined('BASEPATH'))

exit('No direct script access allowed');

class MyCalendar extends CI_Controller {

public function __construct() {

parent::__construct();

}

// index method

public function index() {

$data = array();

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

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

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

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

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

}

// getCalendar 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();

$calendarData = 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, $calendarData, $this->uri->segment(3), $this->uri->segment(4));

echo $data['calendar'];

}

Step 3: 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="">

  <title><?php print $title; ?></title>
  <link rel="icon" type="image/ico" href="<?php print HTTP_IMAGE_PATH; ?>favicon.ico">
  <!-- 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://techarise.com"><h1>Tech Arise</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://techarise.com">Home
                <span class="sr-only">(current)</span>
              </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://techarise.com/php-free-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://techarise.com"><h1>Tech Arise</h1></a>

</button>

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

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

</a>

</li>

</li>

</ul>

</div>

</nav>

Step 4: 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="text-muted small mb-4 mb-lg-0">Copyright &copy;  2011 - <?php print date('Y', time());?> <a href="https://techarise.com/">TECHARISE.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>
  <script>
    var baseurl = "<?php print site_url();?>";
  </script>
  <!-- Bootstrap core JavaScript -->
  <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 src="<?php print HTTP_JS_PATH; ?>common.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>

</div>

</a>

</li>

</a>

</li>

</a>

</li>

</ul>

</div>

</footer>

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

</script>

</body>

</html>

Step 5: Create a view(index)

Create a view file named index.php inside “application/views/calendar” 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 Library in CodeIgniter</h2>
      </div>       
      <div id="my-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 Library in CodeIgniter</h2>

</div>

</div>

</section>

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

Step 6: Create a AJAX file Create a js file named custom.js inside “assets/js” folder

// render calendar
if (jQuery('div#my-calendar').length > 0) {
    jQuery.ajax({
        url: baseurl + 'mycalendar/getCalendar',
        dataType: 'html',
        beforeSend: function () {
            $('#my-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('#my-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 + 'mycalendar/getCalendar',
        type: 'post',
        data: {page: page},
        dataType: 'html',
        beforeSend: function () {
            $('#my-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('#my-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 + 'mycalendar/getCalendar',
        type: 'post',
        data: {year: year, month: month},
        dataType: 'html',
        beforeSend: function () {
            $('#my-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('#my-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 + 'mycalendar/getCalendar',
        type: 'post',
        data: {year: year, month: month},
        dataType: 'html',
        beforeSend: function () {
            $('#my-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('#my-calendar').html(html);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
    });

});

// render calendar

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

jQuery.ajax({

url: baseurl + 'mycalendar/getCalendar',

dataType: 'html',

beforeSend: function () {

$('#my-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('#my-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 + 'mycalendar/getCalendar',

type: 'post',

data: {page: page},

dataType: 'html',

beforeSend: function () {

$('#my-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('#my-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 + 'mycalendar/getCalendar',

type: 'post',

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

dataType: 'html',

beforeSend: function () {

$('#my-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('#my-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 + 'mycalendar/getCalendar',

type: 'post',

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

dataType: 'html',

beforeSend: function () {

$('#my-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('#my-calendar').html(html);

error: function (xhr, ajaxOptions, thrownError) {

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

}

});

Demo Download