Calendar - Styles

September, 2016
September, 2016
 SMTWTFS
3628293031123
3745678910
3811121314151617
3918192021222324
402526272829301
412345678
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB
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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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>

Find Assistance

Help Us Improve

Was this example helpful?