Keyboard Support Enhancements in Flutter Event Calendar
Tags: flutter, dart, mobile, webdev
Published: 2021-07-30 09:38:35

---
title: Keyboard Support Enhancements in Flutter Event Calendar
published: true
date: 2021-07-30 09:00:12 UTC
tags: flutter, dart, mobile, webdev
canonical_url: https://www.syncfusion.com/blogs/post/keyboard-support-in-flutter-event-calendar.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2021/07/Keyboard-Support-Enhancements-in-Flutter-Event-Calendar-2021-Volume-2-672x372.png
---

While working with a calendar widget on desktop and web platforms, one of the most prevalent requirements is the ability to use the application with only keyboard interaction. In the [2021 Volume 2](https://www.syncfusion.com/forums/166800/essential-studio-2021-volume-2-main-release-v19-2-0-44-is-available-for-download "Link to download Essential Studio 2021 Volume 2") release, we have fixed the bugs and enhanced the keyboard interaction support in our Syncfusion [Flutter event Calendar ](https://www.syncfusion.com/flutter-widgets/flutter-calendar "Link to the Flutter event Calendar")widget. Now, you can enjoy all the common keyboard interaction functionalities and use the app without the need for a mouse.

In this blog post, we will see all the keyboard interaction supports in the Flutter event Calendar widget and how to use them.

## View switching

You can switch to different views in our Flutter Calendar through keyboard interactions without using the mouse. When the Calendar is not in focus mode, use the **tab** key to focus on the Calendar. Then, use the **alt + Numeric keys [1 to 9]** to change the calendar view. You can also restrict this keyboard view switching using the [allowedViews](https://help.syncfusion.com/flutter/calendar/date-navigations#allowed-views "Link to the allowedViews property of Flutter event Calendar") property in the Calendar.

<table style="height: 264px;">
<tbody>
<tr style="height: 24px;">
<td style="height: 24px;" width="103"><strong>Key</strong></td>
<td style="height: 24px;" width="137"><strong>View</strong></td>
</tr>
<tr style="height: 24px;">
<td style="height: 24px;" width="103">Alt + 1</td>
<td style="height: 24px;" width="137">Day</td>
</tr>
<tr style="height: 24px;">
<td style="height: 24px;" width="103">Alt + 2</td>
<td style="height: 24px;" width="137">Week</td>
</tr>
<tr style="height: 24px;">
<td style="height: 24px;" width="103">Alt + 3</td>
<td style="height: 24px;" width="137">Workweek</td>
</tr>
<tr style="height: 24px;">
<td style="height: 24px;" width="103">Alt + 4</td>
<td style="height: 24px;" width="137">Month</td>
</tr>
<tr style="height: 24px;">
<td style="height: 24px;" width="103">Alt + 5</td>
<td style="height: 24px;" width="137">Timeline day</td>
</tr>
<tr style="height: 24px;">
<td style="height: 24px;" width="103">Alt + 6</td>
<td style="height: 24px;" width="137">Timeline week</td>
</tr>
<tr style="height: 48px;">
<td style="height: 48px;" width="103">Alt + 7</td>
<td style="height: 48px;" width="137">Timeline workweek</td>
</tr>
<tr style="height: 24px;">
<td style="height: 24px;" width="103">Alt + 8</td>
<td style="height: 24px;" width="137">Timeline month</td>
</tr>
<tr style="height: 24px;">
<td style="height: 24px;" width="103">Alt + 9</td>
<td style="height: 24px;" width="137">Schedule</td>
</tr>
</tbody>
</table>

![View Switching Using Keyboard Interaction in Flutter Event Calendar](https://www.syncfusion.com/blogs/wp-content/uploads/2021/07/View-Switching-using-Keyboard-Interaction-in-Flutter-event-Calendar.gif)<figcaption>View Switching Using Keyboard Interaction in Flutter Event Calendar</figcaption>

## View navigation

Use the following key sets to easily navigate to the previous or next view without the need for a mouse.

<table>
<tbody>
<tr>
<td width="301"><strong>Key</strong></td>
<td width="301"><strong>Action</strong></td>
</tr>
<tr>
<td width="301">CTRL + left arrow (&lt;-)</td>
<td width="301">To navigate to the previous view.</td>
</tr>
<tr>
<td width="301">CTRL + right arrow (-&gt;)</td>
<td width="301">To navigate to the next view.</td>
</tr>
<tr>
<td width="301">Page up/down</td>
<td width="301">Vertically scrolls through the timeslot views  (Day, week, work week).</td>
</tr>
</tbody>
</table>
![View Navigation Using Keyboard Interaction in Flutter Event Calendar](https://www.syncfusion.com/blogs/wp-content/uploads/2021/07/View-Navigation-Using-Keyboard-Interaction-in-Flutter-event-Calendar.gif)<figcaption>View Navigation Using Keyboard Interaction in Flutter Event Calendar</figcaption>

## Calendar cell and appointment selection

We can select the Calendar cells and appointments using the following key sets.

<table>
<tbody>
<tr>
<td width="301"><strong>Key</strong></td>
<td width="301"><strong>Action</strong></td>
</tr>
<tr>
<td width="301">Right arrow</td>
<td width="301">Move selection to the same time slot on the next day.</td>
</tr>
<tr>
<td width="301">Left arrow</td>
<td width="301">Move selection to the same time slot on the previous day.</td>
</tr>
<tr>
<td width="301">Up arrow</td>
<td width="301">Move selection to the next calendar cell directly above the currently selected time slot.</td>
</tr>
<tr>
<td width="301">Down arrow</td>
<td width="301">Move selection to the next calendar cell directly below the currently selected time slot.</td>
</tr>
<tr>
<td width="301">Tab</td>
<td width="301">Move selection to the next appointment from the currently selected appointment. If no appointment is selected, then use the tab traversal and move the focus to the next clickable item.</td>
</tr>
<tr>
<td width="301">Shift + Tab</td>
<td width="301">Move selection to the previous appointment from the currently selected appointment. If no appointment is selected, then use the tab traversal and move the focus to the next clickable item.</td>
</tr>
<tr>
<td width="301">Enter</td>
<td width="301">Fire the on-tap callback with the selected calendar cell and appointment.</td>
</tr>
</tbody>
</table>

![Flutter Event Calendar's Cell and Appointment Selection Using Keyboard Interaction](https://www.syncfusion.com/blogs/wp-content/uploads/2021/07/Flutter-event-Calendars-Cell-and-Appointment-Selection-Using-Keyboard-Interaction.gif)<figcaption>Flutter Event Calendar’s Cell and Appointment Selection Using Keyboard Interaction</figcaption>

### Points to be noted

- If you tap on an **appointment** and press any arrow key, then the next available calendar **cell** will be selected.
- If you select a **cell** and press Tab or Shift + Tab, then the next available **appointment** will be selected in the Flutter event calendar.

## Conclusion

Thanks for reading! In this blog post, we’ve seen the details of all the available keyboard interaction features in the [Flutter event calendar](https://www.syncfusion.com/flutter-widgets/flutter-calendar "Link to the Flutter event Calendar") and their usage. With these features, you can use the Calendar through a keyboard without the need for a mouse. Try out the keys mentioned in this blog post and enjoy hassle-free interactions!

Also, try out our [Flutter event Calendar projects](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/calendar "Link to Flutter demos on GitHub") and [online demos](https://flutter.syncfusion.com/#/event-calendar/getting-started "Link to the Flutter demos on web") and share your feedback or questions in the comments section of this blog post.

For existing customers, the new version is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads "Link to license and download page of Essential Studio") page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Link to the free evaluation of the Syncfusion Essential Studio") to check out our available features.

You can also contact us through our [support forum](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents "Link to the Syncfusion support system Direct Trac"), or [feedback portal](https://www.syncfusion.com/feedback/flutter "Link to Syncfusion Feedback Portal"). We are here to help you succeed!

## Related blogs

- [Syncfusion Essential Studio 2021 Volume 2 Is Here!](https://dev.to/sureshmohan/syncfusion-essential-studio-2021-volume-2-is-here-dbk-temp-slug-1234958 "Link to Syncfusion Essential Studio 2021 Volume 2 Is Here! blog")
- [What’s New in 2021 Volume 2: Flutter](https://dev.to/karthickramasamy08/what-s-new-in-2021-volume-2-flutter-5e47-temp-slug-8754988 "Link to What’s New in 2021 Volume 2: Flutter blog")
- [Introducing Editing Functionality in Flutter DataGrid](https://dev.to/sureshmohan/introducing-editing-functionality-in-flutter-datagrid-59hc-temp-slug-9192836 "Link to Introducing Editing Functionality in Flutter DataGrid blog")
- [What’s New in 2021 Volume 2: Flutter Charts](https://dev.to/sureshmohan/what-s-new-in-2021-volume-2-flutter-charts-5fg2-temp-slug-6177754 "Link to What’s New in 2021 Volume 2: Flutter Charts blog")