web-dev-qa-db-ja.com

jquery fullcalendarでは、月全体を更新せずに新しいイベントを追加できますか？

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

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

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

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

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

更新：

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

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

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

以下の「クライアントサイドの追加」イベントロジックと同様に、クライアントサイドからイベントを更新する推奨方法はありますか？

現在、私はこのようなイベントを削除して読み直しています：

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

クライアント側のイベントを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 );

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

40
Charles Ovando

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

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;
}
9
Sheridan

これはどう？

$("#calendar").fullcalendar('addEventSource', yourEvent);
4
patz

私がポストバックなしでリフレッシュするのを見つけた最良の方法は

 $('#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/

1
Adam Tremblay Lavoie

私はあなたのような既存のイベントを編集しようとしていましたが、私の場合は同じ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 );
    }
}

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

1
Oswaldo

更新するためにイベントを追加および削除する必要はありません。カレンダーからイベントを取得して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;
    }
0
Sheridan

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 () {
        }
    });
}
0
MyHealingLife