slot/day, triggers for mouse events

[arshaw]

Originally reported on Google Code with ID 2453

Someone had a similar request attached to another request (2248) and that person was
told to create a separate issue for the request.  I don't see that that person created
a separate issue so here is my issue.  Basically the same issue as the one requested
as a tack on to issue 2248.

I would like to be able to attach a mouseover event to an entire day cell.  Right now
the cells seem to be split into pieces (a day number, an event, the rest of the cell).
 You already have a dayClick hook in the code.  I'm looking for a dayMouseover so I
could poplulate a footer on my page whenever a the mouse enters a day cell.

Reported by fgualtieri@promia.com on 2015-03-03 11:58:26

Imported with 2 stars.

[arshaw]

Sounds good, thanks. I will keep this for the future so that it will be implemented
at some point.

Reported by adamrshaw on 2015-03-09 21:11:34

• Status changed: Accepted
• Labels added: Type-Feature

[arshaw]

I have some code in place to do this.

I can send it to you if you are interested.

Reported by fgualtieri@promia.com on 2015-03-09 22:58:42

[arshaw]

I'd like this too! Sorry for the doublepost on Github!

Reported by rclaes1995 on 2015-07-24 14:19:33

[arshaw]

rclaes1...@gmail.com   I have written code to do this because it didn't seem to be available
anyplace.   I should have access to the code and can attach it to this comment on monday.

Reported by fgualtieri@promia.com on 2015-07-25 00:44:11

[arshaw]

Use this code as a plugin to get the functionality you are looking for.

    (function($) {
        $.fn.getDayCell = function(mouseEvent) {
            var calendarId = $(this).attr('id');
            var days = $('#'+calendarId + ' .fc-day');
            for(var i = 0 ; i < days.length ; i++) {
                var day = $(days[i]);
                var mouseX = mouseEvent.pageX;
                var mouseY = mouseEvent.pageY;
                var offset = day.offset();
                var width  = day.width();
                var height = day.height();
                if (   mouseX >= offset.left && mouseX <= offset.left+width 
                    && mouseY >= offset.top  && mouseY <= offset.top+height )
                   return day;
               }
        }
    }(jQuery));

I've also attached a file with this code in it.

Reported by fgualtieri@promia.com on 2015-07-26 22:45:46

---

- _Attachment: [foof_fullcalendar_helper.js](https://storage.googleapis.com/google-code-attachments/fullcalendar/issue-2453/comment-5/foof_fullcalendar_helper.js)_

[grundic]

Vote for this feature 👍
There are some questions on SO:
http://stackoverflow.com/questions/22494628/fullcalendar-td-fc-day-mouseover-sometimes-get-wrong-date-on-small-month-ca
http://stackoverflow.com/questions/28864391/fullcalendar-2-3-0-change-day-colour-on-hover
http://stackoverflow.com/questions/7823112/fullcalendar-highlighting-a-day-based-on-event-selection

[arshaw]

this issue concerns itself with exposing bindable mouse events for when the user interacts with datetime points in a day or a cell. Should also expose API for querying base off of coordinate.

[tfastenauebh]

I desperately need a way to add a pointerdown event for an entire day cell, ignoring any highlights or other overlays. Either that or a way to retrieve the initial mousedown day from a selection info, so i'd be able to tell if the user began their selection on an already existing event (to remove the selection from an event, possibly splitting it in two separate events), or if the selection began on an empty day cell. Unfortunately, this info is lost, as the selection start and end date are already sorted when they are forwarded to the select callback.

[almasshaikh08]

$.fn.getDayCell = function(mouseEvent) {
var calendarId = $(this).attr('id');
var days = $('#'+calendarId + ' .fc-day');
for(var i = 0 ; i < days.length ; i++) {
var day = $(days[i]);
var mouseX = mouseEvent.pageX;
var mouseY = mouseEvent.pageY;
var offset = day.offset();
var width = day.width();
var height = day.height();
if ( mouseX >= offset.left && mouseX <= offset.left+width
&& mouseY >= offset.top && mouseY <= offset.top+height )
return day;
}
}

What can be done to use this in react? I want the same functionality as mentioned by fgualtieri@promia.com in React component of Fullcalendar.

[filippozanfini]

@almasshaikh08 same here. I want a solution to use MouseEnter/Leave events with React