web-dev-qa-db-ja.com

TwitterのフルカレンダーBootstrap Popover

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

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

しかし今、私は2つの問題に遭遇します：

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

ありがとう！

twitter-bootstrapfullcalendarpopover
16
Merion

バージョン2.3以降bootstrapは、ポップオーバーを特定の要素に追加するポップオーバー用の「コンテナ」オプションを備えています。

{container:'body'}を追加するだけで、本文に追加できます

$this.popover({html:true,title:event.title,placement:'top',container:'body'}).popover('show');
19
clemnt

このコードは私を助けました

$('#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,
        });
    }
});

ブートストラップバージョン-2.3.2、フルカレンダー-1.6.4

https://groups.google.com/forum/#!topic/Twitter-bootstrap-stackoverflow/9pkC3_lodmY から取得

13
dav

ポップオーバーをカレンダーコンテナに追加して、カレンダーと一緒にポップオーバーをスクロールします。

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

数日間 ;

        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');
    },

イベントの場合;

        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();
            }
        });
    },

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>
0
Reemi