Problem Description

I need help on building a Google calendar / cal.com-like calendar. Feel free to refer to the cal.com repo to start.

Acceptance Criteria

• Must use React, Tailwind CSS, and shadcn/ui's library: https://ui.shadcn.com/.
• Must contain all the functionalities in the cal.com example: https://ui.cal.com/?path=/story/ui-calendar--onclick-handlers
• In addition, when clicked on an empty time slot, it opens up a dialog and asks the user to enter the details of the event. For now, let's stick to having an event name will do.
• When clicked on an event, the dialog should open up for event to be edited.
• Events can overlap.
• When hovered over the calendar, it will show a time slot along with your cursor. Please refer to the cal.com link for reference.
• The left most column should show each hour and the current time. Please refer to the cal.com link for reference.

Technical Details

You do not need to use a database for this project. Store the events in memory or by append them to the state. Using context or context manager, such as zustand is also acceptable. Please use some fake data to show that it works.

Link to Project

https://ui.cal.com/?path=/story/ui-calendar--onclick-handlers