复制Google日历事件弹出面板的相同位置功能

Question

问题

我正在寻找可以告诉我更多有关如何复制此特定面板的相同功能的任何信息，但是找不到任何教程或有用的代码会很幸运。

功能是

• 单击日历上的事件时，面板弹出。
• 面板以某种方式计算客户端屏幕的宽度，以了解将面板放置在屏幕的最佳区域的位置。
• 同时，在单击另一个事件时，当前打开的事件的面板仅转换为另一个事件，而在当前面板上没有关闭转换，而在另一个事件面板上没有打开转换。

最终结果似乎是根据您单击的事件在屏幕上移动的面板，并将其内容转换为当前活动的事件。

我已经做了

我正在使用fullcalendar插件。当触发clickEvent功能时，它提供了一些有用的数据，例如屏幕上的点击位置等。

我确实达到了非常接近的行为，但是在计算显示面板的最佳位置时仍然遇到一些问题。

Here is a working pen。

预期结果

我希望可以使用更好的逻辑来计算显示面板的最佳位置，而不会破坏屏幕的宽度或高度，并且可以处理任何屏幕尺寸。

这是我当前的逻辑

  if ((eventX) > screenX / 2) {
    panel.css('right',eventX + jsEvent.currentTarget.clientWidth)
    panel.css('top',eventY)
  } else {
    panel.css('left',eventX)
    panel.css('top',eventY)
  }

赞赏！