FullCalendar display events on dayClick - php

Question

The dayClick in fullCalendar is defined as:
dayClick: function (start, allDay, jsEvent, view) {
alert('You clicked me!');
}
This is triggered when the user clicks on a day.
I wanted to access data of events when a user clicks on a particular day. Sort of merging the eventClick function in dayClick so that when I click on a particular day, I get the event title, starttime, endtime of all events occurring that particular day.

Answer 1

I hope this help you
$('#calendar').fullCalendar({
dayClick: function(date, allDay, jsEvent, view) {
var startDate = new Date(date.getFullYear(), date.getMonth(), date.getDay(), 0, 0, 0).getTime();
var endDate = new Date(date.getFullYear(), date.getMonth(), date.getDay(), 23, 59, 59).getTime();
var cache = new Date().getTime();
$.getJSON("/json-events.php?start="+startDate+"&end="+endDate+"&_="+cache,
function(data) {
// do stuff with the JSOn data
}
}
});

Answer 2

You can try this:
eventClick: function(xEvent, jsEvent, view) {
alert("Title: " + xEvent.title //Get the event title
+ "\n StartTime: " + xEvent.start //Get the event start date
+ "\n EndTime: " + xEvent.end //Get the event end date
);
console.log(xEvent); //See your console for all event properties/objects
}
xEvent properties/object lists.

Answer 3

dayClick: function(date, allDay, jsEvent, view) {
var startDate = new Date(date.getFullYear(), date.getMonth(), date.getDay(), 0, 0, 0).getTime();
var endDate = new Date(date.getFullYear(), date.getMonth(), date.getDay(), 23, 59, 59).getTime();
var cache = new Date().getTime();
$.getJSON("/json-events.php?start="+startDate+"&end="+endDate+"&_="+cache,
function(data) {
// do stuff with the JSOn data
});
alert('ENTROU!');
},
now it works
it opens a alert, you just have to put the information wanted.

Answer 4

I think this is what you are looking for.
dayClick: function(date, allDay, jsEvent, view) {
var date2 = new Date(date.getFullYear(), date.getMonth(), date.getDate()+1);
//This gives the next day of the clicked day('date' contains the clicked day)
var todaysEvents = $('#calendar').fullCalendar('clientEvents', function(event) {
// Below statement returns the EVENT OBJECT of the clicked day after comparing the two dates
return event.start >= date && event.start < date2;
});
// You can now access the returned object & extract what you want
// console.log(todaysEvents); --> returns the complete object
// console.log(todaysEvents[0].title); --> returns that day's event title
},
I Hope this helped.