bootstrap popover in fullcalendar located sometimes on bottom, sometimes in middle of day

Question

I have a bootstrap popover showing on a dayClick event with it's placement as 'bottom', but some of the clicks show the popover at the bottom and some show it in the middle of the day. Code and pics shown below. It seems like dates 22-28 show the popover on the bottom like its supposed to but the dates above the 22nd and below the 28th show the popover in the middle like in the pics below.

$('#fullcalendar').fullCalendar({
        header: {
            left: 'prev,next', //today',
            center: 'title',
            //right: 'month,agendaWeek,agendaDay'
            right: ''
        },
        defaultView: 'month',
        editable: true,
        allDaySlot: false,
        selectable: true,
        slotMinutes: 15,
        events: '/ManageSpaces/GetDiaryEvents/',
        
        //eventClick: function (data, event, view) {
        //}
        dayClick: function (data, event, view) {
            $(this).children().popover({
                html: true,
                placement: 'bottom',
                container: 'body',
                title: function () {
                    return $("#popover-head").html();
                },
                content: function () {
                    return $("#popover-content").html();
                }
            });
            if ($calPopOver)
                $calPopOver.popover('destroy');
            $calPopOver = $(this).children().popover('show');
        }
    });

<div id="eventcalendar">
            <div id='fullcalendar' style="width:65%"></div>
            <div id="popover-head" class="hide">some title</div>
            <div id="popover-content" class="hide">
                <form>
                    <input type="text" name="test" value="test" />
                </form>
            </div>
        </div>