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

Styles

December 2024
December 2024
 SMTWTFS
4824252627282930
491234567
50891011121314
5115161718192021
5222232425262728
532930311234
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