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

Question

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

我正在使用maddHatter \ laravel-fullcalendar

刀片模板中的My 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演示包括provide the popover functionality的Bootstrap的JavaScript和CSS文件。根据您的显示，您的版本没有。

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