Calendar - Keyboard Navigation

Navigation between dates with the arrow keys
October, 2016

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" "">
<html xmlns=''>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <style type="text/css">
            margin-top: 12px;
            float: right;
            border: 1px solid #CCC;
    <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">
    <telerik:RadCalendar RenderMode="Lightweight" runat="server" ID="RadCalendar1" EnableKeyboardNavigation="true"
    <br />
    <br />
    <telerik:RadDatePicker RenderMode="Lightweight" runat="server" ID="RadDatePicker1">
        <Calendar ID="Calendar1" runat="server" EnableKeyboardNavigation="true">
    <br />

Find Assistance

Help Us Improve

Was this example helpful?