Special Days + Hover

[Chris]

Hey,

I'm running into some problems with the Calendar.  It's related to applying my own CSS to special days.  I basically populate the Calendar with holidays.  They are given a special css class that just has a different background colour.  I'm also using one of the predefined Skins.

On my page, I pre-select the date for the user.  If the date I'm pre-selecting is also a special day I'm running into some odd CSS issues.  It starts with the selected CSS.  If I hover over that date, it uses the Hover CSS which is correct.    But when I move my mouse off of that date it switches back to the special day CSS instead of the selected CSS.  Is there any way I can get it to keep the selected CSS when I move off of that date.

[jaclimer]

Hey Chris,

I ran into the same issue.  The javascript functions in the following link worked for me (I just copied and pasted them into my page):

http://www.telerik.com/community/forums/aspnet-ajax/calendar/disable-hover-css-class.aspx

Now I'm trying to figure out how to disable the selectedDate style.

-James

[Paul]

I ran into the same issue.  Using the disable hover CSS class posting, I was able to create the below JavaScript to fix the special day hover losing selection issue.  It appears when you programmatically set the calendar selection in the ASPX page or the code behind, the “IsSelected” properly was not being properly set.

Telerik.Web.UI.Calendar.RenderDay.prototype.MouseOut = function()
{
    // It appears the IsSelected property is not being filling in properly
    // if the selection is programmatically set in the ASPX page or code behind.
    var isSelected = this.get_isSelected();
    // If the date is not currently selected, check the date against the calendar's selected dates.
    if (!isSelected)
    {
        var selectedDates = this.RadCalendar.get_selectedDates();
        var length = selectedDates.length;
        var currentDate = this.get_date();
        var selectedDate;
        for (var i = 0; i < length; i++)
        {
            selectedDate = selectedDates[i];
            if (currentDate[0] == selectedDate[0] && currentDate[1] == selectedDate[1] && currentDate[2] == selectedDate[2])
            {
                // If the date is in the calendar's selected dates.
                // Select the date and continue normal processing.
                this.IsSelected = true;
                break;
            }
        }
    }
    var defaultStyle = this.GetDefaultItemStyle();
    this.DomElement.className = defaultStyle[1];
    this.DomElement.style.cssText = defaultStyle[0];
}