1. ehsan sadeghi
    ehsan sadeghi avatar
    11 posts
    Member since:
    May 2005

    Posted 19 May 2012 Link to this post

    Is possible to change Calendar behaviour when client change month? I want to show some special month instead of sequential monthes.
  2. Richard
    Richard avatar
    479 posts
    Member since:
    Nov 2011

    Posted 22 May 2012 Link to this post


    You can hide/disable the built-in Navigation Buttons of the RadCalendar by property settings or CSS. See the Navigation Controls Settings documentation page for insights on this.

    Also, the above documentation page provides details on the Month/Date Picker Popup which can be enabled when user clicks on the Title Area of the Title Bar, and this can be used to fast navigate to a specific month.

    Alternatively, you can disable navigation buttons by setting the RadCalendar "EnableNavigation="false" and then implement external, associated RadButtons. You can handle calender navigation using JavaScript, setting the RadCalendar to postback and reset the month view.

    Here's a somewhat similar application for you to use as a starting point:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
                <%--Needed for JavaScript IntelliSense in VS2010--%>
                <%--For VS2008 replace RadScriptManager with ScriptManager--%>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function NavigatePrevYear() {
                var calendar = $find("<%=RadCalendar1.ClientID%>");
                var triplet = [calendar.FocusedDate[0] - 1, calendar.FocusedDate[1], calendar.FocusedDate[2]];
            function NavigatePrevMonth() {
                var calendar = $find("<%=RadCalendar1.ClientID%>");
                var triplet = [calendar.FocusedDate[0], calendar.FocusedDate[1] - 1, calendar.FocusedDate[2]];
             function NavigateNextMonth() {
                 var calendar = $find("<%=RadCalendar1.ClientID%>");
                 var triplet = [calendar.FocusedDate[0], calendar.FocusedDate[1] + 1, calendar.FocusedDate[2]];
             function NavigateNextYear() {
                 var calendar = $find("<%=RadCalendar1.ClientID%>");
                 var triplet = [calendar.FocusedDate[0] + 1, calendar.FocusedDate[1], calendar.FocusedDate[2]];
             function ViewChanged(sender, eventArgs) {
                 var step = eventArgs.get_step();
                 var msg = "The calendar moved ";
                 if (step < 0) {
                     msg = msg + "back ";
                     step = -step;
                     msg = msg + "forward "
                     msg = msg + step + " views.";
                        <telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="false" Text="<<" OnClientClicked="NavigatePrevYear" >
                        <telerik:RadButton ID="RadButton2" runat="server" AutoPostBack="false" OnClientClicked="NavigatePrevMonth" Text="<"  >
                        <telerik:RadButton ID="RadButton3" runat="server" AutoPostBack="false" OnClientClicked="NavigateNextMonth" Text=">" >
                        <telerik:RadButton ID="RadButton4" runat="server" AutoPostBack="false" Text=">>" OnClientClicked="NavigateNextYear" >
                    <telerik:RadCalendar ID="RadCalendar1" runat="server" AutoPostBack="true" ShowRowHeaders="false" FocusedDate="5/1/2012 12:00:00 AM" EnableNavigation="false" >
                         <ClientEvents OnCalendarViewChanged="ViewChanged" />
                            <telerik:RadCalendarDay Repeatable="Today" Date="" ItemStyle-CssClass="rcToday">
                                <ItemStyle CssClass="rcToday"></ItemStyle>
    There is no code behind required.

    See this in action at http://screencast.com/t/FmLWWjEE24N

    Hope this helps!
Back to Top