How to Display data from controller to full calander in code igniter

Question

Here is my controller

 function Test_Function()
    {


 // Event id;
    // event.title is the only place where you can "display" text;
    // event.start: What date should the event be placed
    $data = array
    (
        array
        (
            'id' => 1234, 
            'title' => "Mr Name xxxxx\nDate 2016-06-04T00:00:00\nBirthday\nemail sasa@asfda.com\nTelephone 1234567890",
            'start' => "2016-06-15"
        ),
    );
    // add more array(...events...) as required
    echo json_encode($data);    
 }

I need to display these details in full calendar using ajax , How to display the result

   <script>
$(document).ready(function() {
    $('#calendar').fullCalendar({
        events: {
            url: '<?php echo site_url('Air/Get_calander_fare'); ?>',
            type: 'POST',
            data: {
                value1: 'aaa',
                value2: 'bbb'
            },
            success: function(data) {
                console.log(data);
            },
            error: function() {
                alert('there was an error while fetching events!');
            },     
        }
    });
});

I need to display Name,Data,Email,Telephone in the Date from the $data

Answer 1

In PHP process you have to echo string wether json encoded or any other string, but string. AJAX is expecting string and your string is not formatted well. You can check it manually typing URL of example.tld/[index.php/]controller_name/test_function (square brackets part is in case you don't have set rewrite rule in apache) and see what is echo or output. If you have parse error in Ubuntu can be checked in /var/log/apache2/error.log by default, but you can check it and reconfigure in /etc/php5/apache2/php.ini if needed. Locations depend on your OS. You should wrap your $data string into single quotes instead of wrapping into double quotes. Valid output would be something like:

$data = '{"Results":{"Results":[{"Title":"Mr","Name":"xxxxx","Date":"2016-06-04T00:00:00","Data":"Birthday","email":"sasa@asfda.com","Telephone":1234567890},{"Title":"Mr","Name":"yyyyy","Date":"2016-06-05T00:00:00","Data":"Birthday","email":"qwee@rrrrr.com","Telephone":7412589630},{"Title":"Mrs","Name":"zzzzzzz","Date":"2016-06-07T00:00:00","Data":"Anniversary","email":"asdaf@qwe.com","Telephone":1234567890}]}}';
echo $data;

Answer 2

You have two options to get your data to display in the calendar and your event data has to be formatted according to the docs http://fullcalendar.io/docs/event_data/Event_Object/. Both options are described in http://fullcalendar.io/docs/event_data/events_function/ and http://fullcalendar.io/docs/event_data/events_json_feed/

I'm going to format the data in php and use events as json since to me it's simpler however, it requires changes in your Test_Function(). You could have Test_Function() echo data the following way:

function Test_Function()
{
    // Event id;
    // event.title is the only place where you can "display" text;
    // event.start: What date should the event be placed
    $data = array
    (
        array
        (
            'id' => 1234, 
            'title' => "Mr Name xxxxx\nDate 2016-06-04T00:00:00\nBirthday\nemail sasa@asfda.com\nTelephone 1234567890",
            'start' => "2016-06-06"
        ),
    );
    // add more array(...events...) as required
    echo json_encode($data);   
}

Then in jQuery

As JSON feed (side note: you were missing the enclosing } for your events:{ ...)

$('#calendar').fullCalendar({

    events: {
        url: '<?php echo site_url('Test/Test_Function'); ?>',
        type: 'POST',
        data: {
            value1: 'aaa',
            value2: 'bbb'
        },
        success: function(data) {
            console.log(data);
        },
        error: function() {
            alert('there was an error while fetching events!');
        },
    }
}); 

Shorter version

$('#calendar').fullCalendar({
    events: '<?php echo site_url('Test/Test_Function'); ?>'
});

Option: Events as a function. Test_Function() can be used as is but the string $data is surrounded by double quotes " " so your $data variable is not being interpreted as a string and more than likely php is throwing an error as mentioned in another answer. To fix that change the surrounding double quotes " " to ' ' or add an escape sequence \" to all double quotes inside the string so that the whole content it's interpreted as a string. After $data is fixed you can do the event creation jQuery the following way:

    $('#calendar').fullCalendar({

    events: function(start, end, timezone, callback) {
        $.ajax({
            url: '<?php echo site_url('Test/Test_Function'); ?>',
            type: 'POST',
            data: {
                value1: 'aaa',
                value2: 'bbb'
            },
            success: function(data) {
                var events = [];
               /* loop though all the events received from php and parse them and push them into an array
                var event = {
                    id = data[index]
                events.push(...);
            */
                callback(events);
            },
            error: function() {
                alert('there was an error while fetching events!');
            },
        });
    }
}); 

UPDATE
I'm using FullCalendar v2.7.3 and jQuery v2.1.4. Below is the code I'm using to get the events

Test_Function() in php

<?php
    Test_Function();
    function Test_Function()
    {
        // Event id;
        // event.title is the only place where you can "display" text;
        // event.start: What date should the event be placed
        $data = array
        (
            array
            (
                'id' => 1234, 
                'title' => "Mr Name xxxxx\nDate 2016-06-04T00:00:00\nBirthday\nemail sasa@asfda.com\nTelephone 1234567890",
                'start' => "2016-06-06"
            ),
        );
        // add more array(...events...) as required
        echo json_encode($data);        
    }
?>

In html. Change the events url according to your setup.

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../fullcalendar.css' rel='stylesheet' />
<link href='../fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../fullcalendar.min.js'></script>
<script>
    $(document).ready(function() {
        $('#calendar').fullCalendar({
            events: {
                url: './php/test-function.php',
                type: 'POST',
                data: {
                    value1: 'aaa',
                    value2: 'bbb'
                },
                success: function(data) {
                    console.log(data);
                },
                error: function() {
                    alert('there was an error while fetching events!');
                },     
            }
        });
    });
</script>
<style>

    body {
        margin: 40px 10px;
        padding: 0;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        font-size: 14px;
    }

    #calendar {
        max-width: 900px;
        margin: 0 auto;
    }

</style>
</head>
<body>

    <div id='calendar'></div>

</body>
</html>

Answer 3

you can append json data in eventRendar function.

eventRender: function (event, element) {    
        element.find('.fc-content').parent().append('<span>'+event.name+'</span>');

}

Answer 4

instead of using echo $data use return $data that will automatic return the value you want.