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

Styles

November 2024
November 2024
 SMTWTFS
44272829303112
453456789
4610111213141516
4717181920212223
4824252627282930
491234567
If you applied some of the predefined skins for the RadCalendar (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