2

为了解决解析的问题，我不得不添加 tooltip.js 和 popper.js（我的笨头忘了这样做）

我现在的问题是它正在呈现事件，但工具提示仍然不会在悬停或单击时呈现。

我目前正在尝试让悬停工具提示在 FullCalendar 上工作，但我找到的所有关于如何做到这一点的示例（包括官方文档）都未能帮助我做到这一点。

每次我加载页面时，它都会返回：

解析 JSON 失败

但是打开使用 JSON 提供它的我的 php 文件会返回正确的 json。下面是我的日历页面上用于呈现日历的代码，如果我把 eventRender 拿出来，它就可以正常工作。

document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {
          plugins: [ 'dayGrid' ],
          defaultView: 'dayGridMonth',

          eventRender: function(info) {
                    var tooltip = new Tooltip(info.el, {
                      title: info.event.extendedProps.description,
                      placement: 'top',
                      trigger: 'hover',
                      container: 'body'
                     });
                   },

          eventSources: [
          {
            url: 'json-events-feed.php',
            type: 'POST' // Send post data
          }
          ]  
        });

        calendar.render();
      });

我的 json-events-feed.php 文件如下所示：

<?php
require( "config.php" );
try {

    $data = array();
    $data = Event::getList();
    $result_calendar['event'] = $data['results'];
    $result_calendar['totalRows'] = $data['totalRows'];

    $events = array();

    // Fetch results
    foreach ($result_calendar['event'] as $event) {
        $e = array();
        $e['id'] = $event->calendarDateID;
        $e['title'] = $event->title;
        $e['start'] = date( "Y-m-d", $event->eventDate );
        $e['end'] = date( "Y-m-d", $event->eventDate );
        $e['allDay'] = true;
        $e['description'] = "Testando essa bagaca";

        // Merge the event array into the return array
        array_push($events, $e);

    }

    // Output json for our calendar
    echo json_encode($events);
    exit();

} catch (PDOException $e){
    echo $e->getMessage();
}

?>
4

1 回答 1

1

为了解决解析的问题，我不得不添加 tooltip.js 和 popper.js（我的笨头忘了这样做）

现在，对于渲染的问题，我发现css元素没有增加它的不透明度，因此，它确实渲染了，我只是看不到它。我所做的只是设置一个标签：

<style>
.tooltip { opacity: 1; }
</style>
于 2019-05-05T19:21:07.563 回答