Change Navigation Buttons and Today Placement for Improved Usability

[totitoti7]

Clear and concise description of the problem

This proposal suggests improving the user experience of the React-Big-Calendar by modifying the navigation controls and placement of the "Today" button.

Current Design:

The current design utilizes "Back" and "Next" buttons for navigation and places the "Today" button to the left of these controls. While functional, this design could be enhanced for better intuitiveness and visual balance.

Proposed Changes:

• Navigation Buttons: Replace the "Back" and "Next" buttons with universally recognized "<" and ">" symbols. These symbols are widely understood as representing backward and forward navigation, respectively, and can make the calendar's navigation more intuitive for users of diverse backgrounds.

• "Today" Button Placement: Relocate the "Today" button to the center, between the "<" and ">" navigation buttons. This central placement creates a more balanced and symmetrical layout, enhancing visual appeal and making the button easier to locate, especially on smaller screens.

Benefits:

• Improved Intuitiveness: The use of standard navigation symbols enhances the calendar's usability for users unfamiliar with the interface or those who speak different languages.

• Enhanced Aesthetics: The symmetrical layout with the "Today" button in the center creates a more visually pleasing and balanced design.

• Increased Discoverability: The central placement of the "Today" button makes it more prominent and easier to find, improving user experience.

Implementation Considerations:

• Iconography: Utilize clear and recognizable icons for the "<" and ">" symbols, ensuring sufficient contrast and size for optimal visibility.

• Tooltips: Consider adding tooltips to the symbols that display "Previous" and "Next" on hover, providing additional context for users who might not be familiar with the symbols.

• Keyboard Navigation: Ensure that the new buttons are accessible via keyboard navigation, allowing users to move between dates using the arrow keys.

Additional context

I believe these proposed changes will enhance the user experience of the React-Big-Calendar by making navigation more intuitive, aesthetically pleasing, and user-friendly. I welcome feedback and discussion on this proposal to further refine the implementation and ensure it aligns with the project's goals.

Validations

• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

• I'm willing to open a PR

[cutterbl]

@totitoti7 We may consider this for the 'next' version of Big Calendar (see the 'next' channel in our Slack group). For now this can be done with a custom Toolbar using the components prop. That story actually has an example similar to what you describe, and the code is in the repo.

[totitoti7]

@cutterbl Please review the changes in #2586.