New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Keyboard Navigation

Navigation between dates with the arrow keys
April 2021

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

Support & Learning Resources

Find Assistance