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

Styles

April 2024
April 2024
 SMTWTFS
1431123456
1578910111213
1614151617181920
1721222324252627
182829301234
19567891011
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.
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page AutoEventWireup="false" Inherits="Telerik.Web.Examples.Calendar.Design.Styles.DefaultVB"Language="vb" CodeFile="DefaultVB.aspx.vb"  %>

<%@ 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