0

簡単な背景:

  • 米国のいくつかの地域向けに有給休暇 (PTO) カレンダーを作成しています。
  • Zend フレームワーク、jquery、fullcalendar、Expand/All by www.adipalaz.com、およびカスタムの「more...」リンクを使用しています。
  • 各タブにカレンダーの新しいインスタンスを持つ3つの異なるjqueryタブがあります(レベル1)
  • 各タブには、PTO に関連するさまざまなトピックがあり、3 つのアコーディオン セクションがあります
  • タブごとに 1 つのアコーディオン セクションに、カレンダーの結果をフィルター処理するためのフィルターがあります。
  • タブごとに 1 つのアコーディオン セクションにカレンダーがあります (レベル 2)
  • 最初のカレンダーは、JSON 呼び出し/フィードを介して 2 つの異なるイベント ソースから取得します
  • このカレンダーは、地域に応じて有給休暇を取得します
  • 地域は終日イベントとして表示されます
  • 各「イベント」は、www.adipalaz.com (レベル 3) を使用した展開/折りたたみです。
  • www.adipalaz.com を使用して各「イベント」を展開または折りたたむと、AJAX 呼び出しがその地域に関連するすべての PTO を取得します。
  • 拡張された各 AJAX 呼び出しは、カスタムの「詳細...」リンクがクリックされない限り、追加情報に関する詳細を非表示にします (レベル 4)
  • 各カスタム more リンクにもいくつかのアクションがあります (レベル 5)

これで、上記のすべてが機能します。

「レベル 3」以上を処理する .click 関数があります。この .click 関数の一部は AJAX 呼び出しであり、別の部分は z-index を取得および設定して、「レベル 4」データが他のすべての展開されていない「レベル 3」データの上に表示されるようにします。
これまでのところ、その機能は問題ありません。問題は、基礎となるすべてのデータを表示する必要があることです。

私の多層的な問題

  1. クリックされた「レベル 3」に関係なく、週とイベントがすべて表示されるように、カレンダー上のすべてのイベントを再レンダリングします。
  2. $('#calendar1').fullCalendar( 'rerenderEvents'); イベントを再レンダリングする前に表示された「レベル 3」のデータを失わないこと。

質問を視覚的に説明する画像がありますが、これが最初の投稿であるため、アップロードできません。私を助ける方法があり、写真を見る必要がある場合は、私に知らせてください.

現在、これは私がこの問題に対して持っているすべてです:

//POPS THE OPEN ITEM UP IN Z-INDEX
$(uniqueID).parent().parent().css('z-index',9);

//THIS FINDS OUT WHAT TO ADD
changeSizeOfDiv = $(uniqueID).next('.fc-event-names').html(data).outerHeight()
     + $('.fc-week' + level + ' .fc-sun').outerHeight();

//THIS ALTERS THE ROW SIZE
$('tr.fc-week' + level).css('height',changeSizeOfDiv);

次の行「top: #px;」を動的に更新する方法がまだわかりません。地域をクリックした後。changeSizeOfDiv 関数を使用してトップを押し下げるだけでうまくいくと思いますが、今のところ、これをエレガントに行うことは言うまでもなく、これを行う方法がわかりません。

どんなアイデアでも大歓迎です。
ありがとう

4

1 に答える 1

0

ですから、多くの助けを借りて、これが私が思いついたものであり、魅力のように機能します. これをカレンダーの初期化に追加しました

eventClick: function(event, element) {
    if (typeof event.originalTitle == 'undefined') {
        event.originalTitle = event.title;        
    }

    if (event.loaded) {
        event.title = event.originalTitle;
        event.loaded = false;
        $('#calendar1').fullCalendar('updateEvent',event);
    } else {
        $.ajax({
            url: regionNamesUrl + getFilterUrlPart(event.segmentDate,event.region),
            dataType: 'html',
            cache: false,
            success: function(data){                                
                event.title = event.originalTitle + '<br/><br/>' +data;
                event.loaded = true;

                $('#calendar1').fullCalendar('updateEvent',event);

                clicker(event,'approved');
                clicker(event,'cancelled');
            },
            error: function(data){
                alert('An error has occurred retrieving data from the server.  Try reloading the page.');
            }
      });
    }                
}
于 2012-05-31T18:34:43.763 に答える