Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (150).NET Core  (25)Angular  (48)ASP.NET  (48)ASP.NET Core  (64)ASP.NET MVC  (86)Azure  (28)Blazor  (91)DocIO  (20)Essential JS 2  (69)Essential Studio  (162)File Formats  (18)Flutter  (102)JavaScript  (148)Microsoft  (101)PDF  (59)React  (33)Succinctly series  (122)Syncfusion  (472)TypeScript  (30)Uno Platform  (3)UWP  (4)Vue  (26)Webinar  (24)Windows Forms  (55)WinUI  (16)WPF  (119)Xamarin  (127)XlsIO  (24)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (107)Chart  (50)Cloud  (9)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (5)DataGrid  (45)Development  (252)Doc  (7)DockingManager  (1)eBook  (93)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (20)Extensions  (13)File Manager  (4)Gantt  (9)Gauge  (6)Git  (4)Grid  (27)HTML  (9)Installer  (2)Knockout  (2)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (214)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (22)Performance  (6)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (26)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (18)Solution Services  (2)Spreadsheet  (9)SQL  (7)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (10)Tips and Tricks  (57)UI  (117)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (1)Visual Studio  (19)Visual Studio Code  (10)Web  (205)What's new  (125)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Keyboard Support Enhancements in Flutter Event Calendar: 2021 Volume 2

Keyboard Support Enhancements in Flutter Event Calendar

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 release, we have fixed the bugs and enhanced the keyboard interaction support in our Syncfusion 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 property in the Calendar.

KeyView
Alt + 1Day
Alt + 2Week
Alt + 3Workweek
Alt + 4Month
Alt + 5Timeline day
Alt + 6Timeline week
Alt + 7Timeline workweek
Alt + 8Timeline month
Alt + 9Schedule
View Switching Using Keyboard Interaction in Flutter Event Calendar
View Switching Using Keyboard Interaction in Flutter Event Calendar

View navigation

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

KeyAction
CTRL + left arrow (<-)To navigate to the previous view.
CTRL + right arrow (->)To navigate to the next view.
Page up/downVertically scrolls through the timeslot views  (Day, week, work week).
View Navigation Using Keyboard Interaction in Flutter Event Calendar
View Navigation Using Keyboard Interaction in Flutter Event Calendar

Calendar cell and appointment selection

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

KeyAction
Right arrowMove selection to the same time slot on the next day.
Left arrowMove selection to the same time slot on the previous day.
Up arrowMove selection to the next calendar cell directly above the currently selected time slot.
Down arrowMove selection to the next calendar cell directly below the currently selected time slot.
TabMove 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.
Shift + TabMove 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.
EnterFire the on-tap callback with the selected calendar cell and appointment.
Flutter Event Calendar's Cell and Appointment Selection Using Keyboard Interaction
Flutter Event Calendar’s Cell and Appointment Selection Using Keyboard Interaction

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 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 and online demos 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 page. If you are not yet a Syncfusion customer, you can try our 30-day free trial to check out our available features.

You can also contact us through our support forumDirect-Trac, or feedback portal. We are here to help you succeed!

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top