Calendar in UI for ASP.NET AJAX

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

Calendar

1 Answer 21 Views

Calendar

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

1 Answer, 1 is accepted

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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!