Implement monthly view calendar for admin scheduling UI

[7tint]

Ticket link

Closes #177

Implementation description

• Implemented the monthly view calendar for the admin schedule UI.
• Used the FullCalendar daygrid library add-on.

Steps to test

1. Install new dependencies and start frontend
2. Add the following snippet to Default.tsx, importing components/variables when necessary:

<Container maxW="container.xl">
    <AdminShiftCalendar events={ADMIN_SHIFT_CALENDAR_TEST_EVENTS} />
</Container>

3. Check that the events are displayed appropriately. Days with no events should be greyed out. "Unsaved" events have red dots and "saved" events have green dots. Should show the following:

4. Feel free to change the test case, as long as all events of ADMIN_SHIFT_CALENDAR_TEST_EVENTS are in the same month.

What should reviewers focus on?

• Clean UI, expected behaviour & styling 🖌️ 🌈
• I have defeated FullCalendar's final boss.

Checklist

• My PR name is descriptive and in imperative tense
• My commit messages are descriptive and in imperative tense. My commits are atomic and trivial commits are squashed or fixup'd into non-trivial commits
• I have run the appropriate linter(s)
• I have requested a review from the PL, as well as other devs who have background knowledge on this PR or who will be building on top of this PR

[github-actions]

Visit the preview URL for this PR (updated for commit 939d052):

https://sistering-dev--pr207-lambert-shift-calend-jba7ndj6.web.app

_{(expires Thu, 07 Apr 2022 22:18:20 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

[sherryhli]

✨ Looks amazing! ✨

Nothing too big from me, just some questions and suggestions :)

[sherryhli]

Something I discovered from the shift calendar is that FullCalendar does not re-render when initialDate changes. Can you confirm if the initialDate is updated when a new set of events is passed as props?

#203 (comment)

[7tint]

Not quite sure how to test this without integrating the calendar into the header. I think maybe we can investigate into this in the calendar header ticket (where the events are being passed in).

What I suspect though, is that FullCalendar is not refreshing when the events props change. We might be able to get around this using a force refetch - https://fullcalendar.io/docs/Calendar-refetchEvents.

[sherryhli]

Sounds good 👍

Was thinking of making wrapper like the one described in fullcalendar/fullcalendar#4684 (comment) for the week view calendar, would be applicable here too.

[7tint]

I left the Calendar component in Default.tsx so that you can take a look again when you review. I'll remove it once this PR is approved!

[sherryhli]

LGTM, will approve after addressing tiny lint issue

[sherryhli]

Nit: newline please

[sherryhli]

🚢🚢🚢