How to get the date when a cell is rendered date on a calendar
I have a situation where I need to set a date to attach in each event url (for the url url I add the href attr using jquery query string), but after checking the docs, I found both eventClick
and eventRender
doesnt return the cell date where the event is displayed.
I tried google for this and found tricky solutions using a callback eventClick
and used pages X and Y and then got the closest element that contains a date attribute for a specific date of the cell, but
eventClick:function(event,jsEvent,view){
var clickedDate = $.nearest({x: jsEvent.pageX, y: jsEvent.pageY}, '.fc-day').attr('data-date');
alert(clickedDate);
}
But these solutions fail when I have multiple events on the same date cell and more events will be shown in the popup.
Note: $. closest is a jquery plugin to find the closest element from given posts X, Y
Note. I am using v2
source to share
Is this good for you?
http://jsfiddle.net/3E8nk/531/
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2014-06-12',
editable: true,
eventRender: function(event, element, view) {
var start = event.start.clone().startOf('day');
var end = event.end ? event.end.clone().endOf('day') : start.clone().endOf('day');
//Known bug: We get all "touching" events and not just necessarily events on the day we clicked
var events = $('#calendar').fullCalendar('clientEvents');
var touchingEvents = events.filter(function(event) {
var
eventStartWithin = event.start.isWithin(start, end),
eventEndWithin = event.end ? event.end.isWithin(start, end) : false;
return eventStartWithin || eventEndWithin;
});
console.log(touchingEvents);
},
events: [
{
title: 'All Day Event',
start: '2014-06-01'
},
{
title: 'Long Event',
start: '2014-06-07',
end: '2014-06-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2014-06-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2014-06-16T16:00:00'
},
{
title: 'Meeting',
start: '2014-06-12T10:30:00',
end: '2014-06-12T12:30:00'
},
{
title: 'Lunch',
start: '2014-06-12T12:00:00'
},
{
title: 'Birthday Party',
start: '2014-06-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2014-06-28'
}
]
});
source to share