1

I am trying to integrate bootstrap calendar to codeigniter site. I am able to make the calendar display in my webpage. But when i try to populate the events from database there is no events populated.

My controller file

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Calendar extends CI_Controller 
{

    public function index()
    {
        //$this->load->view('user/calendar2');
        $this->load->view('user/includes/header'); 
         $this->load->view('user/includes/menu');
        $this->load->view('user/calendar');
         $this->load->view('user/includes/footer');
    }
}

/* End of file calendar.php */
/* Location: ./application/controllers/calendar.php */

events controller file

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Events1 extends CI_Controller {

    public function index()
    {
        $this->load->view("user/add_event");
    }

    public function save()
    {
        $this->form_validation->set_rules('from', 'Desde', 'trim|required|xss_clean');
        $this->form_validation->set_rules('to', 'Hasta', 'trim|required|xss_clean');
        $this->form_validation->set_rules('url', 'Url', 'trim|required|xss_clean');
        $this->form_validation->set_rules('title', 'Título', 'trim|required|xss_clean');
        $this->form_validation->set_rules('event', 'Evento', 'trim|required|xss_clean');
        $this->form_validation->set_rules('class', 'Tipo de evento', 'trim|required|xss_clean');

        $this->form_validation->set_message('required', 'El  %s es requerido');

        if($this->form_validation->run() == FALSE)
        {
            $this->index();
        }
        else
        {
            $this->load->model("user/events1_model");
            $this->events_model->add();
            redirect("calendar");
        }
    }

    public function getAll()
    {
        if($this->input->is_ajax_request())
        {
            $this->load->model('user/events1_model');
            $events = $this->events_model->getAll();
            echo json_encode(
                array(
                    "success" => 1,
                    "result" => $events
                )
            );
        }
    }

    public function render($id = 0)
    {
        if($id != 0)
        {
            echo $id;
        }
    }
}


/* End of file events.php */
/* Location: ./application/controllers/events.php */

My model file

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Events1_model extends CI_Model 
{
    public function __construct()
    {
        parent::__construct();
        date_default_timezone_set("Europe/Madrid"); 
    }

    /**
    * @desc - añade un nuevo evento
    * @access public
    * @author Iparra
    * @return bool
    */


    /**
    * @desc - obtiene todos los registros de events
    * @access public
    * @author Iparra
    * @return object
    */
    public function getAll()
    {
        $query = $this->db->get('tbl_my_calendar1');
        if($query->num_rows() > 0)
        {
            return $query->result();
        }
        return object();
    }

    /**
    * @desc - formatea una fecha a microtime para añadir al evento tipo 1401517498985
    * @access private
    * @author Iparra
    * @return strtotime
    */
    private function _formatDate($date)
    {
        return strtotime(substr($date, 6, 4)."-".substr($date, 3, 2)."-".substr($date, 0, 2)." " .substr($date, 10, 6)) * 1000;
    }
}
/* End of file events_model.php */
/* Location: ./application/models/events_model.php */

My view file

<?php 
    $this->load->helper('contents_helper');
    $this->load->helper('admin/admin_helper');
    $this->load->helper('admin/category_helper');
    $popular_cities = get_popular_cities();
    $categories = get_popular_categories();
    $for = $this->uri->segment(3);
    $uri2 = $this->uri->segment(2);

    if($uri2=='list-events'){
        $cat_id = get_product_id_by_slug('tbl_events_categories',$for);
        $events = get_events_by_category($cat_id);
    }elseif($uri2=='list-by-cities'){
        $city_name = get_product_name_by_slug('tbl_cities',$for);

    }elseif($uri2=='list-by-states'){
        $state_name = get_product_name_by_slug('tbl_states',$for);
    }

    if($uri2=='page'){
        $for = 'Events';
    }
    $state = isset($state) ? $state : '';
    $city = isset($city) ? $city : '';
    $event = isset($event) ? $city: '';
?>

<html lang="en">
<head>
    <meta charset="utf-8">


    <title>My Calendar</title>
    <link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/style1.css"/>
    <link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/colorbox.css"/>

    <script type="text/javascript" src="<?php echo base_url();?>js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="<?php echo base_url();?>js/jquery.colorbox-min.js"></script>
    <link rel="stylesheet" type="application/css" href="<?php echo base_url();?>bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>bower_components/bootstrap-calendar/css/calendar.css">
    <script type="text/javascript" src="<?php echo base_url(); ?> bower_components/jquery/jquery.min.js"></script>
    <script type="application/javascript" src="<?php echo base_url(); ?>bower_components/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="<?php echo base_url(); ?>bower_components/bootstrap-calendar/js/language/es-ES.js"></script>
    <style> 
    .page-header
    {
        border-bottom:none;
    }
    .active {

    height: 2.5em;
}
    </style>
</head>
<body>
<div class="container">
<div class="row">
    <div class="col-md-3" style="min-height:910px;">
             <div class="popular-inner">
                <h3>Top 15 Trade shows</h3>
            </div>
            <div class="seperator-dotted"></div>
            <div class="popular-inner">
                <h3>Popular Industries</h3>
                <ul>
                    <?php foreach($categories as $cat):?>

                        <li>
                            <a href="<?php echo site_url('events/list-events/'.$cat['slug']);?>"><?php echo $cat['name']?> <span>[<?php echo count_categories($cat['id']);?>]</span></a></li>
                    <?php endforeach;?>
                </ul>
            </div>
            <div class="seperator-dotted"></div>
            <div class="popular-inner">
                <h3>Popular Cities</h3>
                <ul>
                    <?php
                    $i=0;
                    foreach($popular_cities as $city)
                    {
                        echo "<li><a href='".site_url('events/list-by-cities/'.$city['slug'])."'>".$city['name']." <span>[".count(get_product('tbl_events',array('city'=>$city['name'])))."]</span></a></li>";
                        $i++;
                        if($i > 5)
                            break;
                    }
                    ?>
                    <li><a href="<?php echo site_url('cities');?>"><i class="ca ca-plus"></i></a></li>
                </ul>
            </div>

        </div>

    <div class="col-md-12 additional-field">
        <div class="mid-content-inner">
        <h3 class="listing-title">
             <div class="">
        <ol class="breadcrumb">
            <li><a href="<?php echo base_url() ?>calendar">Calendar</a></li>
            <li><a href="<?php echo base_url() ?>events">Add an event</a></li>
        </ol>
        <div class="row">
            <div class="page-header">
                <div class="pull-right form-inline">
                    <div class="btn-group">
                        <button class="btn btn-primary" data-calendar-nav="prev"><< Previous</button>
                        <button class="btn" data-calendar-nav="today">Today</button>
                        <button class="btn btn-primary" data-calendar-nav="next">Next >></button>
                    </div>
                    <div class="btn-group">
                        <button class="btn btn-warning" data-calendar-view="year">Year</button>
                        <button class="btn btn-warning active" data-calendar-view="month">Month</button>
                        <button class="btn btn-warning" data-calendar-view="week">Week</button>
                        <button class="btn btn-warning" data-calendar-view="day">Day</button>
                    </div>
                </div>
            </div>  

        </div><hr>
        <div class="row">
            <div id="calendar"></div>
        </div>

        <! - modal window for calendar ->
        <div class="modal fade" id="events-modal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">Modal title</h4>
                    </div>
                    <div class="modal-body" style="height: 400px">
                        <p>One fine body&hellip;</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </div>

    <script src="<?php echo base_url() ?>bower_components/underscore/underscore-min.js"></script>
    <script src="<?php echo base_url() ?>bower_components/bootstrap-calendar/js/calendar.js"></script>
    <script type="text/javascript">
    (function($){
        //creamos la fecha actual
        var date = new Date();
        var yyyy = date.getFullYear().toString();
        var mm = (date.getMonth()+1).toString().length == 1 ? "0"+(date.getMonth()+1).toString() : (date.getMonth()+1).toString();
        var dd  = (date.getDate()).toString().length == 1 ? "0"+(date.getDate()).toString() : (date.getDate()).toString();

        // we set the calendar values
        var options = {
            events_source: '<?php echo base_url() ?>user/events1/getAll',
            view: 'month',
            language: 'en-US',
            tmpl_path: '<?php echo base_url() ?>bower_components/bootstrap-calendar/tmpls/',
            tmpl_cache: false,
            day: yyyy+"-"+mm+"-"+dd,
            time_start: '10:00',
            time_end: '20:00',
            time_split: '30',
            width: '100%',
            onAfterEventsLoad: function(events) 
            {
                if(!events) 
                {
                    return;
                }
                var list = $('#eventlist');
                list.html('');

                $.each(events, function(key, val) 
                {
                    $(document.createElement('li'))
                        .html('<a href="' + val.url + '">' + val.title + '</a>')
                        .appendTo(list);
                });
            },
            onAfterViewLoad: function(view) 
            {
                $('.page-header h3').text(this.getTitle());
                $('.btn-group button').removeClass('active');
                $('button[data-calendar-view="' + view + '"]').addClass('active');
            },
            classes: {
                months: {
                    general: 'label'
                }
            }
        };

        var calendar = $('#calendar').calendar(options);
//var calendar = $('#calendar').calendar({events_source: '/api/events.php'});
//var calendar = $('#calendar').calendar({events_source: '/events.json.php'});


        $('.btn-group button[data-calendar-nav]').each(function() 
        {
            var $this = $(this);
            $this.click(function() 
            {
                calendar.navigate($this.data('calendar-nav'));
            });
        });

        $('.btn-group button[data-calendar-view]').each(function() 
        {
            var $this = $(this);
            $this.click(function() 
            {
                calendar.view($this.data('calendar-view'));
            });
        });

        $('#first_day').change(function()
        {
            var value = $(this).val();
            value = value.length ? parseInt(value) : null;
            calendar.setOptions({first_day: value});
            calendar.view();
        });

        $('#events-in-modal').change(function()
        {
            var val = $(this).is(':checked') ? $(this).val() : null;
            calendar.setOptions(
                {
                    modal: val,
                    modal_type:'iframe'
                }
            );
        });
    }(jQuery));
    </script>
        </h3>

        <div class="seperator"></div>

    </div>

    <div class="col-lg-6">
    </div>
    </div>

</div>
</div>

    <script>
    $(function(){
        $(".act_note").colorbox({ 
                overlayClose: false,
                data:{year:<?php echo $year;?>,mon:<?php echo $mon;?>}
        });
    });
</script>
</body>
</html>

My table structure -- phpMyAdmin SQL Dump -- version 3.3.9 -- http://www.phpmyadmin.net -- -- Host: localhost -- Generation Time: Dec 11, 2015 at 05:47 PM -- Server version: 5.5.8 -- PHP Version: 5.3.5

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `bootstrap_calendar`
--

-- --------------------------------------------------------

--
-- Table structure for table `tbl_my_calendar1`
--

CREATE TABLE IF NOT EXISTS `tbl_my_calendar1` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `user_id` int(11) NOT NULL,
  `common_id` int(11) NOT NULL,
  `start_date` varchar(20) NOT NULL,
  `end_date` varchar(20) NOT NULL,
  `for` varchar(20) NOT NULL,
  `body` varchar(200) NOT NULL,
  `url` varchar(200) NOT NULL,
  `class` varchar(200) NOT NULL DEFAULT 'event-info',
  `title` varchar(50) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=11 ;

--
-- Dumping data for table `tbl_my_calendar1`
--

INSERT INTO `tbl_my_calendar1` (`id`, `user_id`, `common_id`, `start_date`, `end_date`, `for`, `body`, `url`, `class`, `title`) VALUES
(1, 51, 1703, '1420952400000', '1421125200000', 'events', 'events   events', 'events    events', 'event-info', ''),
(2, 51, 1700, '1443672000000', '1421125200000', 'events', 'events', 'events', 'event-info', ''),
(3, 51, 1697, '1443672000000', '1443844800000', 'events', '', '', 'event-info', ''),
(4, 51, 1693, '1443672000000', '1443844800000', 'events', '', '', 'event-info', ''),
(5, 51, 1692, '1443672000000', '1443844800000', 'events', '', '', 'event-info', ''),
(6, 51, 1690, '1443672000000', '1443844800000', 'events', '', '', 'event-info', ''),
(7, 51, 1688, '1443672000000', '1443844800000', 'events', '', '', 'event-info', ''),
(8, 51, 1689, '1443672000000', '1443844800000', 'events', '', '', 'event-info', ''),
(9, 51, 1685, '1420952400000', '1421125200000', 'events', 'events', 'events', 'event-info', 'events'),
(10, 0, 0, '1449956880000', '1450216080000', '', 'tbl_my_calendar1', 'http://localhost/bn/events', 'event-info', 'tbl_my_calendar1');

i have changed the table structure from the default table by adding user_id, common_id and type fields in it. Requesting to point me the mistake i am making to resolve the issue.

Regards,
Vinoth 
4
  • When i inspect element the there is an error Uncaught SyntaxError: Unexpected token , in caendar.js <script> $(function(){ $(".act_note").colorbox({ overlayClose: false, data:{year:,mon:} }); }); </script>
    – vinoth
    Dec 11, 2015 at 19:13
  • data:{year:,mon:} year and mon have no values ... can you put something else in there as placeholders? data:{year:0,mon:0}
    – slapyo
    Dec 11, 2015 at 19:17
  • When i run the calendar separately it is displaying with no error but populates events for all the month and year the class which is not loading is <div class="events-list" data-cal-start="1450204200000" data-cal-end="1450290600000">
    – vinoth
    Dec 11, 2015 at 19:19
  • Yes Slapyo, i followed the instruction from the readme file in bootstrap github and made the changes in table structure to make the start and end date as milliseconds but not able to populate the values. How could i add the values.
    – vinoth
    Dec 11, 2015 at 19:22

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.