Jonathan Ruckert
Top achievements
Rank 1
Rank 1
Jonathan Ruckert
asked on 15 May 2009, 01:13 AM
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
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
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-color: red;
}
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
4 Answers, 1 is accepted
0
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:
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.
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.
0
Jonathan Ruckert
Top achievements
Rank 1
Rank 1
answered on 17 May 2009, 11:26 PM
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
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
0
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.
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.
0
Patricia Ligon
Top achievements
Rank 1
Rank 1
answered on 08 Jan 2013, 04:03 PM
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:
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>