Scheduler - Keyboard Support

  • today
April, 2012
April, 2012
SMTWTFS
       
1234567
891011121314
15161718192021
22232425262728
2930     
Monday, April 16, 2012
  • Day
  • Week
  • Month
  • Timeline
all day
8AM
 
9AM
 
10AM
 
11AM
 
12PM
 
1PM
 
2PM
 
3PM
 
4PM
 
5PM
 
Breakfast
Technical meeting
Show 24 hours...
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

Keyboard support

Press Alt + AccessKey in IE / Chrome, Alt + Shift + AccessKey in FireFox, Shift + Esc + AccessKey in Opera, or use Tab to move to and focus the control.

Note: By default tab-access is disabled in Safari. To enable it, check "Preferences > Advanced > Press tab to highlight each item on the page".

RadScheduler keyboard navigation functionality allows for navigation and manipulation of RadScheduler using the keyboard. By default RadScheduler requires TabIndex to be set. One can also utilize AccessKey.

Focus

  • Alt + W focuses the control. (W is the AccessKey)

Navigating

  • Alt + Numbers goes to day view.
  • Alt + - goes to week view.
  • Alt + + goes to month view.
  • Arrow Keys navigate through timeslots.
  • Alt + Down Arrow goes to the next week.
  • Alt + Up Arrow goes to the previous week.
  • Alt + Page Down goes to the next month.
  • Alt + Page Up goes to the previous month.

Selecting / editing

  • Shift + Arrow Keys to select multiple timeslots.
  • Tab cycles trough appointments.
  • Shift + Tab cycles trough appointments backwards.
  • Enter opens insert appointment form. If an appointment is selected, opens edit appointment form
  • Alt + S saves the appointment.
  • Alt + C cancels the edit / insertion.
  • Alt + O opens advanced form.
  • Del deletes appointment.
  • Esc closes form.

Review the following topic from the online documentation for more details: Keyboard Support Overview.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Scheduler.Examples.KeyBoardSupport.DefaultCS" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ 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>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />

    <telerik:RadScriptBlock runat="server">
        <script type="text/javascript">
            /* Otherwise the whole document would be scrolled
            altogether with the RadScheduler. */
            var $ = $telerik.$;
            $(document).keydown(function (e) {
                if ($(e.target).is(document) || $(e.target).is(".RadScheduler")) {
                    if (e.keyCode != Sys.UI.Key.tab) {
                        e.preventDefault();
                    }
                }
            });

            function requestEnd() {
                $telerik.$($find('<%= RadScheduler1.ClientID %>').get_element()).focus();
            }
        </script>
    </telerik:RadScriptBlock>

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <ClientEvents OnResponseEnd="requestEnd" />
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadScheduler1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadScheduler1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>

    <div class="no-bg">
        <telerik:RadScheduler RenderMode="Lightweight" runat="server" ID="RadScheduler1" Height="600"
            AccessKey="W" TabIndex="1" OverflowBehavior="Auto"
            SelectedDate="2012-04-16" DayStartTime="08:00:00" DayEndTime="18:00:00">
            <AdvancedForm Modal="true" />
        </telerik:RadScheduler>
    </div>

    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?