We just shipped Q1’15. Sign up for the Release Webinar to see the new bits in action.

Calendar - DayRender Event

Server Mode Calendar

Calendar
Title and navigation
Title and navigation
<<<February 2015><<
February 2015
 SMTWTFS
525262728293031
6Test234567
7891011121314
815161718192021
922232425262728
101234567

Client Mode Calendar

Calendar
Title and navigation
Title and navigation
<<<February 2015><<
February 2015
 SMTWTFS
525262728293031
61234567
7891011121314
815161718192021
922232425262728
101234567

Demo Configurator

  • Selected date:1
    Selected day color:Orange
  • Apply on server
  • Apply on client
Isolate this demo as a stand-alone application

The example demonstrates how to customize a day in the calendar - its background color and text content using the client- and server-side DayRender event.

The server-side DayRender event is fired after the generation of every calendar cell object and just before it gets rendered to the client. It is the last place where changes to the already constructed calendar cells can be made.

The client-side DayRender event is fired for every calendar day cell when the calendar is rendered as a result of client-side navigation. This event can be used to apply final changes to the output (content and visual styles) just before the content is displayed.

The demo illustrates how to utilize the DayRender server and client events of RadCalendar to customize the appearance of the rendered date. Note that in order to apply changes purely client-side attaching the DayRender client event, you need to navigate to a different month and thus force the calendar to re-render itself.
<%@ Page CodeFile="DefaultCS.aspx.cs" Language="c#" Inherits="Telerik.Web.Examples.Calendar.Programming.DayRenderEvent.DefaultCS" %>


<%@ 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>
    <script src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
       <script type="text/javascript">
           function pageLoad() {
               demo.initialize($get("<%= DatesList.ClientID %>"), $get("<%= ColorList.ClientID %>"), $get("<%= DayString.ClientID %>"));

            }
        </script>
    </telerik:RadCodeBlock>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadCalendar1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadCalendar1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadCalendar1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>
    <div id="Div1" class="demo-containers" runat="server">
        <div class="demo-container" runat="server" id="Div2">
            <div class="demo-container no-bg" style="max-width: 350px; padding-right: 20px">
                 <h3>Server Mode Calendar</h3>
                <telerik:RadCalendar ID="RadCalendar1" runat="server" TitleFormat="MMMM yyyy" AutoPostBack="true"
                    OnDayRender="CustomizeDay">
                </telerik:RadCalendar>
            </div>
            <div class="demo-container no-bg" style="max-width: 350px; padding-right: 20px">
                <h3>Client Mode Calendar</h3>
                
                <telerik:RadCalendar ID="RadCalendar2" runat="server" TitleFormat="MMMM yyyy" AutoPostBack="false">
                    <ClientEvents OnDayRender="demo.OnDayRender"></ClientEvents>
                </telerik:RadCalendar>   
            </div>
        </div>
    </div>

    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server"
        Expanded="true">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server">
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList ID="DatesList" Label="Selected date:" runat="server" Size="Medium">
                                <Items>
                                    <telerik:DropDownListItem Value="1" Text="1"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="2" Text="2"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="3" Text="3"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="4" Text="4"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="5" Text="5"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="6" Text="6"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="7" Text="7"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="8" Text="8"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="9" Text="9"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="10" Text="10"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="11" Text="11"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="12" Text="12"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="13" Text="13"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="14" Text="14"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="15" Text="15"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="16" Text="16"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="17" Text="17"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="18" Text="18"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="19" Text="19"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="20" Text="20"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="21" Text="21"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="22" Text="22"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="23" Text="23"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="24" Text="24"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="25" Text="25"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="26" Text="26"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="27" Text="27"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="28" Text="28"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="29" Text="29"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="30" Text="30"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="31" Text="31"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                             <qsf:DropDownList ID="ColorList" runat="server" Label=" Selected day color:" Size="Medium">
                                <Items>
                                    <telerik:DropDownListItem Value="White" Text="White"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="Yellow" Text="Yellow"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="Orange" Selected="True" Text="Orange"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="Pink" Text="Pink"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="Magenta" Text="Magenta"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="Red" Text="Red"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="Purple" Text="Purple"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="Blue" Text="Blue"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="Cyan" Text="Cyan"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="Green" Text="Green"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="Grey" Text="Grey"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="Brown" Text="Brown"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:TextBox ID="DayString" Label="Selected day text:" runat="server" Size="Auto" Text="Test"></qsf:TextBox>
                        </li>
                        <li>
                            <qsf:Button runat="server" ID="Button1"
                                Text="Apply on server">
                            </qsf:Button>
                        </li>
                         <li>
                            <qsf:Button ID="button2" runat="server" Text="Apply on client" OnClientClicked="demo.navigateCalendar" AutoPostBack="false">
                            </qsf:Button>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?