0

Jquery Fullcalendar を ajax 呼び出しでリロードする必要がありますが、別のカレンダーを再作成せずにカレンダーを再バインドする方法がわかりません。基本的に、以下で行っていることは、GetSchedule メソッドで日付をフェッチしてカレンダー イベントを初期化することです。

eventDrop が発生すると、GetSchedule メソッドから新しいデータ セットをフェッチし、フルカレンダーを再度リロードする必要があります。これは、一部のイベントが一部の日付にあると想定されていないためです。

以下のコードは、eventDrop が発生したときに別のフルカレンダーを再作成します。誰か親切にアドバイスしてください。ありがとう。

  var sDate;
  var buildingEvents;

  function initialize(loadevents) {
        $.ajax({
            type: "POST",
            url: "../Account/WebServices/WebServices.asmx/GetSchedule",
            data: "{'custId': '" + $('#<%= hdnCustId.ClientID %>').val() + "' }",
            contentType: "application/json; charset=utf-8",
            async: false,
            dataType: "json",
            success: function(result) { sDate = result.d; }
        });

        var allEvent = "";
        buildingEvents = $.map(sDate, function(item) {
            allEvent += item + "&";

            var SplitResult = item.split("||");
            var eventInfo = new Array();
            for (var i = 0; i < SplitResult.length; i++) {
                eventInfo[i] = SplitResult[i];
            }

            var SplitResult_0 = eventInfo[0].split("|");

            $('#<%= hdnAllCalendarEvents.ClientID %>').val(allEvent);

            return {
                id: eventInfo[0],
                start: eventInfo[1],
                title: eventInfo[2] + ' ' + '(' + ' ' + SplitResult_0[4] + ' ' + ')'
            };
        });

        if (loadevents) {
            $('#calendar').fullCalendar({
                events: buildingEvents,
            });
        }
    }


       $(document).ready(function () {

        initialize(false);

        $('#calendar').fullCalendar({
            editable: true,
            eventDragStart: function (event, jsEvent, ui, view) {
                var d = new Date();
                d = event.start;
                $('#<%= hdnSwapDayFrm.ClientID %>').val(d.toString('MM/dd/yyyy'));
            },
            eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc) {
                $('#<%= hdnOrderNpkSchSetDailyNameId.ClientID %>').val(event.id);
                $('#<%= hdnAddDays.ClientID %>').val(dayDelta);

                $.ajax({
                    type: "POST",
                    url: "../Account/WebServices/WebServices.asmx/SwapDay",
                    data: "{'hdnOrderNpkSchSetDailyNameId': '" + $('#<%= hdnOrderNpkSchSetDailyNameId.ClientID %>').val() + "', 'hdnAddDays': '" + $('#<%= hdnAddDays.ClientID %>').val() + "', 'hdnAllCalendarEvents': '" + $('#<%= hdnAllCalendarEvents.ClientID %>').val() + "', 'hdnAddDays': '" + $('#<%= hdnAddDays.ClientID %>').val() + "', 'hdnSwapDayFrm': '" + $('#<%= hdnSwapDayFrm.ClientID %>').val() + "'}",
                    contentType: "application/json; charset=utf-8",
                    async: false,
                    dataType: "json",
                    success: function(result) {

                    }
                });

                initialize(true);
            },
            events: buildingEvents
        });
    });
4

1 に答える 1

1

eventsエンドポイントを呼び出す関数を提供できます。

$('#calendar').fullCalendar({
    events: function(start, end, callback) {
        $.ajax({
            url: '...',
            success: function(data) {
                var events = parseEvents(data);
                callback(events);
            }
        });
    }
});

そして、eventDrop関数内で を呼び出すことができるrefetchEventsため、FullCalendar はevents関数を再度呼び出して、カレンダーを再レンダリングします。

$('#calendar').fullCalendar('refetchEvents');

ここで関連ドキュメントを確認できます: events (関数として)およびrefetchEvents。

于 2013-08-08T08:59:59.597 に答える