2

ページに複数の予定表 Web パーツがあり、タブ付き Web パーツ ゾーンを使用して各予定表をタブに配置しています。

問題は、カレンダー Web パーツがレンダリングされ、AJAX を使用してカレンダー イベントを取得することです。position:absoluteデータがサーバーから返されると、カレンダーに配置するDOM 要素が作成されます。

最初のタブのカレンダーは (表示されているので) 問題ありませんが、他のタブには問題があります。イベントはすべてカレンダーの左上隅にあります (おそらく、DOM 要素が非表示になっているため、イベントの位置を正しく計算できなかったためです)。

この問題を解決するのに最も近いのは、次の JavaScript を使用することです。

SP.UI.ApplicationPages.CalendarInstanceRepository.lookupInstance(instanceId).refreshItems();

これには 2 つの問題があります。1) これは ajax 呼び出しであるため、多少の遅延があり、ユーザーはイベントがカレンダーに「スナップ」されているのを確認します。2) 何らかの理由で、カレンダー自体のレイアウトが奇妙に見えます。 、イベントのある週は、カレンダーの他の週の高さの半分未満としてレンダリングされます。

また、最初の読み込みプロセス中にカレンダーを非表示にしないようにしました (画面外に移動します)。同じ問題が発生していますが、それが機能しても、ユーザーがサイズを変更すると非表示になるカレンダーに問題があります。ブラウザ。

私が本当に必要としているのは、CalendarInstance にすべてを再描画/再計算するメソッドが存在することですが、それはクライアント側でのみ実行されます。

4

1 に答える 1

2

興味のある方のために、回避策を見つけました。

基本的に、タブを表示/非表示にする代わりに、カルーセル (またはスライダー) のように扱いました。基本的に、すべてのタブを表示できるようにし、それらをコンテナーでラップします。コンテナーの高さを設定し、オーバーフローを非表示にするので、実際には一度に 1 つしか表示されません。これは、私の質問で説明したことから極端ではない考えです。なぜそれが機能しなかったのかはわかりませんが、このソリューションは機能しましたが、考え方は基本的に同じです。DOM でカレンダーを非表示にせず、そのうちの 1 つだけをユーザーに表示するだけです。そのようにすることで、SP JavaScript がイベント項目に対して適切な計算を行うことができます。

私が行ったことの単純化されたバージョンを示す簡単なフィドルを作成しました (私のコードはもう少し複雑です)。基本的な DOM 構造は次のとおりです。

<body>
    <ul>
        <li data-tabid="tab1">Tab One</li>
        <li data-tabid="tab2">Tab Two</li>
        <li data-tabid="tab3">Tab Three</li>
    </ul>
    <div id="container">
        <div id="slider">
            <div id="tab1">Tab 1</div>
            <div id="tab2">Tab 2</div>
            <div id="tab3">Tab 3</div>
        </div>
    </div>
</body>
于 2014-01-27T18:40:48.520 に答える