Calendar - Keyboard Navigation

Navigation between dates with the arrow keys
September, 2016
September, 2016
 SMTWTFS
3628293031123
3745678910
3811121314151617
3918192021222324
402526272829301
412345678



Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

This example demonstrates the navigation between dates with the arrow keys into the RadCalendar and RadDatePicker controls. The navigation could be enabled with setting the EnableKeyboardNavigation property to true:

<telerik:RadCalendar EnableKeyboardNavigation="true" EnableMultiSelect="false" runat="server" ID="RadCalendar1" />

When the EnableKeyboardNavigation is set to true the user could navigate with:

  • Left arrow - moves one date left form the current date
  • Right arrow - moves one date right from the current date
  • Top arrow - moves one week before the current date
  • Bottom arrow - moves one week after the current date

If the user presses the Enter key or spacebar key the date will be selected.
Note that the EnableMultyDateSelecttion property of the calendar should be set to false.

You can focus the calendar control with pressing CTRL + Y.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page CodeFile="DefaultCS.aspx.cs" Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Calendar.Functionality.MultiMonthView.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>
     
    <style type="text/css">
        .image
        {
            margin-top: 12px;
            float: right;
            border: 1px solid #CCC;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container no-bg" style="max-width:900px" runat="server" id="containerDiv">
    <asp:Image CssClass="image" ImageUrl="images/keyboard_nav.gif"
        runat="server" AlternateText="Navigation between dates with the arrow keys">
    </asp:Image>
    <telerik:RadCalendar RenderMode="Lightweight" runat="server" ID="RadCalendar1" EnableKeyboardNavigation="true"
        EnableMultiSelect="false">
    </telerik:RadCalendar>
    <br />
    <br />
    <telerik:RadDatePicker RenderMode="Lightweight" runat="server" ID="RadDatePicker1">
        <Calendar ID="Calendar1" runat="server" EnableKeyboardNavigation="true">
        </Calendar>
    </telerik:RadDatePicker>
    <br />
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?