[SCEVENTS] Improve calendar UI a la Google Calendar

[adarshm11]

Motivation

Google Calendar has the option to view your calendar in Day, Week, Month, or Year mode:

We should do this! It's a nice improvement of the user experience and lets people customize their calendars. The first PR for this issue can just be the implementation, and a second associated PR will address persisting users' preferences.

[vihuynh72]

Hi Adarsh, I’m a new SCE contributor and would like to work on this. Could you confirm the preferred approach and assign #2160 to me? I’ve forked the repo and will target the dev branch.

So far, I will build it based on Google Calendar with the day, week, month, and year options in a dropdown. I will not include persistent users' preferences, as you mentioned for the second PR.

I'm going to access CalendarHeader.js at Clark/src/Pages/Events/Calendar/CalendarHeader.js. The div <div className="space-y-3"> controls the Month dropdown.

In doing so, I will need to create extra UI views for the day, week, month, and year. I will code it a bit similar to Google Calendar style.

Let me know if you have any comments or feedback for me. Thank you!

[adarshm11]

sure design looks good, go ahead and submit the PR and i'll review

[vihuynh72]

sure design looks good, go ahead and submit the PR and i'll review

Hi @adarshm11 , thank you very much. I just submitted the PR

Link: #2187

Hope you have a wonderful day! Thank you!