FullCalendar - Google日历活动+ eventRender

本文介绍了FullCalendar - Google日历活动+ eventRender的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

An existing site that now has version 3.9.0 (previously version 3.4.0) of FullCalendar installed that is used to display content from various Google calendars no longer displays the event pop-ups when an event is clicked on to display the full event description. Instead the following code is being ignored:

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

        // Prevent redirect to Google Calendar
        return false;
        }

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

I was wondering if eventRender is able to display the event information? My search of the current FullCalendar Docs has not revealed any information that shows how this may be achieved, or whether or not this is even possible. I'm not sure how to integrate/utilise the only code I've found:

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

非常感谢任何帮助。

推荐答案

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

To clarify and to avoid any confusion: the solution to rendering the pop-up tooltips was achieved for a single calendar using the following code:

<!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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！