phplaravelfullcalendarpopoverfullcalendar-2

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


In my application, I am trying to use FullCalendar to display events. Specifically, I'm trying to replicate the demo example they provide.

I am making use of maddHatter\laravel-fullcalendar

My Laravel/PHP code in a blade template to generate the calendar is as follows:

            $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() !!}

I can get the calendar to display with my events just fine when I do not have the ->setCallBacks() portion above.

Adding it in results in the following error when looking at the console in 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)

What am I missing?

If there is anything else you need to know, ask and I will provide it.


Solution

  • The CodePen demo you've linked to includes Bootstrap's JavaScript and CSS files, which provide the popover functionality. Your version doesn't, from what you've shown.

    Check what's included in the CodePen (it's in the Settings area) and make sure you've got the same or very similar version of Bootstrap available to your page.