Special Days + Hover

3 posts, 0 answers
  1. Chris
    Chris avatar
    43 posts
    Member since:
    Aug 2008

    Posted 28 May 2010 Link to this post

    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.
  3. jaclimer
    jaclimer avatar
    7 posts
    Member since:
    Aug 2007

    Posted 31 May 2010 Link to this post

    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



  5. Paul
    Paul avatar
    8 posts
    Member since:
    May 2008

    Posted 25 Jan 2011 Link to this post

    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];
    }
Back to Top