Fullcalendar - Getting the id outside of the loop
<p>I'm using Fullcalendar for the first time. I have spent the day researching and problem solving and have hit a problem that I cannot work out. I have a loop running through the results of an Ajax call to populate the events. I also have a layer which appears over the event items on hover to offer edit/delete features. This all worked fine whilst I was working with static data (in testing) but now I have made it dynamic, it doesn't!</p>

<p>The problem is that the eventMouseOver() is outside of the loop so I'm unable to define the id. I know this is obvious but what has made me ask is that I have another variable defined outside of the loop which adds a description to the event, also using the data from the Ajax call that does work. Each description defined outside of the loop sits where it should on the different events.</p>

<p>Can anyone help me get the id into my inline function calls - editEvent and deleteEvent?</p>

<pre><code>events: function(start, end, timezone, callback) {

                    $.ajax({
                        url: 'inc/scripts/expenses-scripts.php',
                        type: 'post',
                        dataType: 'json',
                        data: {
                            // our hypothetical feed requires UNIX timestamps
                            start: start.unix(),
                            end: end.unix(),
                            getExpenses: true,    // an option!
                            salonId: $('#globalSalonId').text(),  // an option!
                        },
                        encode: true,

                        success: function(doc) {

                            if(doc.success==true)
                            {

                                var events = [];

                                for(x=0; x&lt;doc.event.length; x++)
                                {

                                    events.push({
                                        title: doc.event[x].description,
                                        start: doc.event[x].start,
                                        editable: true,
                                        backgroundColor: doc.event[x].backgroundColor,
                                        eventStartEditable: true,
                                        eventDurationEditable: true,
                                        description: doc.event[x].title+' - '+doc.event[x].price,

                                    });

                                }

                                callback(events);

                            }
                        }

                    });

                },

            eventResize: function(event, delta, revertFunc, element) {

                alert(event.title + " end is now " + event.end.format());

                if (!confirm("is this okay?")) {
                    revertFunc();
                }

            },

            eventDrop: function(event, delta, revertFunc, element) {

                alert(event.id + " was dropped on " + event.start.format());

                if (!confirm("Are you sure about this change?")) {
                    revertFunc();
                }

            },

            // I lose the event.id here //
            eventMouseover: function(event, domEvent, element) {
                var layer = "&lt;div id='events-layer' class='fc-transparent' style='position:absolute; width:100%; height:100%; top:-2px; text-align:right; z-index:100'&gt; &lt;a&gt; &lt;img border='0' style='padding-right:5px;' src='img/pencil.png' width='10' onClick='editEvent("+event.id+");'&gt;&lt;/a&gt;&lt;a&gt;&lt;img border='0' style='padding-right:5px;' src='img/invalid.png' width='10' onClick='deleteEvent("+event.id+");'&gt;&lt;/a&gt;&lt;/div&gt;";
                $(this).append(layer);
            },   

            eventMouseout: function(event, domEvent) {
                $("#events-layer").remove();
            }, 

            // ADD A DESCRIPTION TO AN EVENT //

            // I have access to the event.description here though //
            eventRender: function(event, element) { 
                element.find('.fc-title').append("&lt;br/&gt;" + event.description); 
            } 
</code></pre>

<p>The data coming back in the Ajax callback is</p>

<pre><code>while($row = $result-&gt;fetch_object())
        {

            $data['event'][$x]['start'] = $row-&gt;expenseDate;
            $data['event'][$x]['title'] = $row-&gt;expenseTitle;               
            $data['event'][$x]['id'] = $row-&gt;id;
            $data['event'][$x]['category'] = $row-&gt;expenseCategory;
            $data['event'][$x]['editable'] = 'true';
            $data['event'][$x]['backgroundColor'] = '#3399cc';
            $data['event'][$x]['eventStartEditable'] = 'true';
            $data['event'][$x]['eventDurationEditable'] = 'true';
            $data['event'][$x]['description'] = $row-&gt;expenseCategory;
            $data['event'][$x]['price'] = '&amp;pound;'.$row-&gt;expenseTotal;
            $data['event'][$x]['allDay'] = false;

            $x++;

        }
</code></pre>