How to show event details on click of day in full calendar
<p>Hi everyone I have events array, on click of day I want to show event details in another panel. I have array with array within array format, I am not getting how to render this to get all the details of event including sub array details on that clicked day. Please see if you can help me with this or can suggest something in it. Here is my code below.</p>

<pre><code>$(window).load(function() {
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: true,
        eventRender: function(event, element, view) {
            for (var i = 0; i &lt;= event.products.length - 1; i++) {
                element.append('&lt;span&gt;' + event.products[i].name + '&lt;span&gt;');
            };
        },
        events: [{
            title: 'EventName',
            start: '2016-05-02',
            products: [{
                name: 'ProductName'
            }]
        }, {
            title: 'Event',
            start: '2016-05-03',
            products: [{
                name: 'ProductName1'
            }, {
                name: 'ProductName2'
            }, {
                name: 'ProductName3'
            },]
        }, {
            title: 'EventName',
            start: '2016-05-13',
            products: [{
                name: 'ProductName1'
            }, {
                name: 'ProductName2'
            }]
        }, {
            title: 'Event',
            start: '2016-05-15',
            products: [{
                name: 'ProductName'
            }]
        }, {
            title: 'EventNAme',
            start: '2016-05-21',
            products: [{
                name: 'ProductName1'
            }, {
                name: 'ProductName2'
            }]
        }, {
            title: 'Event',
            start: '2016-05-23',
            products: [{
                name: 'ProductName1'
            }, {
                name: 'ProductName2'
            }]
        }, {
            title: 'Eventname',
            start: '2016-05-25',
            products: [{
                name: 'ProductName'
            }]
        }, {
            title: 'Event',
            start: '2016-05-29',
            products: [{
                name: 'ProductName'
            }]
        }],
        dayClick: function(date, allDay, jsEvent, view) {
            console.log('date' + date.format('DD/MMM/YYYY') + "allDay" + allDay.title + "jsEvent" + jsEvent + "view" + view)
        }
    });
})
</code></pre>

<p>If you see I have events array and each event has products array, so whenever I click on date I want to show title, as well as product details like same name of product. Here is what I have tried so far with calendar.</p>

<p>So <strong>when I click on any day that has event the I want to show</strong> I dont want to show on click of events, I need whole day clickable right now according to below answer it shows only when clicked on event.</p>

<p>event title                 product_name  </p>

<p>The code is too lengthy so I have created code pen please see if you can edit this, thank you in advance
<a href="http://codepen.io/sud/pen/LNvZmv" rel="nofollow">DEMOTRIAL</a> </p>