jqwidgets-framework/demos/Angular/src/scheduler/keyboardnavigation/app.component.html

jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.

<jqxScheduler #scheduler
              [width]="getWidth()" [height]="450"
              [date]="date"
              [source]="dataAdapter"
              [view]="'weekView'"
              [views]="views"
              [appointmentDataFields]="appointmentDataFields">
</jqxScheduler>
<div style="font-family: Verdana; font-size: 12px; width: 690px;">
  <ul>
    <li>
      <b>Left Arrow</b> key is pressed - Selects the left cell, when the Scheduler is focused.
      <ul>
        <li>
          Navigates to previous view when <b>Ctrl</b> key is pressed and appointment is not selected.
        </li>
        <li>Selected appointment is moved left when <b>Ctrl</b> key is pressed.</li>
        <li>Selected appointment is resized when <b>Shift</b> key is pressed and it is all day, timelineView or monthView appointment.</li>
        <li>Selects left cell and updates the cells selection when <b>Shift</b> key is pressed.</li>
      </ul>
    </li>
    <li>
      <b>Right Arrow</b> key is pressed - Selects the right cell, when the Scheduler is focused.
      <ul>
        <li>
          Navigates to next view when <b>Ctrl</b> key is pressed and appointment is not selected.
        </li>
        <li>Selected appointment is moved right when <b>Ctrl</b> key is pressed.</li>
        <li>Selected appointment is resized when <b>Shift</b> key is pressed and it is all day, timelineView or monthView appointment.</li>
        <li>Selects right cell and updates the cells selection when <b>Shift</b> key is pressed.</li>
      </ul>
    </li>
    <li>
      <b>Up Arrow</b> key is pressed - Selects the cell above, when the Scheduler is focused.
      <ul>
        <li>Moves to cell selection to the first row when <b>Ctrl</b> key is pressed and cell is selected.</li>
        <li>Selected appointment is moved above when <b>Ctrl</b> key is pressed.</li>
        <li>Selected appointment is resized when <b>Shift</b> key is pressed and it is dayView or weekView appointment.</li>
        <li>Selects the above cell and updates the cells selection when <b>Shift</b> key is pressed.</li>
      </ul>
    </li>
    <li>
      <b>Down Arrow</b> key is pressed - Selects the cell below, when the Scheduler is focused.
      <ul>
        <li>Moves to cell selection to the last row when <b>Ctrl</b> key is pressed and cell is selected.</li>
        <li>Selected appointment is moved below when <b>Ctrl</b> key is pressed.</li>
        <li>Selected appointment is resized when <b>Shift</b> key is pressed and it is dayView or weekView appointment.</li>
        <li>Selects the below cell and updates the cells selection when <b>Shift</b> key is pressed.</li>
      </ul>
    </li>
    <li><b>Enter</b> key is pressed - Opens the Edit Dialog.</li>
    <li><b>Esc</b> key is pressed - Cancels dragging or resizing.</li>
    <li>
      <b>Tab</b> key is pressed - Tabs the selection to next appointment or out of Scheduler.
    </li>
    <li><b>Shift+Tab</b> keys are pressed - Tabs the selection to previous appointment or to focused cell.</li>
    <li><b>Alt</b> key are pressed - When Alt and Number is pressed, the Scheduler toggles Appointments visibility by Resource.</li>
    <li>
      <b>Ctrl</b> key is pressed
      <ul>
        <li>Sets the View when <b>Number</b> key is pressed. For example Ctrl + 1, sets the view to the first view.</li>
        <li>Opens the Context Menu when <b>m</b> key is pressed.</li>
        <li>Opens the DateTimeInput in the Navigation Toolbar<b>d</b> key is pressed.</li>
      </ul>
  </ul>
</div>