This is a migrated thread and some comments may be shown as answers.
Special Days + Hover
2 Answers 57 Views
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Chris asked on 28 May 2010, 01:09 PM
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.

2 Answers, 1 is accepted

Sort by
0
jaclimer
Top achievements
Rank 1
answered on 31 May 2010, 02:41 PM
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



0
Paul
Top achievements
Rank 2
answered on 25 Jan 2011, 05:22 PM
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];
}
Asked by
Chris
Top achievements
Rank 1
Answers by
jaclimer
Top achievements
Rank 1
Paul
Top achievements
Rank 2
Share this question
or