#433 Clickable Calendar Activities

[phoebehala]

Co-authors:

@veranika-karpava @ChainShoe-Z @seidior @Prabhj33t @daveytech @phoebehala

Proposed changes

This resolves #433 by:

• All activities on the calendar are clickable and can be closed by clicking a close button or clicking in the shaded area outside of the Dialog.
• When users clicked the activity on the calendar, it shows up an activity dialog which displays the details of the clicked activity with a 'close' button.
• The content of an activity dialog displays the title, start/end date and time of the activity.

Screenshot

Checklist

• [x] Are the issues being addressed linked to this PR?
• [x] Do all commit messages start with the issue number?
• [x] Are all code changes sufficiently tested?
• [x] Are there screenshots for UI changes?

[wendyyng]

A few things that I noticed:

• Sometimes the activity blocks don't have enough space for showing the whole title

  

• Hovering over the activities in agenda view changes the mouse cursor to text cursor instead of a hand pointer

• react-big-calendar does offer support to show more in month view via a popup. So maybe it's something that we can work on. Documentation: http://jquense.github.io/react-big-calendar/examples/index.html?path=/docs/examples--example-6

• Responsiveness of the programs page: we might want to adjust the size of the 'Program Activities' text and the program picker

• Selecting another program in the program picker, doesn't change the calendar's current month to the selected program's starting month

• Probably a low priority for now, but I was wondering if we can change colour of the activities. I looked at their documentation and it seems like they only use one colour

[seidior]

@wendyyng Very thorough beta testing, thanks! All great items to tackle and talk about Monday :)