Calendar

Controls

SharePoint Web Parts

Editor
Grid
ListView
Scheduler

Support Resources

Integration Examples

Q2 2013 released 06/11/2013
next demo
view source rate / review silk skin
get trial buy now
All Controls

Calendar

Rate this demo

Thank you for your post!
See also: Skin Exchange Portal Visual Style Builder

Calendar - DayRender Event

Calendar
Title and navigation
<<<June 2013>>>
June 2013
 SMTWTFS
22262728293031Test
232345678
249101112131415
2516171819202122
2623242526272829
2730123456

Server Mode Calendar
Calendar
Title and navigation
<<<June 2013>>>
June 2013
 SMTWTFS
222627282930311
232345678
249101112131415
2516171819202122
2623242526272829
2730123456

Client Mode Calendar 		Selected date:


Selected day color:


Selected day text:

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.

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.

C# VB
Show code in new window Demo isolation steps 
<%@ 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>
    <title>ASP.NET Calendar Demo - DayRender Event</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
                       //<![CDATA[
            function OnDayRender(calendarInstance, args)
            {
                var date = new Date(args.get_date()[0], args.get_date()[1] - 1, args.get_date()[2]);
                var selectedDay = document.getElementById("<%= DatesList.ClientID %>").value;
                var selectedDayColor = document.getElementById("<%= ColorList.ClientID %>").value;
                var selectedDayText = document.getElementById("<%= DayString.ClientID %>").value;
                if ((date.getDate() == selectedDay) && (date.getMonth() == (calendarInstance.get_focusedDate()[1] - 1)))
                {
                    args.get_cell().innerHTML = selectedDayText;
                    args.get_cell().style.backgroundColor = selectedDayColor;
                }
            }

            function navigateCalendar()
            {
                var calendar = $find("<%= RadCalendar2.ClientID %>");
                //In order to fire the client-side OnDayRender event, the calendar should be navigated to a view different that the current one.
                var nextMonthDay = [calendar.get_focusedDate()[0], calendar.get_focusedDate()[1] + 1, calendar.get_focusedDate()[2]];
                calendar.navigateToDate(nextMonthDay);
            }
                      //]]>
        </script>
    </telerik:RadCodeBlock>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Button1">
                <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>
    <table id="table" cellspacing="0" cellpadding="0" width="90%" style="margin: auto"
        border="0">
        <tr>
            <td style="width: 30%; vertical-align: top; padding-right: 5px">
                <telerik:RadCalendar ID="RadCalendar1" runat="server" TitleFormat="MMMM yyyy" AutoPostBack="true"
                    OnDayRender="CustomizeDay">
                </telerik:RadCalendar>
                <br />
                <asp:Label ID="ServerCalendarLabel" runat="server" Style="margin-bottom: 2px;">Server Mode Calendar</asp:Label>
            </td>
            <td style="width: 30%; vertical-align: top; padding-right: 15px">
                <telerik:RadCalendar ID="RadCalendar2" runat="server" TitleFormat="MMMM yyyy" AutoPostBack="false">
                    <ClientEvents OnDayRender="OnDayRender"></ClientEvents>
                </telerik:RadCalendar>
                <br />
                <asp:Label ID="ClientCalendarMode" runat="server" Style="margin-bottom: 2px;">Client Mode Calendar</asp:Label>
            </td>
            <td style="vertical-align: top" class="module">
                Selected date:<br />
                <label for="DatesList">
                </label>
                <asp:DropDownList ID="DatesList" runat="server" Width="200px">
                    <asp:ListItem Value="1">1</asp:ListItem>
                    <asp:ListItem Value="2">2</asp:ListItem>
                    <asp:ListItem Value="3">3</asp:ListItem>
                    <asp:ListItem Value="4">4</asp:ListItem>
                    <asp:ListItem Value="5">5</asp:ListItem>
                    <asp:ListItem Value="6">6</asp:ListItem>
                    <asp:ListItem Value="7">7</asp:ListItem>
                    <asp:ListItem Value="8">8</asp:ListItem>
                    <asp:ListItem Value="9">9</asp:ListItem>
                    <asp:ListItem Value="10">10</asp:ListItem>
                    <asp:ListItem Value="11">11</asp:ListItem>
                    <asp:ListItem Value="12">12</asp:ListItem>
                    <asp:ListItem Value="13">13</asp:ListItem>
                    <asp:ListItem Value="14">14</asp:ListItem>
                    <asp:ListItem Value="15">15</asp:ListItem>
                    <asp:ListItem Value="16">16</asp:ListItem>
                    <asp:ListItem Value="17">17</asp:ListItem>
                    <asp:ListItem Value="18">18</asp:ListItem>
                    <asp:ListItem Value="19">19</asp:ListItem>
                    <asp:ListItem Value="20">20</asp:ListItem>
                    <asp:ListItem Value="21">21</asp:ListItem>
                    <asp:ListItem Value="22">22</asp:ListItem>
                    <asp:ListItem Value="23">23</asp:ListItem>
                    <asp:ListItem Value="24">24</asp:ListItem>
                    <asp:ListItem Value="25">25</asp:ListItem>
                    <asp:ListItem Value="26">26</asp:ListItem>
                    <asp:ListItem Value="27">27</asp:ListItem>
                    <asp:ListItem Value="28">28</asp:ListItem>
                    <asp:ListItem Value="29">29</asp:ListItem>
                    <asp:ListItem Value="30">30</asp:ListItem>
                    <asp:ListItem Value="31">31</asp:ListItem>
                </asp:DropDownList>
                <br />
                <br />
                Selected day color:<br />
                <label for="ColorList">
                </label>
                <asp:DropDownList ID="ColorList" runat="server" Width="200px">
                    <asp:ListItem Value="White">White</asp:ListItem>
                    <asp:ListItem Value="Yellow">Yellow</asp:ListItem>
                    <asp:ListItem Value="Orange" Selected="True">Orange</asp:ListItem>
                    <asp:ListItem Value="Pink">Pink</asp:ListItem>
                    <asp:ListItem Value="Magenta">Magenta</asp:ListItem>
                    <asp:ListItem Value="Red">Red</asp:ListItem>
                    <asp:ListItem Value="Purple">Purple</asp:ListItem>
                    <asp:ListItem Value="Blue">Blue</asp:ListItem>
                    <asp:ListItem Value="Cyan">Cyan</asp:ListItem>
                    <asp:ListItem Value="Green">Green</asp:ListItem>
                    <asp:ListItem Value="Grey">Grey</asp:ListItem>
                    <asp:ListItem Value="Brown">Brown</asp:ListItem>
                </asp:DropDownList>
                <br />
                <br />
                Selected day text:<br />
                <label for="DayString">
                </label>
                <asp:TextBox ID="DayString" runat="server" Width="200px">Test</asp:TextBox><br />
                <br />
                <table>
                    <tr>
                        <td>
                            <asp:Button runat="server" ID="Button1"
                                Text="Apply on server"></asp:Button>
                        </td>
                        <td>
                            <button id="button2" onclick="navigateCalendar(); return false;">
                                Apply on client</button>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <br />
    </form>
</body>
</html>

Get Started Easily Explore our help resources to get up to speed with the RadControls faster.

See Pricing Check out the offers. Purchase an individual suite or treat yourself to one of our bundles.

Copyright 2002-2013 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451