[scheduler] Joy - Add navigation between views
Issue #17697
What's included
This PR adds the HeaderToolbar component, which includes:
- A
ViewSwitcherthat uses theMenubarcomponent from Base UI. - The
ViewSwitcherdisplays up to 3 views as individual buttons. If more than 3 views are provided, the extra views are grouped under a dropdown labeled "Other". - The
ViewSwitcheraccepts a variable number of views via props. If none are provided, it defaults to the 4 planned views: week, day, month, and agenda. - A "Today" button next to the view switcher.
- Styling for the toolbar and dropdown UI.
Not in scope:
- External control of the currently selected view.
- Custom UIs for view navigation.
- Styling or logic for additional views like numberOfDays or noWeekends, since they are not currently planned (but can be added easily later).
Design and behavior: Figma
Demo
3 views https://github.com/user-attachments/assets/f33421cd-f2d2-4eb3-85dd-498dfc05c216
4 views https://github.com/user-attachments/assets/c9619572-87a0-41ca-8f00-a4dca23fa687
- [x] I have followed (at least) the PR section of the contributing guide.
Deploy preview: https://deploy-preview-18074--material-ui-x.netlify.app/
Bundle size report
Total Size Change: 0B(0.00%) - Total Gzip Change: 0B(0.00%) Files: 120 total (0 added, 0 removed, 0 changed)
Generated by :no_entry_sign: dangerJS against fbf21cdfa73f3a570f8b32c780b44930f887562e
I followed the folder structure pattern used in Base UI and placed ViewSwitcher in its own folder inside HeaderToolbar. It felt more readable and organized that way, and aligns with the direction Base UI seems to be heading. Happy to adjust if there's a preferred structure!
This pull request has conflicts, please resolve those before we can evaluate the pull request.
This pull request has conflicts, please resolve those before we can evaluate the pull request.
This pull request has conflicts, please resolve those before we can evaluate the pull request.