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
            });
            
        });

[eluser]cahva[/eluser]
I'm not 100% sure but I think the error is how you output the json separately. I think it should be more like this:

Code:

<?php
$jsonevents = array();

foreach($events->result() as $entry)
{
    $jsonevents[] = array(
        'id' => $entry->eventID,
        'title' => $entry->eventTitle,
        'start' => $entry->startDate,
        'allDay' => false,
        'end' => $entry->endDate
    );
        
}

echo json_encode($jsonevents);

BTW, I think you should just build the json in the model and print it out in the controller. IMHO theres no need to use a view that is a pure PHP script.

[eluser]austintbiggs[/eluser]
That works! Thanks so much! This has been quite the headache, and also I thought it should be in a model, but I assumed it needs to be in the view, so that when the javascript loads that url it will be able to read the json, otherwise what link would I load for the JS?

[eluser]cahva[/eluser]
Ehm.. Its the same link than before. The only difference is that you print the json straight from controller and do not use view. For example:

Model

Code:

function jsonEvents ()
{
    $this->db->order_by('startDate', 'desc');
    $this->db->limit(10);
    $events = $this->db->get('calendar')->result();
    
    $jsonevents = array();
    foreach ($events as $entry)
    {
        $jsonevents[] = array(
            'id' => $entry->eventID,
            'title' => $entry->eventTitle,
            'start' => $entry->startDate,
            'allDay' => false,
            'end' => $entry->endDate
        );
    }
    return json_encode($jsonevents);
}

controller

Code:

function json()
{
    header("Content-Type: application/json");
    echo $this->events_model->jsonEvents();
}

[eluser]Unknown[/eluser]
Hi guys,

I'm using CI + Fullcalendar but when I'm trying to display events from my database it doesn't work. I'dont understand why I'm a begginer.. Please help me!

This is my controler:
[code]
public function consulter($page = 'AFFICHAGE')
{

$this->config->set_item('language', 'fr');
$data['title'] = ucfirst($page);
$this->load->model('events_model');
$this->load->view('templates/header',$data);//This is just the header
$this->load->view('templates/affichage');
echo $this->events_model->get_reservation();

}

My model:

public function get_reservation()
{
$this->load->helper('url');

$query = $this->db->query("SELECT a.reservation_id as id,
b.typeEvent_desc as title ,
a.reservation_dateDebut as start,
a.reservation_dateFin as end
FROM obois_reservation a, obois_event_type b
WHERE a.eventType_id = b.eventType_id");

return json_encode($query->result_array());


}
My view:

<head>

[removed]

$(document).ready(function() {


$('#calendar').fullCalendar({

header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},

editable: true,

weekends: false,
defaultView: 'agendaWeek',
minTime: 8,
maxTime: 17,
allDaySlot: false,
allDayDefault: false,

eventSources: [

{
url: "<?php echo base_url().'/index.php/consulter';?>",
color: 'yellow', // an option!
textColor: 'black' // an option!
}
]

});




});

[removed]

<style type='text/css'>

#bodycalendar {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}


#loading {
position: absolute;
top: 5px;
right: 5px;
}

#calendar {
width: 750px;
margin: 0 auto;
}

</style>



</head>
<body>




<div id='loading'>loading...</div>
<div id='bodycalendar'>
&lt;/body&gt;
&lt;/html&gt;


I will appreaciate somebody's help I've followed this forum step by step but still it doesn't :down: