Fullcalendar, want to show all events on dayclick its not showing up

Question

I am using fullcalendar, once a user clicks on a date the events on that day should show up on the pop up.

Currently I have the list of the events with me , I am able to show the events on that day on calendar and make it clickable.

But now I want those events to show on dayclick which I am not able to do.

Below code shows the events on that day on calendar:

eventClick: function(event) {
       $.colorbox({html:"<h1>"+event.title+"</h1><br><p>Tour 
       starts on :"+$.fullCalendar.formatDate(event.start,
       'yyyy-M-dd')+"<br>Tour type :
       <a href='http://reservations.valantech.com/order-
       tour/"+$.fullCalendar.formatDate(event.start,'yyyy-M-
       dd')+"/"+event.ID+"'>"+event.type+"</a></p>"});
},

Below code open a pop up when a date is clicked:

dayClick: function(date, allDay, jsEvent, view) {

        if (allDay) {
            alert('Clicked on the entire day: ' + date);
        }else{
            alert('Clicked on the slot: ' + date);
        }

        alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);

        alert('Current view: ' + view.name);

        // change the day's background color just for fun
        //$(this).css('background-color', 'red');

    },

Now I want to merge these two basically.

Clicking the date should open a pop-up with a list of all available events for that date.

I tried to do :

dayClick: function(date, allDay, jsEvent, view) {
$('#calendar').fullCalendar('clientEvents', function(event) {
                if(event.start <= date && event.end >= date) {
                    return true;
                }
                return false;
            });

but it didnt worked for me.

Answer 1

Try this

dayClick: function(date, allDay, jsEvent, view) {
$('#calendar').fullCalendar( 'changeView', 'basicDay');
$('#calendar').fullCalendar( 'gotoDate', date  );
};

Answer 2

It should be like this. You can change criteria of return value if return true will return actual event and added to your array Array. and finally you will got array Array variable with all events of that date. Please check the condition as per your requirements.

dayClick: function(date, allDay, jsEvent, view) {
    console.log(date);
    $('#agenda_calendar').fullCalendar( 'changeView', 'month');
    //$('#agenda_calendar').fullCalendar( 'gotoDate', date  );
    var array = $('#agenda_calendar').fullCalendar('clientEvents', function(event){ 
        return ( event.start >= date && event.end < date ); // May be change
    });
    console.log(array);
});