Laravel 5.8 + FullCalendar + Popover：尝试复制演示失败并出现弹出错误

Question

在我的应用程序中，我尝试使用 FullCalendar 来显示事件。具体来说，我正在尝试复制他们提供的 demo example。

我正在使用 maddHatter\laravel-fullcalendar

我在 blade 模板中生成日历的 Laravel/PHP 代码如下：

            $cal_events = [];
            foreach ($events as $key => $value) {
                $cal_events[] = Calendar::event(
                    $value->eventName,
                    false,
                    new \DateTime($value->eventStartDate),
                    new \DateTime($value->eventEndDate),
                    $value->eventID,
                    // Add color
                    [
                        'color' => '#0000FF',
                        'textColor' => '#FFFFFF',
                        'url' => env('APP_URL')."/events/$value->slug",
                        'description' => $value->eventDescription,
                    ]
                );
            }

            $calendar = Calendar::addEvents($cal_events)
            ->setCallbacks([
                'eventRender' => 'function(event, element) {
                    element.popover({
                        container: "body",
                        html: true,
                        placement: "top",
                        trigger: "hover",
                        title: "Random Title",
                        content: "Some Content"
                    });
                 }'
            ]);

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
            <b>{!! $header !!} </b>
        </div>
        <div class="panel-body" >
            {!! $calendar->calendar() !!}
        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.js"></script>
{!! $calendar->script() !!}

当我没有上面的 ->setCallBacks() 部分时，我可以让日历与我的事件一起显示。

在 Chrome 中查看控制台时添加它会导致以下错误：

jquery.min.js:2 Uncaught TypeError: element.popover is not a function
at Object.eventRender (1:formatted:83)
at me.U [as trigger] (fullcalendar.min.js:6)
at t.constructor.trigger (fullcalendar.min.js:8)
at t.constructor.resolveEventEl (fullcalendar.min.js:8)
at HTMLAnchorElement.<anonymous> (fullcalendar.min.js:7)
at Function.each (VM2577 jquery.min.js:2)
at r.fn.init.each (VM2577 jquery.min.js:2)
at t.constructor.renderFgSegEls (fullcalendar.min.js:7)
at t.constructor.renderFgSegs (fullcalendar.min.js:7)
at t.constructor.renderEvents (fullcalendar.min.js:7)

我错过了什么？

如果还有什么需要知道的，尽管询问，我会提供。

Answer 1

您链接到的 CodePen 演示包括 Bootstrap 的 JavaScript 和 CSS 文件，其中 provide the popover functionality。从您展示的内容来看，您的版本没有。

检查 CodePen 中包含的内容（它位于“设置”区域）并确保您的页面上有相同或非常相似的 Bootstrap 版本。

Laravel 5.8 + FullCalendar + Popover：尝试复制演示失败并出现弹出错误

Laravel 5.8 + FullCalendar + Popover: Attempting to replicate demo is failing with popover error

php

laravel

fullcalendar

popover

fullcalendar-2