Hover Cards

When you hover over a calendar event, a floating preview card appears near the cursor. The card provides a quick summary of the event without requiring a click or right-click.

Content

The hover card displays a UserStatsCard component that shows:

• Contact name -- The display name of the associated contact, pulled from the contact summary store in real-time.
• Scheduled time -- The event's start time formatted in the configured timezone.
• Event type -- The category of the event with its associated color.
• Status -- Whether the event is active, cancelled, or past.

The card subscribes to the contact summary store's lastUpdatedAt field so it automatically re-renders when a contact's name changes.

Positioning

The card is rendered as a portal attached to document.body, ensuring it floats above all calendar content regardless of overflow or stacking context. It is positioned using absolute coordinates based on the mouse position:

• By default, the card appears above the hovered event, centered horizontally.
• If there is not enough space above, it flips to appear below the event using the preferBottom flag.
• A configurable offset (defined in calendar-hover-card-config) separates the card from the event element.