Make calendar interactive

[d4vidsha]

Motive of issue

Need to investigate deeper into FullCalendar (https://github.com/fullcalendar/fullcalendar) to see how we can interact with the calendar time blocks in this project, either by taking inspiration from the source or using the package directly. Additionally, we may need some drag-and-drop (dnd) functionality such as shown in the demos: https://fullcalendar.io/demos.

On implementing drap-and-drop

I've done some research into the current state of dnd on both click (desktop) and touch (mobile) events. The most promising option from having read through this stackoverflow answer seems to be drag-drop-touch which utilizes the draggable attribute.

However, we may not need dnd functionality when interacting with events (such as changing time and duration) if we make use of FullCalendar. The only time that I foresee the usage of drap-drop-touch is if we want the ability to directly drag and drop tasks into the calendar, just like what is shown in the FullCalendar demo under "Drag-n-Drop Events".

Some other notable mentions from my research were sourced from this other stackoverflow post which makes mention of react-dnd and atlassian/react-beautiful-dnd but from my personal rudimentary testing with an iPad, I found scrolling with touch still activates.