1

私は現在、ブートストラップ 2.3.2 を使用しており、navbar に (fullCalendar を使用して) カレンダーを含むポップオーバーを追加したいと考えています。

そのために、ナビゲーション アイテム (「timeTop」と呼ばれる) を作成し、コンテンツの 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();
    }
});

これは機能します (カレンダーがポップオーバーに正しく追加されます) が、表示の問題が発生しています。ポップオーバーにはカレンダーが表示されず、ヘッダーのみが表示されます。

私は自分の問題を再現するフィドルを作りました: http://jsfiddle.net/rqhWR/5/

ここに、2 つのカレンダーがあります。

  • 1 つはポップオーバーにあり、カレンダー ヘッダーのみが表示されます。

  • メイン div に 1 つあり、カレンダー ヘッダーのみも表示されます。

(これは同じ問題のようです。ローカル ページでコードを使用すると、カレンダーを含むメイン コンテンツと、ヘッダーのみを含むポップオーバーが表示されます)。

fullCalendar('render') の存在は認識していますが、私の場合はうまくいきませんでした (ポップオーバーがいつ表示されるかわかりません)。

私の目標は、次のような結果で、ポップオーバーのフルカレンダーを持つことです: http://jsfiddle.net/pYGBm/75/

どうもありがとうございました。

4

1 に答える 1

1

2つの問題がありました。まず、使用していた fullcalendar のバージョン (1.5.1) が古くなっています。1.6.4 にアップデートすると、メインのカレンダーが読み込まれない問題が修正されました。

2 番目の問題は、カレンダーが初期化されたときに実際にはまだ表示されていないことが原因のようです。そのため、幅/高さの計算に問題があると推測しています。ポップオーバーが作成された後にカレンダーを初期化すると、これが修正されるようです。この回答のおかげで、ポップオーバーの作成にコールバックを追加できました。

ここで更新された実際の例を見ることができます: 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({});

まだいくつかの問題 (ポップオーバーをクリックするたびにカレンダーが再初期化されるなど、望ましくない場合があります) とコードのクリーンアップが必要ですが、これがあなたが達成しようとしていることに向けた一歩になることを願っています.

于 2013-10-04T20:14:49.730 に答える