CODEWITHSUNDEEP
jqueryhtmlruby-on-railsfullcalendar
Snubber
Snubber

Reputation: 1024

How do I use the 'eventMouseout' callback in FullCalendar?

I'm trying to make it so that when you put your mouse over an event in my calendar it changes color. I can do that and it works, but the events are different colors and I only know how to make the events turn back to one color, not more than one. So, even though I have red, blue, and green events they only turn red after you put your mouse over them. I only want the events with the id "rto" to turn red, so how would I accomplish that?

<script type='text/javascript'>

$(document).ready(function() {

     var cal = $('#calendar')

   cal.fullCalendar({
    eventSources: [

        {
            url: "...",
            borderColor: 'green',
            id: "events",
        },
        {
            url: "...",
            borderColor: 'red',
            id: "rto",
        },
        {
            url: "...",
            borderColor: 'blue',
            id: "goals",
        },
                    ],

eventMouseover: function(){

            $(this).css('border-color', 'orange');

        },
eventMouseout: function() { 

            $(this).css('border-color', 'red');

        }
    }); 
});

This is how you use the function: function( event, jsEvent, view ) { }

Upvotes: 2

Views: 703

Answers (1)

Hari
Hari

Reputation: 4612

Instead of setting the style directly I suggest to add a css class in the eventMouseover callback and remove it in the eventMouseout handler.

Javascript:

eventMouseover: function (event, jsEvent, view) {
    jQuery(this).addClass("current_entry");
},
eventMouseout: function (event, jsEvent, view) {
    jQuery(this).removeClass("current_entry");
},

CSS:

#calendar .current_entry
{
    border-color: #ff0000;
    border-width: 4px;
    z-index: 100 !important;
}

Where "calendar" is the id of your calendar container element

Upvotes: 2

Related Questions