Create Calendar Widget

[Jason-CJS]

The Calendar Widget will mimic a typical calendar to view EEWA's agendas or events for each respective days.

The widget will primarily be used in the Events page.

Frontend Requirements

• Create calendar design in Figma
  • Features:
    • Display current month and year at the top center
      • Clickable to reveal month and year selector (UX optismisation)
        • Could explore scrollable dropdown style for both month and year
    • Left and right arrow buttons on the top left and top right respectively to navigate between previous and future months
    • "Today" button to jump back to the current day
    • Each day in the calendar should be clickable to view all events
  • Design:
    • Contrasting accent colour for the current day
    • Suits the theme and branding of the entire website

Backend Requirements

• Reference instances from the EventInstances model with fields:
  • id
  • event (foreign key of event it is part of)
  • name
  • starts_at
  • ends_at
  • location
  • ticket_url
• Each instance's id (primary key) would be referenced on the day of the event in the calendar
• Check the database schema in Notion for more details

[github-actions]

Branch issue-11-Create_Calendar_Widget created!

[j-brkr]

So far I have imported the calendar component, adjusted the size of the cells added a dropdown for the month and year and included a "Today" button at the bottom of the widget.

These features are still to be completed:

• Integrating with backend to show events on the calendar
• Showing all the events on the selected day in more detail

All other requirements mentioned above have been completed. A work in progress draft is visible at "/"

[j-brkr]

All the above changes have been pushed to the branch. Anyone is welcome to take over from where I left!