This is a migrated thread and some comments may be shown as answers.

Calendar

1 Answer 21 Views
This is a migrated thread and some comments may be shown as answers.
ehsan sadeghi
Top achievements
Rank 1
ehsan sadeghi asked on 19 May 2012, 10:36 AM
Is possible to change Calendar behaviour when client change month? I want to show some special month instead of sequential monthes.

1 Answer, 1 is accepted

Sort by
0
Richard
Top achievements
Rank 1
answered on 22 May 2012, 09:43 PM
Ehsan,

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:

Default.aspx:
<%@ 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">
    <title></title>
    <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <%--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" />
        </Scripts>
    </telerik:RadScriptManager>
    <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]];
            calendar.navigateToDate(triplet);
 
        
 
        function NavigatePrevMonth() {
            var calendar = $find("<%=RadCalendar1.ClientID%>");
            var triplet = [calendar.FocusedDate[0], calendar.FocusedDate[1] - 1, calendar.FocusedDate[2]];
            calendar.navigateToDate(triplet);
 
        
 
         function NavigateNextMonth() {
             var calendar = $find("<%=RadCalendar1.ClientID%>");
             var triplet = [calendar.FocusedDate[0], calendar.FocusedDate[1] + 1, calendar.FocusedDate[2]];
             calendar.navigateToDate(triplet);
 
         }
 
         function NavigateNextYear() {
             var calendar = $find("<%=RadCalendar1.ClientID%>");
             var triplet = [calendar.FocusedDate[0] + 1, calendar.FocusedDate[1], calendar.FocusedDate[2]];
             calendar.navigateToDate(triplet);
 
         }
 
         function ViewChanged(sender, eventArgs) {
             var step = eventArgs.get_step();
             var msg = "The calendar moved ";
             if (step < 0) {
                 msg = msg + "back ";
                 step = -step;
             }
             else
                 msg = msg + "forward "
                 msg = msg + step + " views.";
                 alert(msg);
         }
    </script>
    </telerik:RadCodeBlock>
    <div>
        <table>
            <tr>
                <td>
                    <telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="false" Text="<<" OnClientClicked="NavigatePrevYear" >
                    </telerik:RadButton>                   
                    <telerik:RadButton ID="RadButton2" runat="server" AutoPostBack="false" OnClientClicked="NavigatePrevMonth" Text="<"  >
                    </telerik:RadButton>
                    <telerik:RadButton ID="RadButton3" runat="server" AutoPostBack="false" OnClientClicked="NavigateNextMonth" Text=">" >
                    </telerik:RadButton>                   
                    <telerik:RadButton ID="RadButton4" runat="server" AutoPostBack="false" Text=">>" OnClientClicked="NavigateNextYear" >
                    </telerik:RadButton>
                </td>
            </tr>
            <tr>
            <td>
                <telerik:RadCalendar ID="RadCalendar1" runat="server" AutoPostBack="true" ShowRowHeaders="false" FocusedDate="5/1/2012 12:00:00 AM" EnableNavigation="false" >
                     <ClientEvents OnCalendarViewChanged="ViewChanged" />
                    <SpecialDays>
                        <telerik:RadCalendarDay Repeatable="Today" Date="" ItemStyle-CssClass="rcToday">
                            <ItemStyle CssClass="rcToday"></ItemStyle>
                        </telerik:RadCalendarDay>
                    </SpecialDays>
                </telerik:RadCalendar>
            </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>
 
There is no code behind required.

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

Hope this helps!
Asked by
ehsan sadeghi
Top achievements
Rank 1
Answers by
Richard
Top achievements
Rank 1
Share this question
or