Bootstrap 3 Popover in Angular-UI Calendar

Question

I'm using Angular-UI Calendar directive and Bootstrap 3 popover to attempt to create a popover on click. I tried using the day click event:

 $scope.dayClick = function(event, allDay, jsEvent, view){
    jsEvent.stopPropagation();
    jsEvent.preventDefault();
    var eventID = event.getDate();
    eventID = jsEvent.target; 
    $(eventID).popover({
      html: true,
      title: 'Hello',
      placement: 'bottom',
      content: '<button id="close-me">Close Me!</button>'
    }).parent().delegate('button#close-me', 'click', function() {
      jsEvent.stopPropagation();
      $(eventID).popover('hide');
      return false;
    });

    $(eventID).popover('show');
  };

The problem with this way is that it causes the calendar cells to push to the right at times or duplicate. Is there a better way I could attach the popover to the existing calendar?

Answer 1

Are you trying to create pop-over when any day is clicked? If yes, then dayClick is the correct way for a popover.

Can you create a Plunk to provide more details.

I think the problem may be due to CSS.