show event in fullcalendar with json.parse (SyntaxError: missing : after property id)

Question

Show events in the calendar after the loading screen.

events: {
    JSON.parse(get_data());
},

CONTROLLER all is ok no problem here expept for the JSON.PARSE

$calendar = array();
foreach($data_calendar as $key => $val) {
    $calendar[] = array(
        'id' => intval($val - > id),

        'title' => $val - > title,
        'description' => trim($val - > description),
        'start' => date_format(date_create($val - > start_date), "Y-m-d H:i:s"),
        'end' => date_format(date_create($val - > end_date), "Y-m-d H:i:s"),
        'color' => $val - > color,
    );
}

$data = array();
$data['get_data'] = json_encode($calendar);

$data['telaativa'] = 'agenda'; //retorna agenda penso que manté menu barra esquerda colapsada em agenda 
$data['tela'] = ('/calendario/view_agenda--');
view_agenda--

$this - > load - > view('view_home2', $data);

RESULT id with 1 or "1" in the result is because i declare intval for id so i can get both formats in output.

 'get_data' => string '[{"id":1,
 'get_data' => string '[{"id":"1",

array (size=3)
      'get_data' => string '[{"id":1,"title":"teste evento1","description":"descri\u00e7\u00e3o do evento bla bla bla","start":"2019-05-06 00:00:00","end":"2019-05-07 00:00:00","color":"#0071c5"},{"id":6,"title":"cert soldador 1-1","description":"descrtivo do certificado ser 111 bw t1-25mm s275","start":"2019-05-29 23:00:00","end":"2019-05-30 00:00:00","color":"#40E0D0"},{"id":7,"title":"cert soldador 1-2 soldador nr1","description":"certificado de soldador nr 1 doc 1-2","start":"2019-05-30 00:00:00","end":"2019-05-31 00:00:00","color'... (length=5865)
      'telaativa' => string 'agenda' (length=6)
      'tela' => string '/calendario/view_agenda--' (length=25)

VIEW

$(document).ready(function() {
    $('.date-picker').datepicker();
    $('#calendarIO').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,basicWeek,basicDay'
        },
        defaultDate: moment().format('YYYY-MM-DD'),
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        selectable: true,
        selectHelper: true,
        select: function(start, end) {
            $('#create_modal input[name=start_date]').val(moment(start).format('YYYY-MM-DD'));
            $('#create_modal input[name=end_date]').val(moment(end).format('YYYY-MM-DD'));
            $('#create_modal').modal('show');
            save();
            $('#calendarIO').fullCalendar('unselect');
        },
        eventDrop: function(event, delta, revertFunc) { // si changement de position
            editDropResize(event);
        },
        eventResize: function(event, dayDelta, minuteDelta, revertFunc) { // si changement de longueur
            editDropResize(event);
        },
        eventClick: function(event, element) {
            deteil(event);
            editData(event);
            deleteData(event);
        },

        events: {

            JSON.parse(get_data());

        },

    });
});

ERROR SyntaxError: missing : after property id

If i delete JSON.parse(get_data()); my calendar will be visible but no events. If I add an event it will be shown until I refresh the page. All function work expect loading data from DB into the calendar.

Answer 1

You seem to be confused about how to use your PHP view data in your view.

I think maybe you should read this: https://www.codeigniter.com/user_guide/general/views.html#adding-dynamic-data-to-the-view . It shows you how to inject the PHP data you provided to the view into your page.

What you're doing now is writing pure JavaScript which tries to call a function which doesn't exist. What you need to do is write a PHP snippet to inject the server-side data into the HTML and JavaScript code which the PHP is creating.

I'm not a CodeIgniter expert, but based on that documentation page, what I think you should be writing is:

events: <?php echo $get_data; ?>,

If you inject it like this without quote marks, then it will be automatically treated as JavaScript array literal, so there's no need for JSON.parse(). This works because JSON syntax is a subset of valid JavaScript object syntax. If you use the View Source feature in your browser to view the finished output of your page, you'll see what I mean.

(Note that you also need to remove the { and } from the events: declaration, because fullCalendar expects an array, not an object.