如何为Streamlit-Calendar（基于FullCalendar）添加事件悬停提示？

需求背景 #

使用streamlit-calendar开发日历仪表盘，已实现基础功能，需要为日历事件添加悬停提示框，展示事件的详细信息（如监管机构、日期、影响评级等），且不熟悉JavaScript，需要直接适配现有代码的实现方案。

解决方案 #

通过streamlit-calendar的callbacks参数结合FullCalendar的事件回调，配合自定义CSS实现悬停提示框，无需额外引入外部依赖，直接修改现有代码即可：

修改后的完整代码

import streamlit as st
from streamlit_calendar import calendar

def calendar_data_event(df):
    result = {
        "title": df['Title'],
        "start": str(df['AssessmentDueDate']),
        "end": str(df['AssessmentDueDate']),
        # 保留所有需要在提示框展示的字段
        "Regulator": df['Regulator'],
        "updatedDB_Date": str(df['updatedDB_Date']),
        "AssessmentDueDate": str(df['AssessmentDueDate']),
        "ApplicationDate": str(df['ApplicationDate']),
        "ImpactRating": df['ImpactRating'],
        "ImpactScore" : df['ImpactScore'],
    }
    return result


calendar_options = {
        "editable": "true",
        "selectable": "true",
        "headerToolbar": {
            "left": "today prev,next",
            "center": "title",
            "right": "dayGridDay,dayGridWeek,dayGridMonth",
        },
        "initialView": "dayGridMonth",
    }


calendar_events = [calendar_data_event(row) for _, row in df.iterrows()]
    
custom_css="""
        .fc-event-past {
            opacity: 0.8;
        }
        .fc-event-time {
            display: none;
        }
        .fc-event-title {
            font-weight: 700;
        }
        .fc-toolbar-title {
            font-size: 2rem;
        }
        /* 悬停提示框样式 */
        .event-tooltip {
            position: absolute;
            background-color: #333;
            color: white;
            padding: 8px 12px;
            border-radius: 4px;
            font-size: 0.9rem;
            z-index: 1000;
            pointer-events: none;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
            display: none;
        }
    """

# 定义悬停相关的JavaScript回调
callbacks = [
    {
        "event": "eventMouseEnter",
        "callback": """
            function(info) {
                // 创建提示框元素（如果不存在）
                let tooltip = document.querySelector('.event-tooltip');
                if (!tooltip) {
                    tooltip = document.createElement('div');
                    tooltip.className = 'event-tooltip';
                    document.body.appendChild(tooltip);
                }
                // 填充提示内容，从事件对象中获取自定义字段
                tooltip.innerHTML = `
                    <strong>${info.event.title}</strong><br>
                    监管机构: ${info.event.extendedProps.Regulator}<br>
                    评估截止日期: ${info.event.extendedProps.AssessmentDueDate}<br>
                    申请日期: ${info.event.extendedProps.ApplicationDate}<br>
                    影响评级: ${info.event.extendedProps.ImpactRating}<br>
                    影响分数: ${info.event.extendedProps.ImpactScore}<br>
                    数据库更新日期: ${info.event.extendedProps.updatedDB_Date}
                `;
                // 设置提示框位置
                tooltip.style.display = 'block';
                tooltip.style.left = `${info.jsEvent.pageX + 10}px`;
                tooltip.style.top = `${info.jsEvent.pageY + 10}px`;
            }
        """
    },
    {
        "event": "eventMouseLeave",
        "callback": """
            function(info) {
                const tooltip = document.querySelector('.event-tooltip');
                if (tooltip) {
                    tooltip.style.display = 'none';
                }
            }
        """
    }
]

calendar = calendar(events=calendar_events, options=calendar_options, custom_css=custom_css, callbacks=callbacks)                     
st.write(calendar)

关键改动说明

1. 自定义CSS：新增.event-tooltip样式，定义提示框的外观、定位和隐藏状态，确保提示框悬浮在页面最上层且不干扰其他交互。
2. 事件回调：通过callbacks参数添加两个FullCalendar事件回调：
   • eventMouseEnter：鼠标悬停在事件上时，创建/显示提示框，填充事件的自定义字段信息，并根据鼠标位置定位提示框。
   • eventMouseLeave：鼠标离开事件时，隐藏提示框。
3. 事件数据：保留原有所有自定义字段，FullCalendar会将这些字段存入event.extendedProps中，供JS回调读取。

内容的提问来源于stack exchange，提问作者Maddy