Disable Hover CSS Class

5 posts, 0 answers
  1. Jonathan Ruckert
    Jonathan Ruckert avatar
    11 posts
    Member since:
    May 2005

    Posted 14 May 2009 Link to this post

    Hi,

     We are trying to disable the Hover CSS on the calendar. The problem is that we have multiple special days configured with a custom background class

    In the C# Code on the Page_Load event

    RadCalendarDay

     

    testCal = new RadCalendarDay();

     

    testCal.Date =

    DateTime.Now;

     

    testCal.Repeatable =

    RecurringEvents.None;

     

    testCal.ToolTip =

    "SpecialDay1";

     

    testCal.ItemStyle.CssClass =

    "SpecialDay1";

    CSS Definition

    .SpecialDay1

    {

     

    background-colorred;

     

    }


    However when we hover over it uses the .rcHover class which we don't want applied.

    We have tried creating a new Skin using the tutorial and removed the .RadCalendar_SpecialTest .rcRow .rcHover class without any avail. We have been able to override the .rcSelected class which works fine, however its just the .rcHover class which we have the problem with.

    Can someone please help?

    Cheers,
    Jonathan

  2. Dimo
    Admin
    Dimo avatar
    7189 posts
    Member since:
    Sep 2012

    Posted 15 May 2009 Link to this post

    Hello Jonathan,

    The RadCalendar hover behavior cannot be disabled with standard means (server properties or client API). You can only set a HoverStyle-CssClass for all days.

    There is a way to achieve what you want, but you will need to override the control's code. Here is an example:

    <%@ Page Language="C#" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml"
    <head runat="server"
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <title>RadControls for ASP.NET AJAX</title> 
    <style type="text/css"
     
    .MyClass 
        background:yellow; 
     
    </style> 
    </head> 
    <body> 
    <form id="form1" runat="server"
    <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
     
    <p>Hover Styles Disabled:</p> 
     
    <telerik:RadCalendar ID="RadCalendar1" runat="server"
        <SpecialDays> 
            <telerik:RadCalendarDay Date="2009/05/15" Repeatable="None" ItemStyle-CssClass="MyClass" /> 
        </SpecialDays> 
    </telerik:RadCalendar> 
     
    <p>Hover Styles Enabled:</p> 
     
    <telerik:RadCalendar ID="RadCalendar2" runat="server"
        <SpecialDays> 
            <telerik:RadCalendarDay Date="2009/05/15" Repeatable="None" ItemStyle-CssClass="MyClass" /> 
        </SpecialDays> 
    </telerik:RadCalendar> 
     
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"
    <script type="text/javascript"
     
    Telerik.Web.UI.Calendar.RenderDay.prototype.MouseOver = function() 
        if (!this.ApplyHoverBehavior()) 
            return; 
     
        // custom logic start    
        if (this.RadCalendar.get_id() == "<%= RadCalendar1.ClientID %>") 
            return; 
        // custom logic end 
     
        var dayOverStyle = this.RadCalendar.get_stylesHash()["DayOverStyle"]; 
        this.DomElement.className = dayOverStyle[1]; 
        this.DomElement.style.cssText = dayOverStyle[0];     
     
    Telerik.Web.UI.Calendar.RenderDay.prototype.MouseOut = function() 
        if (!this.ApplyHoverBehavior()) 
            return; 
     
        // custom logic start 
        if (this.RadCalendar.get_id() == "<%= RadCalendar1.ClientID %>") 
            return; 
        // custom logic end 
         
        var defaultStyle = this.GetDefaultItemStyle(); 
        this.DomElement.className = defaultStyle[1]; 
        this.DomElement.style.cssText = defaultStyle[0]; 
     
    </script> 
    </telerik:RadCodeBlock> 
     
    </form> 
    </body> 
    </html> 


    Greetings,
    Dimo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.

  3. Jonathan Ruckert
    Jonathan Ruckert avatar
    11 posts
    Member since:
    May 2005

    Posted 17 May 2009 Link to this post

    Nearlly there,

     When the date is selected (using the AutoPostBack="true" OnSelectionChanged="calendar_SelectionChanged"), the CSS Class gets removed also.

    Is there another function that we can override so the CSS class persits on the click event?

    Cheers,
    Jonathan

  4. Dimo
    Admin
    Dimo avatar
    7189 posts
    Member since:
    Sep 2012

    Posted 19 May 2009 Link to this post

    Hi Jonathan,

    If you want to customize the styles of the date cells, regardless of their state (normal, hovered, selected), you don't need custom CSS classes at all. Simply use the following CSS selector:

    .RadCalendar_SkinName  .rcMain  .rcMainTable .rcRow  td
    {
          border: .....;
          background: .....;
          /*      ......      */
    }

    If you want to apply the custom styles to specific RadCalendar instances only, you can use a custom CSS class for the Calendar control itself:

    <telerik:RadCalendar  CssClass="MyRadCalendarClass" />


    .MyRadCalendarClass  .rcMain  .rcMainTable .rcRow  td
    {
          border: .....;
          background: .....;
          /*      ......      */
    }



    Regards,
    Dimo
    the Telerik team


    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.

  5. Patricia Ligon
    Patricia Ligon avatar
    1 posts
    Member since:
    Jun 2010

    Posted 08 Jan 2013 Link to this post

    Also,

    This worked for me:
    http://www.telerik.com/community/forums/aspnet-ajax/general-discussions/radcalendar-hover-issue.aspx#2071421

    Added this at the bottom of the page:

    <script>
        Telerik.Web.UI.Calendar.RenderDay.prototype.ApplyHoverBehavior = function () { return false; };
    </script>

Back to Top