17

I am trying to get Fullcalendar working with twitter boostrap popovers.
if I click an event, i want to show some details in the popover.
So first added this lil snippet to Fullcalendar:

eventClick: function(event, jsEvent, view) {
        $this = $(this);
        $this.popover({html:true,title:event.title,placement:'top'}).popover('show');
        return false;            
    },

But now I run into 2 problems:

  1. Fullcalendar is inside a div that has overflow:hidden or something, because the popover gets cut on the border of Fullcalendar. How do I fix that?
  2. Similar to problem 2 I would like to place the popover via a function on top, left, right or bottom depending on the position where the event is in the Fullcalendar grid. How can i do such a function?

thanks!

2
  • would be great if you could provide fiddle or link to the page.
    – BillPull
    Commented Feb 15, 2013 at 16:56
  • For point 2) I implemented a suboptimal solution for now, which is, if the event happens from sunday to wednesday, I place the popover to the right, else to the left. And if the view.type is Day or agendaDay, I place it on top. That way you usually prevent the popover being cut occluded by anything.
    – Petruza
    Commented Apr 24, 2015 at 14:05

4 Answers 4

20

From version 2.3 bootstrap now has a "container" option for popovers which appends the popover to a specific element.

just add {container:'body'} to append it to the body

$this.popover({html:true,title:event.title,placement:'top',container:'body'}).popover('show');
1
  • This works great unless you scroll the calendar, now the popover remains in the same position relative to the body, but now it's detached from the calendar event.
    – Petruza
    Commented Apr 24, 2015 at 13:44
13

This code helped me

$('#calendar').fullCalendar({
    eventRender: function (event, element) {
        element.popover({
            title: event.name,
            placement: 'right',
            content: + '<br />Start: ' + event.starts_at + '<br />End: ' + event.ends_at + '<br />Description: ' + event.description,
        });
    }
});

bootstrap version - 2.3.2, full calendar - 1.6.4

taken from https://groups.google.com/forum/#!topic/twitter-bootstrap-stackoverflow/9pkC3_lodmY

1
  • For the HTML to render, I also had to add 'html:true' property to the popover. Commented May 28, 2018 at 9:53
4

Append the popover to the calendar container to scroll the popover with the calendar.

            $(jsEvent.target).popover({
                html: true,
                container:'#calendar',
                placement: 'right'
            });
0

For days ;

        dayClick: function (date, jsEvent, view) {
            //return eventCreate(date, null, jsEvent, view);
            var CurrentDay = $(this);

            CurrentDay.popover({
                html: true,
                placement: 'auto',
                title: date.format(),
                container:'#calendar',
                content: function() {
                    setTimeout(function () {
                        CurrentDay.popover('hide');
                    }, 2000);
                    return $("#popover-day").html();
                }
            });
            CurrentDay.popover('toggle');
    },

For Events;

        eventRender: function (event, element, view){
        var dStart = event.title
        element.popover({
            animation: true,
            placement: 'top',
            html: true,
            container: 'body',
            title: dStart,
            trigger: 'click',
            content: function() {
                setTimeout(function () {
                    element.popover('hide');
                }, 2000);
                return $('#popover-content').html();
            }
        });
    },

In your HTML;

<ul id="popover-content" class="list-group" style="display: none">
  <a href="#" id="Eventaaa" class="list-group-item" onclick="aaa();">aaa</a>
  <a href="#" id="Eventbbb" class="list-group-item" onclick="bbb();">bbb</a>
  <a href="#" id="Eventccc" class="list-group-item" onclick="ccc();">ccc</a>
</ul>

<ul id="popover-day" class="list-group" style="display: none">
  <a href="#" id="Dayaaa" class="list-group-item" onclick="fDayaaa();">aaa</a>
  <a href="#" id="Dayyyy" class="list-group-item" onclick="fDayyyy();">yyy</a>
  <a href="#" id="Dayxxx" class="list-group-item" onclick="fDayxxx();">xxx</a>
</ul>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.