web-dev-qa-db-ja.com

AngularJSUI-カレンダーがカレンダーのイベントを更新しない

Angular UI-Calendarを使用して、カレンダーにいくつかのイベントを表示しています。イベントはカレンダーに正常に表示されています。ただし、イベントの詳細を更新すると、イベントの詳細は実際には変更されますが、変更されません。カレンダー表示で変更（例：開始）。

最初に、イベントの詳細を変更した後、変更された変更を表示するためにページのリロードを実行しましたが、それも機能しました。そのメソッドでは、空の_$scope.events = [];_配列があり、DBからエントリを取得した後に入力しました。

しかし今、私はそのページのリロードを避けたいと思います。したがって、イベントの詳細がモーダルウィンドウから変更されたら、_$scope.events_を使用して_$scope.events = [];_配列の内容をクリアし、次にAPI呼び出しを使用して、_$scope.events_配列に新しいイベントを再度入力します。リストビューに変更されたイベントの詳細が表示されるため、これは正常に機能しています。ただし、カレンダー自体には古いエントリが表示されます。たとえば、startを4月11日から4月13日に変更すると、カレンダーには4月11日のイベントが表示されますが、リストビューには変更されたデータ（4月13日）が表示されます。ページの再読み込みを使用して、これを修正します。つまり、イベントは変更日（4月13日）に表示されます。

ページをリロードせずにカレンダーでもイベントが変更されていることを確認するにはどうすればよいですか？

DBから新しいエントリをフェッチした後にcalendar.fullCalendar('render');を試しましたが、問題は解決しません。

ここにいくつかのコードがあります：

最初にこれを行ってデータをDBに送信し、次にページのリロードを行って更新されたデータを取得しました。 $http.put(url,senddata).success(function(data){$window.location.reload();});

ページのリロードを避けたいので、

_        $http.put(url,senddata).success(function(data){//$window.location.reload();//sends modified data to server
        $scope.events = [];  //clear events array

   $http.get(url2).success(function(data){  //fetch new events from server, and Push in array
  $scope.schedule = data;
          for(var i=0;i<data.length;i++)
          {
            $scope.events.Push({
      idx: data[i].idx,
      title: data[i].title,
      description : data[i].description,
      allDay: false,
      start: new Date(data[i].start), 
      end:  new Date(data[i].end),

      });


     calendar.fullCalendar('render'); //Tried even this, didn't work



          }

        });
_

上記のコードは、変更されたイベントをevent配列にプッシュしてリストビューに表示しますが、ページが再読み込みされるまでカレンダーには古いイベントが表示されます。

angularjscalendarfullcalendar
12
Aniket Sinha

同じ配列インスタンスを維持してみてください。

行う代わりに：

_$scope.events = []_

試してみてください：

$scope.events.slice(0, $scope.events.length);

次に、サーバーリクエストが戻ってきたら、各アイテムを既存の配列に個別に追加します。

for(var i = 0; i < newEvents.length; ++i) { $scope.events.Push(newEvents[i]); }

私がこれを提案する理由は、あなたが説明していることが、カレンダーが古いイベントのリストを保持しているように聞こえるからです。カレンダーはその参照を更新することを知らない可能性があるため、代わりに、同じ参照を維持しながら配列の内容を変更します。

22
Studio4Development

Studio4Developmentの答えを簡単に修正します。 「スライス」ではなく「スプライス」を使用する必要があります。 Sliceは、トリミングされた配列を返します。私たちがやりたいのは、実際には元の配列を変更することです。したがって、次を使用できます。

$scope.events.splice(0, $scope.events.length)

新しいイベントを追加するには：

$scope.events.Push(newEvent)
18
Emeka

これが私のページで同様の問題を修正した方法です。

表示（簡略化、翡翠を使用したメモ）

div#calendarNugget(ng-show="activeCalendar == 'Nugget'" ui-calendar="uiConfig.calendarNugget" ng-model="eventSources")
div#calendarWillow(ng-show="activeCalendar == 'Willow'" ui-calendar="uiConfig.calendarWillow" ng-model="eventSources2")

コントローラー：

Ui-calendarのドキュメントによると、イベントソースの空の配列から始めます。おそらくこれらのeventSourcesの名前をショップ名（柳、ナゲット）に関する名前に変更する必要があることを無視してください

$scope.eventSources = [];
$scope.eventSources2 = [];

次に、httpリクエストを作成し、DBから一連のイベントをプルするファクトリ関数を呼び出します。すべてのイベントには「title」、「start」、「end」プロパティがあります（日付形式が正しいことを確認してください）。また、イベントを追加するカレンダーを指定する「shop」プロパティもあります。

したがって、データを受信した後、2つのローカル配列を作成し、受信したhttpデータをループして、ショップごとにそれらのローカル配列にイベントを割り当てます。最後に、適切なイベントデータを使用してカレンダーを再レンダリングできますaddEventSourceを呼び出すと、fullCalendarのドキュメントに従って自動的に再レン​​ダリングされます

それはこのiircの線に沿って何かに見えます：

function splitShiftsByShop(shifts) {

  var nuggetShifts = [];
  var willowShifts = [];

  for (var i=0; i<shifts.length; i++) {
      if (shifts[i].shop === "Nugget") {

          var nshift = {
            title : shifts[i].employee,
            start : new Date(shifts[i].start),
            end : new Date(shifts[i].end),
            allDay: false
          }

          nuggetShifts.Push(nshift);

      } else if (shifts[i].shop === "Willow") {

          var wshift = {
            title : shifts[i].employee,
            start : new Date(shifts[i].start),
            end : new Date(shifts[i].end),
            allDay: false
          }

          willowShifts.Push(wshift);
      }
  }

  /*render the calendars again*/
    $('#calendarNugget').fullCalendar('addEventSource', nuggetShifts);
    $('#calendarWillow').fullCalendar('addEventSource', willowShifts);

}
3
AlexDelPiero

あなたがあなたの問題の解決策を見つけたかどうかはわかりませんが、私のために働いたのは：

calendar.fullCalendar('refetchEvents');
3
PPR

「eventSource」配列（$ scope.eventSources = [$ scope.completedEvents]）を空にして新しいイベントを再設定した後、イベントが再フェッチされないという同様の問題が発生していました。最初は「removeEvents」を呼び出すことでこれを克服することができました。

uiCalendarConfig.calendars.calendar.fullcalendar('removeEvents')

これはハックなので、さらにいじくり回した後、子配列が変更されたときにイベントが再フェッチされたことがわかりました。

$scope.completedEvents.splice(0, $scope.completedEvents.length)

ソースを確認した後、eventSource配列が監視されていることがわかりますが、「再フェッチ」は発生していません。さらに、私は以下を機能させることができませんでした、

uiCalendarConfig.calendars.calendar.fullcalendar('refetchEvents')
3
Ryan Ruppert

Ui-calendarコードによると、実際にはeventSourcesを監視しますが、実際の個々のソースを監視することはありません。したがって、Push toを実行すると、たとえば$ scope.events（$ scope.eventSources = [$ scope.events]）は、何もトリガーされません。

したがって、イベントを$ scope.eventSources [0]にプッシュします。

$scope.eventSources[0].splice(0, $scope.eventSources[0].length);
$scope.eventSources[0].Push({
 title : title,
 start : start,
 end : end                    
});
1
Niroop

ご存知のとおり、フルカレンダーはJQueryに依存しています。したがって、あなたがする必要があるのは次のようにあなたのカレンダーにIDを置くことだけです：

<div id="calendar" ui-calendar="uiConfig.calendar" class="span8 calendar" ng-model="eventSources"></div>

カレンダーを更新したいときは、次の電話をかけてください。

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

私もしばらくの間これに苦労しました、そしてこれは私のすべての問題を修正しました。これがあなたにも役立つことを願っています！

幸運を！

0
Glen

私はこれを見つけました、そしてそれは私を助けました：

$(id_your_div).fullCalendar('removeEvents'); 
$(id_your_div).fullCalendar('refetchEvents');
0
Eccepiente

しばらくこれにこだわっていました。私のために働いているように見えるものは非常に単純であることが判明しました

グーグルからカレンダーを取得し、イベントフォーマッター関数を実行します。これで新しい配列を定義し、関数の最後でeventSourceを新しい配列と等しく設定します。次に、$scope.$applyに電話します

    x = []
    for e in events
      x.Push(
        title: e.summary
        etc...
      )
    $scope.eventSource = x
    $scope.$apply()
0
Loubot

これを試して。それは私のために働いた。

function flushEvents()
{
    $scope.events.splice(0,$scope.events.length);

    for(var i=0; i<$scope.events.length; i++)
    {
        $scope.events.splice(i,1);
    }

}
0
snfrox

応答が遅いですが、それがいくつかの助けになることを願っています。私はそれを段階的に発表しています。

  1. 前述のStudio4Developmentと同じイベントソースを維持する必要があります。

    $ scope.events//再初期化する必要はありません

  2. 次のように、更新されたイベントをイベント配列から削除します（イベント配列の最後のイベントの場合）。

    $ scope.events.splice（$ scope.events.length-1、1）;

イベント配列のどこかに存在する可能性のあるイベントの場合、以下を使用してそのインデックスを見つける必要があります。

var eventIndex = $scope.events.map(function (x) { return x.Id; }).indexOf(eventId);

次に、次のようにイベント配列から削除します。

$scope.events.splice(eventIndex, 1);

  1. 次に、次のようにAPIからこのイベントを再度フェッチします。

    getEvent（data.Id）;

  2. コールバックメソッドで、イベント配列にイベントを再度追加します。

    var getSingleEventSuccessCallback = function（event）{$ scope.events.Push（event）; };

0
Faran Shabbir