Fetch event details (title, start and end) from database for fullcalendar

Question

I have really searched a lot about this, but I still haven't gotten through with my problem. I am creating a calendar (using the plugin fullcalendar and using codeigniter as the backend) that would display a tour and it's specific time span. So, in this case the title of the event would be the tour name, and for the duration of the tour, the start and end dates is to be fetched.

I have already succeeded with the insertion of the data to the database, it's just that the events are not appearing on their respective dates.

These are what I have coded so far:

Controller: Calendar.php

function view_tours(){ 
    $this->load->model('Calendar_model');
    $tours = $this->Calendar_model->getTours();
    echo json_encode($tours);
}

function add_tour(){
    $sdate = $this->input->post('start_date'); //start date
    $edate = $this->input->post('end_date'); //end date
    if($this->form_validation->run() == TRUE){ //column name in db=>name in form
        $tour = array('tour_name' => $this->input->post('tour_name'), 
            'start_date' => date('Y-m-d', strtotime($sdate)), 
            'end_date' => date('Y-m-d', strtotime($edate)),
            'slots' => $this->input->post('slots'),
            'rate' => $this->input->post('rate'),);
        $this->Calendar_model->insert_tour($tour);
        echo 'success';
    }
    else {
        redirect(base_url().'Calendar');
        echo "error";   
    }
}

Model: Calendar_model.php

public function getTours(){
    $query = $this->db->get('tours');
    return $query -> result_array();
}
function insert_tour($tour){
        $this->db->insert('tours', $tour); 
        return $this->db->insert_id();
}

View: home.php (This is the html file)

<div id="AddModal" class="modal fade">
     <div class="modal-dialog">
          <div class="modal-content">
               <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
                    <h4 id="modalTitle" class="modal-title"> Add a Tour </h4> 
                </div>
                <div id="modalBody" class="modal-body"> 
                     <?php
                          echo validation_errors();
                     ?>
                     <form class="form-horizontal" id="crud-form" method="POST" action="<?php echo base_url();?>Calendar/add_tour">

                     <div class="form-group">
                          <label class="col-md-4 control-label" for="tour_name">Tour Name</label>
                          <div class="col-md-4">
                               <input type="text" class="form-control" id="tour_name" name="tour_name"/>
                          </div>
                      </div>

                      <div class="form-group">
                           <label class="col-md-4 control-label" for="start_date">Start Date</label>
                           <div class="col-md-4">
                                <input type="date" class="form-control" id="start_date" name="start_date"/>
                           </div>
                      </div>

                      <div class="form-group">
                           <label class="col-md-4 control-label" for="end_date">End Date</label>
                           <div class="col-md-4">
                                <input type="date" class="form-control" id="end_date" name="end_date"/>
                           </div>
                       </div>


                       <div class="form-group">
                            <label class="col-md-4 control-label" for="slots">Slots</label>
                            <div class="col-md-4">
                                 <input type="text" class="form-control" id="slots" name="slots"/>
                            </div>
                        </div>

                        <div class="form-group">
                             <label class="col-md-4 control-label" for="rate">Rate</label>
                             <div class="col-md-4">
                                  <input type="text" class="form-control" id="rate" name="rate"/>
                             </div>
                       </div>

                       <div class="form-group">
                            <label class="col-md-4 control-label" for="color">Color</label>
                            <div class="col-md-4">
                                 <input id="color" name="color" type="text" class="form-control input-md" readonly="readonly" />
                                 <span class="help-block">Click to pick a color</span>
                             </div>
                       </div>

                       <button type="submit" class="btn btn-primary"> Add Tour</button>
                       </form>


                 </div> <!--end of modal body-->
                 <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                 </div>
           </div>
      </div>
</div>

I have recently edited this but this does not work.
JS File: main.js I have tried fetching data using the $.ajax options but when i do this, the calendar itself does not appear. What is wrong with the code? I am just a beginner with ajax.

events: {
    url: base_url+'Calendar/view_tours',
    type: 'POST',
    data{
        title: tour_name,
        start: start_date,
        end: end_date

    },error: function(){
        alert('error in fetching from database!');
    }
}, //end of events

I just pasted a snippet of the js. I know that the calendar is "somehow" retrieving data from the database because i can see the events, BUT, it only appears on the current date in real time and shows the current time, for all events added. And i have added a tool tip to see if the tour name (title) is being read, and it is.

Here's what the actual results are: click to see image

Summary of problem: Events are not in their respective dates and the time added is on realtime.

Answer 1

So it seems like your problem is that the JSON object returned by your URL has unrecognizable data for fullCalendar. So you'll have to fetch events like this:

events: base_url+'Calendar/view_tours',

And change the columns of your data base from tour_id to id, tour_name to title, start_date to start and end_date to end. This will create the correct JSON object.