Fecting event in Full Calender using codeigniter?

Question

I successfully store and retrive event from database using ajax now how to show this into events in fullcalnder?? Saving event in Database: Using Ajax.

$('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            defaultDate: '2015-02-12',
            selectable: true,
            selectHelper: true,
            select: function(start, end) {
                var title = prompt('Event Title:');
                var eventData;
                if (title) {
                    eventData = {
                        title: title,
                        start: start,
                        end: end
                    };
                    $.ajax ({
                        url: "http://localhost/phplec/sms/calendar/test",
                        type: 'POST',
                        data: {'title': title, 'start' : start.format(), 'end': end.format()},
                        success: function(msg) {
                            alert(msg); 
                        }
                    });

Controller: Here i Accept Ajax request and connect to DB

function test() {
        $this->load->model('calendar_model');
        $data = array(
            'title' => $_POST['title'],
            'start' => $_POST['start'],
            'end' => $_POST['end'] 
        );
        $this->calendar_model->add_record($data);
        echo "working";
    }

Now I want To show my database in fullCalander on page laod. I successfully get event from database and convet it into json now how to show it on view.

function get_records()
    {
        $data = $this->db->get("calendar_test");
        $json_data = json_encode($data->result_array());
        var_dump($json_data);
    }

How i Show this event Dynamically

   $.ajax ({
        url: "http://localhost/phplec/sms/calendar/get_records",
        type: 'GET',
        dataType: "html",   //expect html to be returned                
        success: function(response){
    alert(response)
}

I successfully get event json in fullcalander.js now how to pass this to events.

Answer 1

OK from what I understand you want to click on a calendar day, it prompts you for a title, then you submit the data to the DB and then you want to see it again. These are the steps you need to take:

1. you need to use the events method so that fullcalendar knows how to fetch events when its loaded, like this:

   $('#calendar').fullCalendar({
       // ....your other methods...
       events: 'http://localhost/phplec/sms/calendar/get_records' //this should echo out JSON
   });
   

2. after your ajax succesfully saves the events in the database, then call the refetchEvents method like this:

    $('#calendar').fullCalendar('refetchEvents');
   

In the end, this is how I would do it:

var myCalendar = $('#calendar').fullCalendar({
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
  },
  events: 'http://localhost/phplec/sms/calendar/get_records',
  defaultDate: '2015-02-12',
  selectable: true,
  selectHelper: true,
  select: function(start, end) {
    var title = prompt('Event Title:');
    if (title) {
      var eventData = {
        title: title,
        start: start.format(),
        end: end.format()
      };
      $.ajax({
        url: "http://localhost/phplec/sms/calendar/test",
        type: 'POST',
        data: eventData,
        success: function(result) {
          if(result === "working"){
            myCalendar.fullCalendar('refetchEvents');
          }else{
            alert("Error Message");
          }
        },
        error: function(xhr, status, msg) {
          alert(msg);
        }
      });
    }
  }
});