Default Component - Copy this React, Tailwind Component to your project

export interface ContactDto { id: number; givenName: string; familyName: string; email: string | null; phoneNumber: string | null; } export interface TenantServiceDto { id: number | null; name: string; description: string; duration: number; groupId: number; } export interface ScheduleAppointmentDto { contactId: ContactDto; startTime: string; services: TenantServiceDto[]; } export interface TimeSlotDto { index: number; startTime: string; endTime: string; } export interface ScheduleDto { id: number; userId: number; companyId: number; date: string; startTime: string; endTime: string; appointments: ScheduleAppointmentDto[]; timeSlots: TimeSlotDto[]; } You need to modify the calendar component to accept a ScheduleDto and, if passed, display appointments as events on the calendar. When a schedule is provided and exists, the calendar should render appointments with the appropriate start time, contact information, and additional details. Furthermore, make each appointment event hoverable, and on hover, display a tooltip or popover showing more information about the appointment. Steps: Input: Accept a ScheduleDto as input into your calendar component. If the ScheduleDto exists, parse the appointments and display them as events on the calendar. Event Rendering: For each appointment in the ScheduleDto, render an event on the calendar at the startTime of the appointment. Display the contactId details (such as givenName, familyName, phoneNumber, and email), as well as any relevant service details (name, description, duration). Ensure that each appointment has a proper duration displayed on the calendar (using startTime and duration). Hover Details: Make each appointment event hoverable (e.g., by changing the cursor to pointer or using a hover effect). Upon hovering over an appointment event, display a tooltip or popover with the following details: Contact Information: givenName, familyName, email, phoneNumber. Appointment Details: startTime, duration, and the name and description of the services associated with the appointment. Appointment Event Styling: Style the events in a distinguishable way (e.g., background color, border, or icon) to indicate that they are appointments. Use CSS classes or inline styles to highlight the events (e.g., appointment-event). Error Handling (Optional): Ensure that if the ScheduleDto does not contain any appointments, the calendar gracefully displays a message or leaves the calendar blank, depending on your UI requirements. Example of the Expected Behavior: When the ScheduleDto is passed, the calendar should: Display appointments as individual events on their respective dates. For each appointment: The event’s start time is placed on the calendar grid. The event’s duration is shown clearly. Contact information and appointment details are displayed on hover. Example of Event Data for Tooltip: Start Time: "2021-01-01T10:30:00" Contact Info: Name: Cristiano Ronaldo Email: cristiano@football.com Phone: 46550323 Service Info: Service Name: Medical Checkup Description: Full body checkup Duration: 60 minutes Suggested Implementation Details: Handling the ScheduleDto in Your Calendar: Pass the ScheduleDto data into your calendar component as a prop. Iterate over the appointments array in the ScheduleDto and map them to calendar events. Event Display Logic: For each appointment, create a calendar event block that displays the start time and duration. Use localTime or localDateTime from the startTime of the ScheduleAppointmentDto for accurate positioning on the calendar. Hoverable Event UI: You can use a CSS :hover state or JavaScript tooltips/popovers to show the additional details when hovering over an event. Example: When hovering over the appointment, show a tooltip with: Contact Name (givenName, familyName). Service Name (name). Start Time and Duration. Populating Data on Hover: Use a JavaScript library like react-tooltip or react-popover (or a similar one for your framework) to display the hover data dynamically. Or use CSS tooltips for a simpler implementation.