17

Fullcalendar を Twitter のブーストラップ ポップオーバーで動作させようとしています。
イベントをクリックすると、ポップオーバーに詳細が表示されます。
最初に、この小さなスニペットを Fullcalendar に追加しました。

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

しかし今、私は2つの問題に遭遇しました:

  1. ポップオーバーが Fullcalendar の境界でカットされるため、Fullcalendar は、overflow:hidden などを持つ div 内にあります。どうすれば修正できますか？
  2. 問題 2 と同様に、イベントが Fullcalendar グリッド内にある位置に応じて、関数を介してポップオーバーを上、左、右、または下に配置したいと考えています。どうすればそのような機能を実行できますか?

ありがとう！

4

4 に答える 4

20

バージョン 2.3 から、ブートストラップには、特定の要素にポップオーバーを追加するポップオーバー用の「コンテナ」オプションが追加されました。

{container:'body'}本体に追加するために追加するだけです

$this.popover({html:true,title:event.title,placement:'top',container:'body'}).popover('show');
于 2013-04-03T13:05:22.643 に答える
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

于 2013-09-24T04:52:25.870 に答える