Calendar pattern

[robertjmccarthy]

This contribution was made by @pbrocketmoj.

---

Contribution purpose

Presents dates and times in a calendar format. Allows users to select a date and see relevant times to make a booking.

Example

Link to Figma: https://www.figma.com/file/qgKJI2rYX3kC8l2T9JRPKf/Calendar-Design?type=design&node-id=1604-483&mode=design

Research

Link to Google Slide document: https://docs.google.com/presentation/d/1EgWkkzkePc2NadWVNBjAx3gXYsLmY6PJYHZZHpC3wco/edit?usp=sharing

[robertjmccarthy]

GOV.UK Design System have an issue open for choosing a date: alphagov/govuk-design-system#2375

NHS have an issue open for a date picker where there's a comment showing a pattern for selecting a date and time: nhsuk/nhsuk-service-manual-community-backlog#493 (comment)

[pbrocketmoj]

Update on the design @robertjmccarthy :)

We ended up developing a calendar date picker for the public service of book a prison visit:

https://www.figma.com/design/qgKJI2rYX3kC8l2T9JRPKf/Calendar-Design?node-id=1604-483

This has just gone through an accessibility audit and passed with flying colours:

"The date selection component is implemented very well, both visually and in terms of screen reader accessibility. Screen reader users are clearly informed about the date they are focusing on, the corresponding day of the week, and the number of available visit slots as they tab through the calendar.

Upon selecting a date, focus automatically shifts to the available slots, allowing users to proceed directly to time booking without having to tab through all remaining dates. Additionally, after selecting a date, users are presented with an option to choose a different date via the ‘Choose a different date above’ link. This link takes users back to the top of the calendar datepicker, making it easier to change their date selection without needing to navigate backwards through all the dates.

This design is very user-friendly, particularly for screen reader users, as it streamlines the process of selecting a date and time."