FullCalendar

Question

现在安装了 3.9.0 版（以前的 3.4.0 版）FullCalendar 的现有站点用于显示来自各种 Google 日历的内容，当事件发生时不再显示事件弹出窗口单击以显示完整的事件描述。相反，以下代码被忽略：

        eventClick: function(calEvent, jsEvent, view) {
        showEventInformation(calEvent);

        // Prevent redirect to Google Calendar
        return false;
        }

请问eventRender是否可以显示事件信息？我对当前 FullCalendar Docs 的搜索没有显示任何信息来说明如何实现这一点，或者这是否可能。我不确定如何 integrate/utilise 我找到的唯一代码：

eventRender: function(event, element) {
  element.qtip({
  content: event.description
  });
}

如有任何帮助，我们将不胜感激。

Answer 1

解决方案是使用 popper.js，如下所示：

eventRender: function(eventObj, $el) {
    $el.popover({
      title: eventObj.title,
      content: eventObj.description,
      trigger: 'hover',
      placement: 'top',
      container: 'body'
    });
  },

再次感谢 ADyson 的所有帮助。

Answer 2

为了澄清并避免任何混淆：使用以下代码为单个日历实现了呈现弹出工具提示的解决方案：

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />

<link href='/css/fullcalendar.min.css' rel='stylesheet' />
<link href='/css/fullcalendar.print.css' rel='stylesheet' media='print' />

<script src='/js/lib/moment.min.js'></script>
<script src='/js/lib/jquery.min.js'></script>
<script src='/js/fullcalendar.min.js'></script>
<script src='/js/gcal.min.js'></script>

<style>

  html, body {
    margin: 0;
    padding: 0;
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    font-size: 14px;
  }

  #calendar {
    max-width: 900px;
    margin: 40px auto;
  }

  #calendar a.fc-event {
    color: #fff; /* bootstrap default styles make it black. undo */
  }

</style>

<link href='https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css' rel='stylesheet' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js'></script>

<script>

  $(function() {

    $('#calendar').fullCalendar({

      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,listYear'
      },

      displayEventTime: false, // don't show the time column in list view


      googleCalendarApiKey: 'MyAPIkey',
// Single Calendar
      events: {
        googleCalendarId: 'gCalID-1',
            color: 'green',   // an option!
            textColor: 'black', // an option!
            className: 'my-event-1
      },

      eventRender: function(eventObj, $el) {
        $el.popover({
          title: eventObj.title,
          content: eventObj.description,
          trigger: 'hover',
          placement: 'top',
          container: 'body'
        });
      }

    });

  });

</script>

</head>
<body>

  <div id='calendar'></div>

</body>

</html>

FullCalendar - Google 日历事件 + eventRender

FullCalendar - Google Calendar Events + eventRender

jquery

google-calendar-api