10

私は、MS SharePoint の代替として FullCalendar v1.5.3 を使用しています。

カレンダー イベントのソースを再レンダリングしようとしています。たとえば、ページがデフォルトでロードされるとき、これは ajax 呼び出しです。

/calendar/events/feedTasks?start=1338094800&end=1341118800&_=1339103302326

選択ボックスを使用してイベント ソースを変更し、(別のテーブルからプルされた) タスクのみを表示するため、選択後に ajax 呼び出しが次のように変更されます。

/calendar/events/feedEvents?start=1338094800&end=1341118800&_=1339103302326

これは機能します。ただし、現在のカレンダー イベント ソースを変更するだけでなく、重複したカレンダー テーブルを作成します (現在のカレンダーのdiv class="fc-content" div上に新しいテーブルを作成します)。

これは私がこれまでに持っているものです:

$("#TaskSelector").change(onSelectChange);   
    function onSelectChange(){
        $('#calendar').fullCalendar({
            events: '/calendar/events/' + $('#TaskSelector').val()
        });
    }
});

私は何が欠けていますか？

4

4 に答える 4

20

removeEventSource()と呼ばれるいくつかのメソッドがありaddEventSource()、ソースリストを微調整することができます。月のビューでソースの1つを非表示にする必要があるという同様の状況がありましたが、他のコンテキストで表示しました。これを実現するには、eventSources配列の要素を削除して再追加するのが最も簡単な方法でした。

    var fcSources = {
        courses: {
                    url: base+'accessfm/calendar/courses',
                    type: 'GET',
                    cache: true,
                    error: function() { alert('something broke with courses...'); },
                    color: 'purple',
                    textColor: 'white',
                    className: 'course'
                },
        requests: {
                    url: base+'accessfm/calendar/requests',
                    type: 'GET',
                    cache: true,
                    error: function() { alert('something broke with requests...'); },
                    textColor: 'white',
                    className: 'requests'
                },
        loads:  {
                    url: base+'accessfm/calendar/loads',
                    type: 'GET',
                    cache: true,
                    error: function() { alert('something broke with loads...'); },
                    color: 'blue',
                    textColor: 'white',
                    className: 'loads'
                }
    };
<snip>
    $('#fullcalendar').fullCalendar({
        header: {
                    left: 'title',
                    center: 'agendaDay,agendaWeek,month',
                    right: 'today prev,next'
                },
        defaultView: 'agendaWeek',
        firstDay: 1,
        theme: true,
        eventSources: [ fcSources.courses, fcSources.requests, fcSources.loads ],
        viewDisplay: function(view) {
            if (lastView != view.name){ // view has been changed, tweak settings
                if (view.name == 'month'){
                    $('#fullcalendar').fullCalendar( 'removeEventSource', fcSources.loads )
                                      .fullCalendar( 'refetchEvents' );;
                }
                if (view.name != 'month' && lastView == 'month'){
                    $('#fullcalendar').fullCalendar( 'addEventSource', fcSources.loads );
                }
            }
            lastView = view.name;
        }
    });

このコードをコピーして貼り付けるだけでは、問題が正確に解決されるわけではありません。しかし、あなたはそれからいくつかのアイデアを取り入れることができるはずです。ソースに合わせてハッシュを微調整してfcSourcesから、fullCalendarオブジェクトをソースの1つだけでインスタンス化し、removeEventSourceandaddEventSourceメソッドを使用してスワップします。

refetchEvents()ディスプレイが正しく再レンダリングされることを確認するために必要な-の使用にも注意してください。

于 2012-06-08T00:09:49.040 に答える