add event title as a tooltip

packages/features/calendars/weeklyview/components/event/Event.tsx

@@ -1,6 +1,8 @@
 import { cva } from "class-variance-authority";
 
 import dayjs from "@calcom/dayjs";
+import classNames from "@calcom/lib/classNames";
+import { Tooltip } from "@calcom/ui";
 
 import type { CalendarEvent } from "../../types/events";
 
@@ -62,14 +64,18 @@ export function Event({
   const Component = onEventClick ? "button" : "div";
 
   return (
+    <Tooltip content={event.title}>
       <Component
         onClick={() => onEventClick?.(event)} // Note this is not the button event. It is the calendar event.
-      className={eventClasses({
+        className={classNames(
+          eventClasses({
             status: options?.status,
             disabled,
             selected,
             borderColor,
-      })}
+          }),
+          options?.className
+        )}
         style={styles}>
         <div className="w-full overflow-hidden overflow-ellipsis whitespace-nowrap text-left leading-4">
           {event.title}
@@ -80,5 +86,6 @@ export function Event({
           </p>
         )}
       </Component>
+    </Tooltip>
   );
 }

packages/features/calendars/weeklyview/types/events.ts

@@ -10,5 +10,6 @@ export interface CalendarEvent {
     status?: BookingStatus;
     allDay?: boolean;
     borderColor?: string;
+    className?: string;
   };
 }