highlight event that spans weekend on mouseover

I have set up my fullcalendar to display a mixture of 1 day events (shown in one color) and week-long events(shown in diff color). I wanted to improve the visibility of events as it can get confusing with lots of overlapping events, so i set it up so that an event is highlighted with yellow border on mouseover.

This all works ok, except when i have an event that spans over a weekend - ie. starts on wednesday, ends on following wedn开发者_如何学Goesday - on mouseover the event is only highlighted for the current week - the portion of the event that falls after the weekend, is not highlighted,

any help would be greatly appreciated !

Ok, I got this working.

fullcalendar.js generates a unique id for each event -> event._id (_fc1, _fc2...etc)

Each event is represented by an anchor tag (). An event that spans over a weekend is represented by 2 anchor tags. The unique id for each event is not outputted in the html by fullcalendar.js so it is impossible to see which anchors are associated with which events.

I made a small change to fullcalendar.js which adds the unique id of each event to the anchor being generated (as an additional css class name)

This means that all anchor tags associated with an event can be selected in the mouseover event using the JQuery class selector.

 eventMouseover: function (event, jsEvent, view) {            
        $("." + event._id).each(function (index) {
            $(this).css('border-color', 'yellow');
        });
    },

works for me !

There could be a better way, but I found a way that does not touch the source:

1. Add a unique css class for each event.
2. When rendering, even if the event stretches across weekends, the class is applied to all segments.
3. When user clicks an event:

$("." + calEvent.className).addClass('red');

Side note: When you drag an event, the other segments, belonging to the same event, are hidden, so fullCalendar is aware of the other segments, but I have not found a way to access them through the API.