Open TwitterBootstrap 3.0 popover on dayClick of Arshaw fullcalendar

Question

I am trying to integrate Popovers from Bootstrap with the full calendar, But the popover doesn't show up. The code isnspector shows that the HTML is modified and the attributes data-original-title="" title="" are set so the code is working but popover doesn't show up.

Here is the code I am using:

$(document).ready(function() {
    $('#myCalendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay',
        },
        events: './jobs/event-feed.php',
        editable: true,
        selectable: true,
        dayClick: function(start, end, allDay, jsEvent, view) {

            $(this).popover({
                html: true,
                placement: 'top',
                title: function() {
                    return $("#popover-head").html();
                },
                content: function() {
                    return $("#popover-content").html();
                }
            });
        }

    });

});

#popover-head and #popover-content

<div id="popover-head" class="hide">some title</div>
<div id="popover-content" class="hide">
    <form>
          <input type="text" name="asa" value="asa" />
    </form>
</div>

References

Adding qtip to full calendar - How to access a calendar day
Adding form to popover - HTML form inside a bootstrap popover

JSFIDDLE

http://jsfiddle.net/tUNSW/2/

score 3 · Accepted Answer · answered Sep 24 '13 at 09:58

3

try this

$(this).popover({
            html: true,
            placement: 'top',
            title: function() {
                return $("#popover-head").html();
            },
            content: function() {
                return $("#popover-content").html();
            }
        });
$(this).popover('show');

answered Sep 24 '13 at 09:58

Arun Raj

969
8
19

Thanks! that worked. But can you explain why `$(this).popover('show');` was required? While the same code works if applied on an anchor tag(Example in JSFIDDLE) – Nikhil Bhandari Sep 24 '13 at 10:08
$(this).popover({ html: true, placement: 'top', title: function() { return $("#popover-head").html(); }, content: function() { return $("#popover-content").html(); } }); this line assign popover to $(this). then next click show popover. but current click do not show anything. $(this).popover('show'); --> fire the popover (click event). plz mark answer if ur problem solved. – Arun Raj Sep 24 '13 at 10:13

score 0 · Answer 2 · answered Jul 04 '14 at 09:42

try this if popover do not hide by clicking.

                     $(this).popover({

                      html: true,
                      placement: 'top',
                      title: function() {
                          return $("#popover-head").html();
                      },
                      content: function() {
                          return $("#popover-content").html();
                      }
                  });
          $(this).popover('toggle');

Open TwitterBootstrap 3.0 popover on dayClick of Arshaw fullcalendar

2 Answers2