Fullcalendar (v2.x) Getting day-cell from an eventClick?

Question

I'm struggling to retrieve the day clicked when clicking on a multi-days (period) event (eventClick).

Whe clicking on the background cell, it's easy :

function dayClick(date, jsEvent, view) {         

   //todo: store related day
   $scope.selectedDay = date;
}

But when clicking on an event (which is on a period of days), I can't retrieve which day exactly the user was on. (I need to perform a different action depending on the background day) :

function alertEventOnClick(event, jsEvent, view) {

            // "event" stores only start and end date without any reference to the current day
            // "jsEvent" retrieve the "td" element but fullcalendar HTML structure is complex and it's impossible to go-up to find the day-cell
            // $scope.selectedDay = ??
        };

I tried playing with "selectable" but "eventClick" JS Event doesn't propagate, and doesn't "select" the day

Thanks

So, if it's a 3 day event and the user clicked in the middle of the event, you want the second day (the day underneath the cursor)? — DanielST, Jan 23 '15 at 17:16
you will likely have to do some heavy customization of the event display (i.e. through eventRender) or play with the jsEvent which has cursor coordinates. — warath-coder, Jan 24 '15 at 00:06
@slicedtoad yes I want the second day. Another solution would be to completely disable the eventClick (to propagate only dayClick event on background), but I don't know if it's doable.. ? Thanks — Jscti, Jan 26 '15 at 08:30

score 3 · Accepted Answer · edited May 23 '17 at 12:09

If you don't need to catch event clicks at all, you can just add a class to all events with pointer-events: none;

JSFiddle Demo

eventRender: function (event, element) {
    $(element).addClass('clickThrough');
},

IE8

Bleh. There is a hacky method to simulate pointer-events: none; on IE8 but while trying to implement it I found a simpler way to achieve the goal. (The simulated pointer-events hack is described here.)

To get the date at the cursor:

Hide the event table
Get element under cursor
Show the event table

JSFiddle Demo

eventClick: function (calEvent, jsEvent, view) {
    var topLayer = $(jsEvent.currentTarget).closest("tbody");
    topLayer.hide(); //hide the entire event layer (makes it work with multiple events)
    var dayElement = document.elementFromPoint(jsEvent.pageX, jsEvent.pageY); //get the element under the cursor (should be a day cell)
    topLayer.show();
    alert($(dayElement).data("date"));
}

Better IE8 workaround

(this doesn't seem to work)

So it turns out that anchor tags have a better pointer-events: none; workaround. https://stackoverflow.com/a/18118092/728393

You simply add the attribute disabled="disabled" to the <a> and it can be clicked through.

JSFiddle Demo

eventRender: function (event, element) {
    $(element).addClass('clickThrough').attr("disabled","disabled"); //disabled attribute is a IE workaround for pointer-events
},

That is totally what I needed... Great thanks, I didn't know of this magic css property. Bonus : do you have an equivalent for IE8 ? — Jscti, Jan 26 '15 at 14:54
@Cétia There is a workaround for IE8 but part way through implementing it, I already had the element that was needed, so I used that. — DanielST, Jan 26 '15 at 15:24
This works in browser, but i tried in my cordova application, it does not trigger day click , any workaround for mobile ? — rashidnk, Dec 16 '15 at 07:47

Jscti · Answer 2 · 2015-01-26T14:55:46.370

So I finally found a quick(&dirty ?) solution relying on parsing close DOM Table elements.

From eventClick js event, I can retrieve the currentTarget clicked and go back in the table headers : the first row contains thead headers definition containing cell date mapping.

$scope.alertEventOnClick = function(event, jsEvent, view) {

    var columnIndex = $(jsEvent.currentTarget).parent('td').get(0).cellIndex + 1;
    var parentTable = $(jsEvent.currentTarget).closest('table');
    var dateString = $('thead td:nth-child('+ columnIndex +')', parentTable).attr('data-date');

    $scope.selectedDay = moment(dateString);
};

edit: solution OK for 1 event by day. but KO for more than one event by day ...

Another solution can be to determine x/y position of the clicked cell (by counting div/td childs) and map it with view.coordMap.grid.cellDates[position]

This is likely the best way _if_ you need to differentiate between day clicks and event clicks. I'll post an answer for only day clicks mattering. — DanielST, Jan 26 '15 at 14:19
I'll abandon this solution as it works with 1 event, but breaks with more than on (HTML events structure of fullcalendar is pretty complicated ....) — Jscti, Jan 26 '15 at 14:55

score 0 · Answer 3 · answered Jan 15 '17 at 14:34

0

Here is my solution:

eventClick: function(event, jsEvent, view) {
    var day=$(this).closest('.'+(view.type=='month'?'fc-row':'fc-time-grid')).find('.fc-bg td:eq('+$(this).closest('td').index()+')').data('date');
    console.log(day);
}

answered Jan 15 '17 at 14:34

jmm

1

score 0 · Answer 4 · answered Aug 24 '19 at 19:15

Here is slicedtoad's solution modified to work with v4 of fullcalendar and also taking into account the window's current scroll position:

     eventClick: function(ev) {
        var topLayer = $(ev.el).closest(".fc-row");
        var eventLayer = topLayer.find(".fc-content-skeleton");
        eventLayer.hide();
        var dayElement = $(document.elementFromPoint(ev.jsEvent.pageX - window.pageXOffset, ev.jsEvent.pageY - window.pageYOffset));
        eventLayer.show();
        var current_day = dayElement.attr("data-date");
        console.log(current_day);
     }

score 0 · Answer 5 · answered Jan 31 '20 at 19:35

I updated Dane Iracleous's solution slightly to make it work with 1. click on multi-day events when there is more than one on the same day. and 2. this works in month/week/day views.

Using visibility/z-index solved my issue of the 'all day' container shrinking temporarily when the event layer was hidden.

getClickedDate(event) {
   //used to get specific date clicked on multiple day event
   let topLayer = $(event.el).closest(".fc-row");
   let eventLayer = topLayer.find(".fc-content-skeleton");
   let initialZIndex = $(eventLayer).css('z-index')

   $(eventLayer).css({ 'visibility': 'hidden', 'z-index': '-1'});

   let dayElement = $(document.elementFromPoint(event.jsEvent.pageX - window.pageXOffset, event.jsEvent.pageY - window.pageYOffset));

   $(eventLayer).css({ 'visibility': 'visible', 'z-index': initialZIndex });

   let clickedDate = dayElement.attr("data-date");
   console.log('clicked date', clickedDate)
   return clickedDate;
}

Fullcalendar (v2.x) Getting day-cell from an eventClick?

5 Answers5

IE8

Better IE8 workaround