FullCalendar - Google日历活动+ eventRender

时间:2018-04-11 11:51:17

标签: jquery fullcalendar google-calendar-api

现在安装了FullCalendar版本3.9.0(以前版本3.4.0)的现有网站,用于显示各种Google日历中的内容,在点击事件时不再显示事件弹出窗口以显示完整的事件描述。而是忽略以下代码:

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

        // Prevent redirect to Google Calendar
        return false;
        }

我想知道eventRender是否能够显示事件信息?我对当前FullCalendar Docs的搜索没有透露任何显示如何实现这一目标的信息,或者是否可以实现。我不确定如何整合/利用我发现的唯一代码:

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

非常感谢任何协助。

2 个答案:

答案 0 :(得分:1)

解决方案是使用popper.js,如下所示:

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

再次感谢ADyson的所有帮助。

答案 1 :(得分:0)

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

<!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>