Использование fullcalendar в bootstrap popover

Question

В настоящее время я использую bootstrap 2.3.2, и я хочу добавить popover, содержащий календарь (используя fullCalendar) в navbar.

Для этого я создал элемент навигации (называемый «TimeTop») и добавил popover, используя опцию html для контента.

<div class="navbar navbar-inverse"> 
    <div class="navbar-inner"> 
     <a class="brand" href="#">Title</a> 
     <form class="navbar-search pull-right"> 
      <input type="text" class="search-query" placeholder="Search"> 
     </form> 
     <ul class="nav pull-right"> 
      <li><a id="timeTop" href="#">11:37</a></li> 
     </ul> 
    </div> 
</div> 

Добавление календаря был следующий шаг:

$('#timeTop').popover({ 
    "placement" : "bottom", 
    "html" : true, 
    "title" : "fullcalendar", 
    "content" : function() { 
     var contentHolder = $('<div />'); 
     var calendar = $('<div />', { 
      "id" : "calendar" 
     }); 
     calendar.fullCalendar({}); 
     contentHolder.append(calendar); 
     return contentHolder.html(); 
    } 
}); 

Эта работа (мой календарь добавлено в мой пирог), но я сталкиваясь с проблемой отображения. Мой popover не показывает мой календарь, только заголовки.

Я сделал скрипку воспроизводящей моей проблемы: http://jsfiddle.net/rqhWR/5/

Вот, у меня есть 2 календарей:

• один в пироге, показывая только календарь заголовок.

• один в главном div, также показывающий только заголовок календаря.

(Это, кажется, та же самая проблема. Использование кода в локальной странице будет показано основное содержание, содержащее календарь и поповер, содержащий только заголовки).

Я знаю о существовании fullCalendar ('render'), но я не мог заставить его работать в моем случае (я не знаю, когда отображается мой popover).

Моя цель состоит в том, чтобы иметь fullcalendar для пирог с результатом, как это: http://jsfiddle.net/pYGBm/75/

Большое спасибо за вашу помощь.

Answer 1

Было 2 проблемы. Во-первых, версия fullcalendar, которую вы использовали (1.5.1), устарела. Обновление до 1.6.4 исправило проблему основного календаря, не загружаемого.

Вторая проблема, по-видимому, вызвана тем фактом, что когда календарь инициализирован, на самом деле он еще не виден, поэтому я предполагаю, что есть некоторые проблемы, которые вычисляют ширину/высоту. Инициализация календаря после создания popover, похоже, исправляет это. Благодаря this answer, я смог добавить обратный вызов для создания popover.

Вы можете увидеть обновленный рабочий пример здесь: http://jsfiddle.net/rqhWR/9/

var tmp = $.fn.popover.Constructor.prototype.show; 
$.fn.popover.Constructor.prototype.show = function() { 
    tmp.call(this); 
    if (this.options.callback) { 
    this.options.callback(); 
    } 
} 

$('#timeTop').popover({ 
    "placement" : "bottom", 
    "html" : true, 
    "title" : "fullcalendar", 
    "content" : function() { 
     var contentHolder = $('<div />'); 
     var calendar = $('<div />', { 
      "id" : "calendar" 
     }); 
     contentHolder.append(calendar); 
     return contentHolder.html(); 
    }, 
    callback: function() { 
     var calendar = $("#calendar"); 
     calendar.fullCalendar({}); 
    } 
}); 

$('#calendar2').fullCalendar({}); 

Есть еще некоторые вопросы (например, календарь повторно инициализирует каждый раз при нажатии поповера - не может быть желательны) и коды очистки необходимо, но я надеюсь, что это шаг к тому, чего вы пытаетесь достичь.