🗓 Month calendar view (empty, with navigation)

[richardolsson]

Description

A user should be able to see events in a month calendar view.

See epic #1233 for context.

Relevant Job Stories

• When I have lots of events, I want to be able to see them in a calendar view, so that I can easily assess events’ durations and distribution over time
• When I’m planning a campaign or event that is similar to something that we’ve done before (e.g. May 1st, last year), I want to look at the events in Zetkin on a particular date, so that I can learn from and mimic patterns used then
• When I view a very busy day/week of events I want to still be able to get a birds-eye view of what events will happen, so that the clutter won’t impede my event planning
• When I select a date/time for an event I want to see what’s already planned so that I can find the best fit for my event and avoid collisions

Prerequisites

None

Requirements

The following applies to the calendar pages at /organize/ID/projects/calendar and /organize/ID/projects/ID/calendar.

• [x] The calendar pages should be fixed height, with a "collapse" in the header
• [x] A nav bar at the top of the calendar
  • [x] A "today" button takes the user to the current date in the calendar view below
  • [x] Left/right buttons navigate to previous/next month
  • [x] A month drop down shows the currently selected month, lets user pick a month, and navigates to that month
  • [x] A year drop down shows the currently selected year, lets user pick a year, and navigates to the selected month of that year
  • [x] Group of buttons in top right lets user switch between month, week and day views (tracked separately)
• [x] A month calendar view
  • [x] Grid of seven columns (one per day of week) and always six rows
  • [x] Selected month is shown in full in grid
  • [x] All grid squares have date of month
  • [x] Days of selected month are shown in darker gray
  • [x] Today's date should have a primary color (red) border

Possible implementations

Use fixedHeight with <TabbedLayout/>.

Use ButtonGroup for view switcher in top right.

Design specifications

Ignore "Filter" button for now (tracked separately).

Open questions

None

[nanoobop]

Working with johan

[richardolsson]

This has been finalized and merged into #1257