Hover Cards
Floating preview cards that show contact details, time, type, and status on event hover
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
preferBottomflag. - A configurable offset (defined in
calendar-hover-card-config) separates the card from the event element.