2

json フィードで fullcalendar を使用しています。コードは次のとおりです。

$('#calendar').fullCalendar({
        theme: true,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: true,
        events: {
            url: '/EventInfo/GetEventsByEmployee',
            cache: false,
            lazyFetching:true,
            type: 'POST',
            data: {
                empId: $('#eventownerId').val()
            },
            error: function () {
                alert('there was an error while fetching events!');
            },               
        },
        dayClick: function (date, allDay, jsEvent, view) {
            displayDayEvents(date, allDay, jsEvent, view);
        },
        eventRender: function (event, element) {
            element.find('.fc-event-time').hide();
            element.attr('title', event.tip);
        }
    });

ここでは、データ フィールドを介してドロップ ダウン コントロールの選択した値を「empId: $('#eventownerId').val()」として渡しています。ページの読み込み時に正しいデータを返します。ユーザーがドロップダウンリストからオプションを選択したときに、カレンダーデータをリロードしたいと思います。この目的のために、次のコードを使用しました

$('#eventownerId').change(function (e) {            
        $('#calendar').fullCalendar('removeEvents');
        $('#calendar').fullCalendar('refetchEvents');            
    });

しかし、refetch は古いデータ (つまり、ドロップ ダウン コントロールの初期値) で json メソッドを呼び出します。ドロップ ダウンの選択された値が変更されていても。ドロップダウン コントロールの現在の値を渡し、フルカレンダーをリロードするにはどうすればよいですか?

4

2 に答える 2

8

次のように、fullcalendar の destroy を呼び出して問題を管理しました。

$('#dropdownlistId').change(function (e) {            
        $('#calendar').fullCalendar('destroy');           
        RenderCalendar($(this).val());
    });

RenderCalendar() は

function RenderCalendar(eId) {
    $('#calendar').fullCalendar({
        theme: true,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: true,
        events: {
            url: '/EventInfo/GetEventsByEmployee',
            cache: true,
            type: 'POST',
            data: {
                empId: eId
            },
            error: function () {
                alert('there was an error while fetching events!');
            },
        },
        dayClick: function (date, allDay, jsEvent, view) {
            displayDayEvents(date, allDay, jsEvent, view);
        },
        eventRender: function (event, element) {
            element.find('.fc-event-time').hide();
            element.attr('title', event.tip);
        }
    });
}

これを使用して問題を管理しましたが、これが正しい方法であるかどうかはわかりません。つまり、カレンダーを破棄して再作成します。私はまだ正しい方法を探しています

于 2013-05-11T05:45:31.150 に答える
0

var で ID を取得してから、このように実行しようとしましたか?

var id = $('#eventownerId').val(); //outside

$('#calendar').fullCalendar({
    theme: true,
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    editable: true,
    events: {
        url: '/EventInfo/GetEventsByEmployee',
        cache: false,
        lazyFetching:true,
        type: 'POST',
        data: {
            empId: id // var in here
        },
        error: function () {
            alert('there was an error while fetching events!');
        },               
    },
    dayClick: function (date, allDay, jsEvent, view) {
        displayDayEvents(date, allDay, jsEvent, view);
    },
    eventRender: function (event, element) {
        element.find('.fc-event-time').hide();
        element.attr('title', event.tip);
    }
});

別のことは、ID が実際にドロップダウンから異なる ID を取得しているかどうかを確認します。GetEventsByEmployee メソッドを表示できますか? 乾杯

于 2013-05-10T19:44:31.887 に答える