15

私はjqueryfullcalendarを使用していますが、うまく機能します。私のイベントはajax呼び出しから着信し、jsonとして返されます。

サーバー全体を更新せずにクライアント側からイベントを追加する方法があるかどうかを調べようとしています。

コードに新しいイベントを追加する（データベースに追加する）ことができますが、UIを更新してこの新しいイベントを表示する方法を知る唯一の方法は、refetcheventsを呼び出すことです（ただし、これにより、1か月前のすべてがリロードされます。サーバー。

とにかく、1か月のイベントの更新を回避するために、すべてのクライアント側で追加のイベントに固執することができますか？

removeEventsメソッド（idフィルターを使用）でイベントを1つずつ削除できるようですが、イベントの追加に相当するものはありません。

アップデート：

以下の両方の答えがうまくいったので、フォローアップの質問があります。（別の質問を作成する意味がありませんでした）。クライアント側で単一のイベントを「更新」するための推奨される方法を見たかったのです。同じIDのイベントで「renderEvent」を呼び出そうとしましたが、カレンダーに新しいイベントが作成されます。

答えは次のようになります。UpdateEventメソッドが答えになると思いますが、これはeventClick内にいる場合にのみ機能するようです（新しいイベントオブジェクトを作成し、IDを設定し、フィールドを変更して呼び出すことはできません。アップデート。

 http://arshaw.com/fullcalendar/docs/event_data/updateEvent/

以下の「クライアント側の追加」イベントロジックのように、クライアント側からイベントを更新するための推奨される方法はありますか？

今、私はこのようなイベントで削除して再読み込みしています：

       $('#calendar').fullCalendar('removeEvents', data.Event.id);
       $('#calendar').fullCalendar('renderEvent', data.Event, true);
4

8 に答える 8

40

クライアント側のイベントをfullCalendarに追加するには、次のように呼び出すことができます。

var myCalendar = $('#my-calendar-id'); 
myCalendar.fullCalendar();
var myEvent = {
  title:"my new event",
  allDay: true,
  start: new Date(),
  end: new Date()
};
myCalendar.fullCalendar( 'renderEvent', myEvent );

私はこのコードをテストしていませんが、これで作業は完了します。

于 2012-04-04T18:52:39.270 に答える
9

これが私が使用するコードです：

function addCalanderEvent(id, start, end, title, colour)
{
    var eventObject = {
    title: title,
    start: start,
    end: end,
    id: id,
    color: colour
    };

    $('#calendar').fullCalendar('renderEvent', eventObject, true);
    return eventObject;
}
于 2012-04-06T15:02:13.083 に答える
4

これはどう？

$("#calendar").fullcalendar('addEventSource', yourEvent);
于 2013-09-16T20:17:06.810 に答える
1

私はあなたのような既存のイベントを編集しようとしましたが、私の場合は同じIDを使用する必要があるため、イベントを削除して別のイベントを作成することはできませんでした。

http://arshaw.com/fullcalendar/docs/event_data/updateEvent/のドキュメントに従って ください

文に渡す必要のあるイベントがわかりました：$（'＃calendar'）。fullCalendar（'updateEvent'、eventObject）; オブジェクトにすることはできません。これはフルカレンダーのイベントである必要があります。そのため、eventClickイベントには最適ですが、これらのイベントの外部では機能しません。

fullCalendarイベントの外でそれを使用するために、これは私のために働くコードです：

function updateEvent(id, title, date) {

    i = id;

    /*This is the id of the event on full calendar,
    in my case i set this id when I create each event*/

    event = $('#calendar').fullCalendar( 'clientEvents', [i] )[0];
    /*This method returns an array of object with id == i
    That's why is necessary to aggregate [0] at the end 
    to get the event object.*/

    if (event != null){
        //make your modifications and update
        event.title = title;
        event.start = date;
        $('#calendar').fullCalendar( 'updateEvent', event );
    }
}

それが誰にとってもうまくいくことを願っています！

于 2013-09-12T20:08:19.457 に答える
1

ポストバックなしで更新するために私が見つけた最良の方法は

 $('#calendar').fullCalendar('removeEvents', data[0].id);
 $('#calendar').fullCalendar('addEventSource', data);

データは「removeEvents」のIDまたはフィルターである必要があります http://fullcalendar.io/docs/event_data/removeEvents/

データは「addEventSource」の配列/URL/関数である必要がありますhttp://fullcalendar.io/docs/event_data/addEventSource/

于 2015-03-01T10:01:08.147 に答える
0

イベントを更新するためにイベントを追加および削除する必要はありません。カレンダーからイベントを取得し、それをupdateEventメソッドに渡す必要があります。

    function updateCalanderEvent(id, start, end, title, colour)
    {
        var eventObject = $('#calendar').fullCalendar( 'clientEvents', id )

        if (eventObject != null)
        {
            eventObject.title = title;
            eventObject.start = start;
            eventObject.end = end;
            eventObject.color = colour;

            $('#calendar').fullCalendar( 'updateEvent', eventObject );
        }
        return eventObject;
    }
于 2012-04-09T19:42:34.063 に答える
0

ajaxの場合

function DeploySchedule(){
    $.ajax({
        type: "POST"
        , url: "/Services/ScheduleService.svc/DeploySchedule"
        , contentType: "application/json; charset=utf-8"
        , dataType: "json"
        , success: function (result) {
            $('#calendar').fullCalendar('removeEvents');

            result.forEach(function (_row) {
                var event = new Object();
                event.title = _row.TrackingNumber + " (" + _row.Worker + ")";
                event.start = _row.Date;
                event.WorkerGuid = _row.WorkerGuid;
                event.ScheduleGuid = _row.ScheduleGuid;
                event.TrackingNumber = _row.TrackingNumber;
                event.Worker = _row.Worker;
                $('#calendar').fullCalendar('renderEvent', event);
            });
        }
        , error: function (xhr, status, error) { // if error occure
            alert(xhr.responseText);
        }
        , complete: function () {
        }
    });
}
于 2018-04-03T01:14:08.463 に答える
0

カレンダーを初期化してから、クリックイベントを追加します。

document.addEventListener('DOMContentLoaded', function () {

     var calendarEl = document.getElementById('calendar');

     var calendar = new FullCalendar.Calendar(calendarEl, {/*OPIONS*/});

     calendar.render();

     calendar.on('dateClick', function(info) {

         addNew(info);
     });
});

カレンダーにイベントを追加します。

function addNew(info){
     var myEvent = {
         title:"my new event",
         start: info.dateStr,
         end: info.dateStr
     };
     calendar.addEvent(myEvent);
}
于 2020-06-02T12:41:59.797 に答える