如何获取DayPilot日历中事件Div的位置以实现左对齐弹窗

我明白你想要实现类似谷歌日历那样，点击事件后在旁边弹出左对齐详情弹窗的需求，其实DayPilot本身已经提供了获取事件DOM元素的便捷途径，不用自己费劲去查找，下面是具体的实现步骤：

1. 获取事件DOM元素与位置信息 #

在onEventClick回调里，DayPilot的args参数直接包含了当前点击事件对应的DOM节点——args.div，你可以通过它获取元素在浏览器中的精准位置：

onEventClick: async function (args) {
    const eventData = args.e.data;
    const eventDiv = args.div; // 拿到当前点击事件的DOM元素
    
    // 获取元素在视口中的位置坐标
    const rect = eventDiv.getBoundingClientRect();
    
    // 获取预设的弹窗容器
    const popup = document.getElementById('event-popup');
    
    // 填充弹窗内容（示例：展示事件信息+操作按钮）
    popup.innerHTML = `
        <h3>${eventData.text}</h3>
        <p>开始时间: ${new Date(eventData.start).toLocaleString()}</p>
        <p>结束时间: ${new Date(eventData.end).toLocaleString()}</p>
        <button onclick="handleEdit(${eventData.id})">编辑</button>
        <button onclick="handleDelete(${eventData.id})">删除</button>
    `;
    
    // 设置弹窗位置：左对齐事件元素，顶部对齐（可根据需求微调偏移量）
    popup.style.position = 'fixed';
    popup.style.left = `${rect.left}px`;
    popup.style.top = `${rect.top}px`;
    popup.style.display = 'block'; // 显示弹窗
}

2. 弹窗基础样式配置 #

为了让弹窗正常展示，给event-popup添加基础CSS样式：

.popup {
    display: none;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000; /* 确保弹窗在日历上方 */
    min-width: 220px;
}

3. 补充：实现编辑/删除功能 #

要复刻谷歌日历的编辑、删除逻辑，可以结合DayPilot的官方API完成：

// 编辑事件处理函数
function handleEdit(eventId) {
    const calendar = DayPilot.Calendar.get('calendar');
    const targetEvent = calendar.events.find(e => e.id === eventId);
    
    // 调用DayPilot内置的事件编辑弹窗
    calendar.events.edit(targetEvent);
    // 关闭自定义弹窗
    document.getElementById('event-popup').style.display = 'none';
}

// 删除事件处理函数
function handleDelete(eventId) {
    if (confirm("确定要删除这个事件吗？")) {
        const calendar = DayPilot.Calendar.get('calendar');
        calendar.events.remove(eventId);
        // 关闭自定义弹窗
        document.getElementById('event-popup').style.display = 'none';
    }
}

为什么之前的方法没生效？ #

你之前尝试普通JavaScript方法失败，大概率是因为没拿到正确的事件DOM元素——DayPilot的事件元素是动态生成的，直接通过ID或类名查找容易出错，而args.div是DayPilot直接提供的当前点击事件的DOM节点，是最可靠的获取方式。

备注：内容来源于stack exchange，提问作者Safiqul Islam Uzzal