CI + JSON + FullCalendar

[eluser]austintbiggs[/eluser]
I'm currently trying to create a JSON feed for FullCalendar using CI. I currently have a working example, but the output doesn't get imported into the calendar. Anyone have any ideas? I've been stuck on this for almost 3 days now..

In my controller

Code:

function json()
    {  
        $data['events'] = $this->events_model->jsonEvents();
        header("Content-Type: application/json");
        $this->load->view('json', $data);  
    }

In my model

Code:

function jsonEvents ()
{       $this->db->order_by('startDate', 'desc');
        $this->db->limit(10);
        return $this->db->get('calendar');}  
    }

In my view

Code:

<?php foreach($events->result() as $entry): ?>
          <?php $jsonevents = array(
            'id' => $entry->eventID,
            'title' => $entry->eventTitle,
            'start' => $entry->startDate,
            'allDay' => false,
            'end' => $entry->endDate
        );
        echo json_encode($jsonevents);
        ?>
        
    <?php endforeach; ?>

The corresponding JSON

Code:

{"id":"24242","title":"sdfsdfsdfsdf","start":"2011-05-05 13:00:53","allDay":false,"end":"2011-05-06 17:00:19"}
{"id":"1234567890","title":"Test","start":"2011-05-05 13:00:53","allDay":false,"end":"2011-05-06 17:00:19"}

The calendar setup

Code:

//Fullcalendar        
        
        $('#calendar').fullCalendar({
                firstDay:'1',
                weekMode:'liquid',
                aspectRatio: '1.5',
                theme:true,
                selectable:true,
                editable:true,
                draggable:true,
                droppable:true,
                timeFormat:'H:mm',
                axisFormat:'H:mm',
                columnFormat:{
                    month: 'ddd',    // Mon
                    week: 'ddd dS', // Mon 9/7
                    day: 'dddd dS MMMM'  // Monday 9/7
                },
                titleFormat:{
                    month: 'MMMM yyyy',                             // September 2009
                    week: "MMM d[ yyyy]{ 'to'[ MMM] d, yyyy}", // Sep 7 - 13 2009
                    day: 'ddd, MMMM d, yyyy'                  // Tuesday, Sep 8, 2009
                },
                allDayText:'All Day',
                header:{
                    left:   'prev title next, today',
                    center: '',
                    right:  'agendaWeek,agendaDay,month'
                    },
                
                eventSources: [

                        // your event source
            
                    {
                          url: 'http://ravecity.tv/feed/json',
                          className:'calendar_magenta'
                        },
                        {
                            url: 'http://www.google.com/calendar/feeds/[email protected]/public/basic',
                            className: 'calendar_navy'
                        }
                
                
                    ],
                
                drop: function(date, allDay) { // this function is called when something is dropped
            
                // retrieve the dropped element's stored Event Object
                var originalEventObject = $(this).data('eventObject');
                
                // we need to copy it, so that multiple events don't have a reference to the same object
                var copiedEventObject = $.extend({}, originalEventObject);
                
                // assign it the date that was reported
                copiedEventObject.start = date;
                copiedEventObject.allDay = allDay;
                
                // render the event on the calendar
                // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
                $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
                
                // is the "remove after drop" checkbox checked?
                if ($('#drop-remove').is(':checked')) {
                    // if so, remove the element from the "Draggable Events" list
                    $(this).remove();
                }
                
            }
                
            });
        
        $('ul#calendar_drag_list li a').each(function() {
        
            // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
            // it doesn't need to have a start or end
            var eventObject = {
                title: $.trim($(this).text()), // use the element's text as the event title
                className: 'calendar_black'
            };
            
            // store the Event Object in the DOM element so we can get to it later
            $(this).data('eventObject', eventObject);
            
            // make the event draggable using jQuery UI
            $(this).draggable({
                zIndex: 999,
                revert: true,      // will cause the event to go back to its
                revertDuration: 5  //  original position after the drag
            });
            
        });