Accessibility in Flutter Event Calendar (SfCalendar)
13 May 2021 / 5 minutes to read
Screen reader support
SfCalendar can easily be accessed by screen readers. Please find the following table to get spoken feedback about the inner element contents of the screen.
|Month cell||EEE, dd/MMMM/yyyy||Thursday the 2nd of January 2020|
|No events||EEE, dd/MMMM/yyyy, No events||Wednesday the 15th of January 2020, No events|
|No selected dates||No selected date||No selected date|
|Timeslot view||hh mm a dd/MMMM/yyyy||11AM the 28th of January 2020|
|All day expander icons||Expand all day panelCollapse all day panel||Expand all day sectionCollapse all day section|
|All day expander view||+ appointment Count||+3|
|Normal appointment||Subject hh mm a – hh mm a dd/MMMM/yyyy||Yoga therapy 10AM to 11AM the 29th of January 2020|
|Month agenda view appointment||Subject hh mm a – hh mm a dd/MMMM/yyyy||Plan execution 9AM to 11AM the 23rd January 2020|
|All day appointment||Subject All day||General meeting all day|
|Spanning appointment||Subject hh mm a dd/MMMM/yyyy - hh mm a dd/MMMM/yyyy||General meeting 12AM the 23rd of January 2020 – 1AM the 30th of January 2020|
|Header||MMMM yyyy||January 2020|
|Timeline week header||dd/MMMM to dd/MMMM/yyyy||15th of January to 21th January 2020|
|Timeline workweek header||dd/MMMM to dd/MMMM/yyyy||16th of January to 20th January 2020|
|Month view header||EEE||Monday|
|TimeSlot view header||EEE, dd/MMMM/yyyy||Wednesday the 29th of January 2020|
SfCalendar theming support offers a consistent and standardized look, as well as the ability to set the colors for all UI elements.
The following APIs allow you to customize the colors of the following elements.
SfCalendar font size can be adjusted automatically based on device settings and the font size scaled based on the
MediaQueryData.textScaleFactor. And also it allows to change the font size of all UI elements in the calendar.
The following keyboard interactions are supported by the
|Up arrow||Moves selection to the next calendar cell directly above the currently selected time slot|
|Down arrow||Moves selection to the next calendar cell directly below the currently selected time slot|
|Right arrow||Moves selection to the same time slot on the next day|
|Left arrow||Moves selection to the same time slot on the previous day|
|Tab||Focuses the next clickable element, except appointments and cells|
|Shift + tab||Focuses the previous clickable element, except appointment and cells|