Question

Hi I’m using fullCalendar 1.5.1, and I’ve created a PHP query that returns almost everything I want to use in the calendar. This is an integrated system so I had to switch to _ASSOC in order to only return a MySQLi asssociative array:

<?php 
global $json_result;
global $myqueryresult;
$GLOBALS["ADODB_FETCH_MODE"] = ADODB_FETCH_ASSOC;
$myquery = "SELECT id, title, eventstart, eventend FROM View1";
$myqueryresult = $GLOBALS["conn"]->GetAll($myquery);
$json_result = json_encode($myqueryresult);
$GLOBALS["ADODB_FETCH_MODE"] = ADODB_FETCH_BOTH;
?>

…except it won’t accept the data because the key in the key/value pairs is quoted (as per JSON standards so I’ve read).

If I just enter the resultant MySQL array, the Javascript just shows the data as “Array”. If I use json_encode() on the array, I get what looks to be a proper JSON object but it doesn’t work with fullCalendar due to the keys being quoted.

Here is my jQuery for fullcalendar:

$(document).ready(function() {                            
    $('#calendar').fullCalendar({          
    height: 600,
    firstDay: 6,
    theme: true,
    year: 2012,
    month: 0,                      
    date: 7,                      
    minTime: 6,
    maxTime: 23,
    startParam: 'eventstart',
    endParam: 'eventend',
    defaultView: 'agendaWeek',        
    allDaySlot: false,
    slotMinutes: 15,                      
    events: <?php echo $json_result; ?>

        // put your options and callbacks here
    })
}); 

Here is the generated HTML source if I use the MySQL array for $json_result :

    $(document).ready(function() {                            
        $('#calendar').fullCalendar({          
<...snip...>
        slotMinutes: 15,                      
        events: Array
            // put your options and callbacks here
        })
    });

And here is the result if I use json_encode($thesamearray)

    $(document).ready(function() {                            
<...snip...>                    
        events: [{"id":"51","title":"Ship in Miami, Florida","eventstart":"2012-01-07 07:00:00","eventend":"2012-01-07 15:00:00"},{"id":"547","title":"Miami, Florida","eventstart":"2012-01-14 07:00:00","eventend":null}]
            // put your options and callbacks here
        })
    });

How can I adjust this so it will work as an array within fullCalendar? It doesn’t seem to want to take a JSON string or an array, at least in the format the array is in now from PHP.

Thanks,
Chris

SOLUTION:

Alias the MySQL fields:

<?php 
global $json_result;
$GLOBALS["ADODB_FETCH_MODE"] = ADODB_FETCH_ASSOC;
$myquery = "SELECT id, title, eventstart AS start, eventend AS end FROM View1";
$myqueryresult = $GLOBALS["conn"]->GetAll($myquery);
$json_result = json_encode($myqueryresult);
$GLOBALS["ADODB_FETCH_MODE"] = ADODB_FETCH_BOTH;
?>

Also adjusted the jQuery to remove my start/endparams and changed allDaySlot to allDayDefault:

$(document).ready(function() {                            
    $('#calendar').fullCalendar({          
    height: 600,
    firstDay: 6,
    theme: true,
    year: 2012,
    month: 0,                      
    date: 7,                      
    minTime: 6,
    maxTime: 23,
    defaultView: 'agendaWeek',        
    allDayDefault: false,
    slotMinutes: 15,                      
    events: <?php echo $json_result; ?>

        // put your options and callbacks here
    })
});

Now, if I could only find a way to make it show an 8-day horizontal agenda, my troubles could be over! Thanks all for the tips.

Answer 1

According to the documentation for Event Object the start date is required and must be specified as the property named start – you’re using the name eventstart

Note that according to the docs, startParam and endParam are parameters for the JSON feed option for events and don’t seem to change the name of the property that is used for start and end times.

---

Update 1

I played around with this a bit and somewhat counter-intuitively, unless you specify allDay: false as a property for an event, even if has a specific time range, it shows up in the all day slot at the top of the calendar which you had disabled with allDaySlot: false. Here’s a working example using almost all of your original setup.

---

Update 2

From your comment to Matt’s answer and from the documentation, I see the global default for the allDay property is inherited from the allDayDefault property which is by default true. Thus, by passing allDayDefult: false in your options to fullCalendar(), you avoid the need to specify allDay: false for each event individually. Here’s is the updated fiddle.. Note that you don’t have to get rid of allDaySlot, that simply dictates whether the slot showing all day events is displayed on top or not.