CODEWITHSUNDEEP
javascriptjqueryfullcalendar
Saiful
Saiful

Reputation: 1612

FullCalendar: How to identify the calendar row of the element?

On eventRender of the fullcalendar, I want to identify the element belongs to which row of the calendar.

eventRender: function(event, element) {
    //find calendar row of the element
}

Upvotes: 0

Views: 1819

Answers (1)

Ryley
Ryley

Reputation: 21226

What happens if the event is wrapped over two columns? (i.e. because it is 10 days long)

I'm looking at the source for FullCalendar, and I don't think you're going to find what you want - the element is an absolutely positioned div, and eventRender is called for each "segment" of the event, so if it wraps, you end up with two eventRender calls.

Anyways, if those "gotchas" don't dissuade you, here's a crack at figuring it out. I used the row widths/heights vs the element top to figure it out, I don't really see a more elegant way. Note you'll want to change the .fc-view-month bit to a selector that starts from your actual calendar ID.

eventAfterRender: function(event,element){
    var level = undefined;
    var elTop = $(element).position().top;
    $('.fc-view-month tr[class^="fc-week"]').each(function(){
       var rowTop = $(this).position().top;
       var height = $(this).height();
       if (elTop >= rowTop && elTop < rowTop + height){
           level = $(this).attr('class').replace('fc-week','');
           return false;
       }
    });
    alert(level);
}

That will alert you with the "row" as defined by the calendar, i.e. the first row is actually "0"

EDIT: just realized that eventRender is called before the element is placed on the calendar, so my idea pretty much won't work. I've changed it to eventAfterRender. I think if it was important enough to you, the thing to do would be to modify FullCalendar so that whenever it sends you the "element" in the eventRender function, it also sends you the placement info (which it has in a structure called segs in the calling function).

Upvotes: 2

Related Questions