feat: ✨ create calendar/meeting setup page

[seancfong]

Summary

• Calendar component added to home page
• Users can highlight days by dragging on desktop and mobile
• Calendar month preview:
  
• Date highlight preview (while dragging/mouse down):
  
• Date select confirmation preview (when touch end/mouse up):
  

WIP

• Calendar displays days of month correctly
• User can navigate back and forth between months
• User can select a single day and multiple days
• User's selection is retained when navigating between months

Closes #8

[seancfong]

Current progress:

• Calendar seems to populate dates correctly, including February in leap years. May have to unit test this sometime?
• Incrementing and decrementing month buttons working. Temporarily using HTML entities (e.g. ‹ ) - will update to icons once we decide on which icon set to use.

Future considerations:

• To display grayed out days previous/next month?

December 2023

February 2024 (in leap year)

[MinhxNguyen7]

I know that this is still a draft, but looks like it's mostly done, so I'll just leave some comments. What do you have left to do anyway?

This is great. Works well, looks decent, and fulfills the requirements.

One little thing though, if you have a sequence of days selected, and you want to drag to unselect them, if you over-drag by one day, it selects that day.

Otherwise, I only have code-quality suggestions. I'm being thorough for now so that eveyrone can have a good idea of the standard.

[seancfong]

I know that this is still a draft, but looks like it's mostly done, so I'll just leave some comments. What do you have left to do anyway?

This is great. Works well, looks decent, and fulfills the requirements.

One little thing though, if you have a sequence of days selected, and you want to drag to unselect them, if you over-drag by one day, it selects that day.

Otherwise, I only have code-quality suggestions. I'm being thorough for now so that eveyrone can have a good idea of the standard.

Thanks for the feedback! I pushed changes to most of them but will @ when all ready for re-review.

[MinhxNguyen7]

Oops. I just realized that the review was premature. Looking at the PR and seeing all the boxes checked made me think that you were pretty much done, and I hadn't looked at the issue.

In any case, good progress, and sorry for breathing down the back of your neck.

[seancfong]

@MinhxNguyen7 Requesting re-review with feedback changes - also got in a fix for the following bug:

One little thing though, if you have a sequence of days selected, and you want to drag to unselect them, if you over-drag by one day, it selects that day.

[MinhxNguyen7]

I meant to add a review comment as well: The dragging doesn't work on desktop or mobile. The first time I hold down on one date and try to drag, it just half-highlights the first date and doesn't do anything else. I can make a recording if you can't reproduce it.

Also, for next time, please mark the comments on GitHub that you've addressed as resolved. If you don't agree, reply to the comment. Thanks!

[seancfong]

I meant to add a review comment as well: The dragging doesn't work on desktop or mobile. The first time I hold down on one date and try to drag, it just half-highlights the first date and doesn't do anything else. I can make a recording if you can't reproduce it.

Just looked into it earlier today and pushed a fix alongside changes from prior feedback. Let me know your thoughts on the one outstanding conversation. Thanks!

[MinhxNguyen7]

@seancfong I'll take a look

[seancfong]

@MinhxNguyen7 Re-requesting review, as all conversations have been resolved

[adi-lux]

Hey Sean! This pull request seems good, but I was wondering about the Date implementation.

In the future do you think we might have to switch to a time library or standardize the time code? I noticed that there already are two different types of Date implementations already. In the summary component, they use strings for meeting dates and times but the time picker makes Calendar Day its own class. It might get a little confusing later on if we don't standardize it.

Maybe using the default Date class, a date library, or a standardized Date implementation would be better for us? Because as we all know, JS' date implementation is finicky and it's probably important to have a solid representation of Date in an application such as ours. Let me know what your thoughts are on the subject.

[seancfong]

Hey Sean! This pull request seems good, but I was wondering about the Date implementation.

In the future do you think we might have to switch to a time library or standardize the time code? I noticed that there already are two different types of Date implementations already. In the summary component, they use strings for meeting dates and times but the time picker makes Calendar Day its own class. It might get a little confusing later on if we don't standardize it.

Maybe using the default Date class, a date library, or a standardized Date implementation would be better for us? Because as we all know, JS' date implementation is finicky and it's probably important to have a solid representation of Date in an application such as ours. Let me know what your thoughts are on the subject.

Hey Adi! I agree that we should look into some common date library to use. Definitely something to bring up in the upcoming meeting.

[MinhxNguyen7]

Why don't we use the built-in Date or make a sub-class of Date?

[MinhxNguyen7]

LGTM! Let's sort out the Date thing in the availability PR. Sorry for taking a while!