New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Styles

October 2025
October 2025
 SMTWTFS
402829301234
41567891011
4212131415161718
4319202122232425
442627282930311
452345678
If you applied some of the predefined skins for the ASP.NET AJAX Calendar (for example the Default skin), you can easily model its look and feel by the following style properties:
  • CalendarTableStyle
  • DayOverStyle
  • DayStyle
  • DisabledDayStyle
  • OtherMonthDayStyle
  • OutOfRangeDayStyle
  • SelectedDayStyle
  • HeaderStyle
  • TitleStyle
  • WeekendDayStyle
  • FastNavigationStyle
Since the Q1 2013 SP1 version of RadCalendar the hovered style(.rcHover) will be appended to the selected style. Thus both styles will be applied when hovering over an element.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page AutoEventWireup="false" Inherits="Telerik.Web.Examples.Calendar.Design.Styles.DefaultCS"Language="c#" CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="Stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-narrow no-bg" runat="server" id="containerDiv">
        <telerik:RadCalendar RenderMode="Lightweight" ID="RadCalendar1" runat="server" BorderWidth="0" BackColor="#f4f4da" EnableKeyboardNavigation="true"
            EnableMultiSelect="false" Skin="Metro">
            <WeekendDayStyle BorderColor="#f4f4da"></WeekendDayStyle>
            <SelectedDayStyle BackColor="#86b35f" ForeColor="#ffffff" CssClass="SelectedClass"></SelectedDayStyle>
            <DayOverStyle BackColor="#7a4f0b" ForeColor="#ffffff" CssClass="HoverClass"></DayOverStyle>
            <HeaderStyle ForeColor="#ffffff" BorderColor="#ffffff" BackColor="#86b35f" CssClass="HeaderClass"></HeaderStyle>
            <DayStyle BorderColor="#f4f4da"></DayStyle>
            <OtherMonthDayStyle ForeColor="#787777" BorderColor="#f4f4da"></OtherMonthDayStyle>
            <TitleStyle BackColor="#3b2707"></TitleStyle>
            <FastNavigationStyle BorderWidth="1px" BorderColor="#b3a588" BackColor="#f4f4da"></FastNavigationStyle>
        </telerik:RadCalendar>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance