Mit gotoDate in fullCalendar mit Angular UI

Ich habe setup ein Kalender mit FullCalendar mit Angular UI. Es funktioniert gut, ich kann Umschalten Kategorien von Ereignissen nett, aber jedes mal, wenn die Ereignisquelle ist, aktualisiert der Kalender-Ansicht auf das aktuelle Datum.

Ich habe versucht, mit der gotoDate Methode, und ich kann sehen, dass es funktioniert (es funktioniert auch in der Konsole), aber fast sofort nach der Kalender wird zurückgesetzt, um das aktuelle Datum. Als ich bin neu in AngularJS ich habe wahrscheinlich sogar die gotoDate an der falschen Stelle. Aber ich bin zu ahnungslos waren, um es an anderer Stelle.

Ich bin mit einem service, gibt eine Reihe von event-Objekten und schiebt Sie in eventSources das ng-Modell von dem Kalender-element. Nichts besonderes, im controller habe ich:

$scope.eventSources = [];
var promise = UserCalendarEvents.get(groupName);
promise.then(
    function(events) {
        $scope.eventSources.push(events);
        $('#events-calendar').fullCalendar('gotoDate', 2012, 11);
    },
    function(reason) {
        console.log('Error: ' + reason);
    }
);

In diesem Fall werden Ereignisse abgerufen werden und $scope.eventSources gefüllt ist. Der Kalender wird dann bis Dezember 2012 und nach, dass fast sofort, die anzeigen Swithes bekommen, um das aktuelle Datum ein. Ist es eine Art Uhr des ng-Modells, das rerenders die fullcalender und wenn ja, wie kann ich das Datum der Wahl?

Update: ich endete mit joshkurz beheben, aber in einer modifizierten version, die Auszeichnung der ausgewählten Ansicht, dh wenn der Benutzer ausgewählt hat, basicWeek und änderungen Quelldaten der Blick sollte sich nicht ändern, um zum Beispiel in der Monatsansicht. Das ist es, was ich brauche für meine Nutzer.

    function update() {
        scope.calendar = elm.html('');
        var view = scope.calendar.fullCalendar('getView');
        var m;
        var xtraOptions = {};
        //calendar object exposed on scope
        if(view){
          var viewDate = new Date(view.start);
          if(m !== 'Invalid Date'){
            y = viewDate.getFullYear();
            m = viewDate.getMonth();
            d = viewDate.getDate();
            if(!isNaN(y) && !isNaN(m) && !isNaN(d)){
              xtraOptions = {
                year: y,
                month: m,
                date: d
              };
            }
          }
          view = view.name; //setting the default view to be whatever the current view is. This can be overwritten.
        }
        /* If the calendar has options added then render them */
        var expression, 
            options = { defaultView : view, eventSources: sources };
        if (attrs.uiCalendar) {
            expression = scope.$eval(attrs.uiCalendar);
            //Override defaultView if is set in ui-calendar attribute - OK? 
            if (expression.defaultView) {
                expression.defaultView = view;
            }     
        } else {
            expression = {};
        }
        angular.extend(options, uiConfig.uiCalendar, expression, xtraOptions);
        scope.calendar.fullCalendar(options);

      }

InformationsquelleAutor John P | 2013-03-28

3

Dies ist ein bug mit dem Kalender. Sie sind der erste, der etwas darüber gesagt, dass es auf StackOverflow. Kudos.

Gibt es ein paar Möglichkeiten, dass diese behoben werden konnten. Es ist vorgeschlagen worden, die auf github https://github.com/angular-ui/angular-ui/pull/520, dass wir tun, Weg mit, wie die Richtlinie neu erstellt, selbst wenn die Uhr ausgelöst wird, wird die würde dieses Verhalten beenden. Ich glaube, wenn wir diese Methode funktioniert in der Produktion, dann wird es die beste Lösung.

Bis dann allerdings die Lösung ist, um den aktuellen Monat aus einem date-Objekt erstellt, aus der Sicht.Feld start ein. In diesem Monat sollte Hinzugefügt werden, um die Optionen, die verwendet werden, um zu machen die Kalender.

Hier ist ein snippet, was das neue update-Funktion Aussehen soll, wie in der Kalender-Richtlinie.
```
/* update the calendar with the correct options */
        function update() {
          scope.calendar = elm.html('');
          var view = scope.calendar.fullCalendar('getView');
          var m;
          var xtraOptions = {};
          //calendar object exposed on scope
          if(view){
            var d = new Date(view.start);
            m = new Date(view.start);
            if(m !== 'Invalid Date'){
              m = m.getMonth();
              if(!isNaN(m)){
                xtraOptions = {
                  month: m
                };
              }
            }
            view = view.name; //setting the default view to be whatever the current view is. This can be overwritten.
          }
         //console.log(m)
          /* If the calendar has options added then render them */
          var expression,
            options = {
              defaultView : view,
              eventSources: sources
            };
          if (attrs.exCalendar) {
            expression = scope.$eval(attrs.exCalendar);
          } else {
            expression = {};
          }
          angular.extend(options, uiConfig.exCalendar, expression, xtraOptions);
          scope.calendar.fullCalendar(options);
        }
```
Dieser wurde nicht richtig getestet auf der angular-ui-CI-server, aber es funktioniert sehr gut, da ich es mit in die Produktion derzeit.
- der patch funktioniert gut, jedoch änderte ich exCalender zu uiCalendar in den code oben verwende ich das Attribut mit meine benutzerdefinierten Einstellungen. Ist der name des Attributs zu ändern, in der bevorstehenden Version?
- Eine Sache, die funktioniert nicht mit dem patch ist, wenn der Benutzer ändert sich die Ansicht. Es kehrt immer wieder zurück zur Monatsansicht, D. H. der default-Wert. Vielleicht komme ich einige Zeit während der Woche, um es zu betrachten.
- Ahh ja sry zu verlassen, die ex-namespace gibt. Ich hatte nicht bemerkt, die Fehler, die Sie sich beziehen jedoch auch.
- hier ist ein besserer link plnkr.co/Bearbeiten/lvWYnh?p=Album Vorhören
- Beutiful! Ich gebe es zu gehen.
InformationsquelleAutor joshkurz
1

Einen anderen Weg um das Problem zu lösen, ohne änderung der Angular-UI-Quelle ist zu erklären, dass die Kalender so:
```
<div ui-calendar="{viewDisplay:viewDisplayHandler,month:monthVal,year:yearVal}" ng-model="eventsArr"></div>
```
Und eine viewDisplayHandler Funktion in dem Umfang, setzt monthVal und yearVal auf die entsprechenden Werte ein, um das Datum auf dem Kalender, nach dem ganzen Kalender Freizeit:
```
$scope.viewDisplayHandler = function(view) {
    var viewStart = view.start;
    $scope.yearVal = viewStart.getFullYear();
    $scope.monthVal = viewStart.getMonth();
}
```
Dies ist, wie ich es gelöst vor der Erteilung der pull-request auf GitHub, es ist nicht die optimale Methode, die ich denke, aber ich verwende es in der Produktion für eine Weile und es scheint ok zu sein und erfordert keine änderung Angular-UI-code.
- Ich bin auf der Suche um zu ändern, werden die Daten festgelegt, die für eine Ereignisquelle mit der callback-Methode mit so etwas wie: $scope.eventSourceNew = { url: URL, type: 'GET' }; $scope.addRemoveEventSource($Umfang.eventSources, $Umfang.eventSourceNew); Leider, wenn es nie macht Aufruf der URL.
InformationsquelleAutor Raibaz
0

Mit AngularUI Verpackung FullCalendar in eine Richtlinie für Sie, die Kalender-Objekt kann zugegriffen werden über $scope.Kalender. "Die AngularJS-Weg" ist zu vermeiden die direkte DOM-manipulation in den Controller.

In Ihrem speziellen Fall, würden Sie schreiben stattdessen:
```
$scope.calendar.fullCalendar('gotoDate', 2012, 11);
```
AngularUI hat ein Auge auf die Ereignisquelle und-Fall, die fordert, eine update-Funktion jedes mal, wenn die Länge der beiden änderungen. Sie können die Quelle hier:

https://github.com/angular-ui/angular-ui/blob/master/modules/directives/calendar/calendar.js

Können Sie sehen, dass die Kalender-Objekt in $scope.Kalender wird neu mit einer neuen Reihe von Ereignissen, jedes mal wenn das event-Modell ändert. Das ist, warum Ihr Datum ändert sich nicht durch -- das Ereignis Hinzugefügt wird, das auslösen der update-das Datum ändern, das geht, der ganze Kalender wird geändert und Ihr Datum zu ändern, ist verloren.

Zwei (nicht die besten) Dinge, die pop-up bei mir ohne änderung AngularUI code:
1. Können Sie verwenden, AngularJS, der $timeout-service und warten Sie ein set
  Zeit nach den Veranstaltungen sind geladen, der Kalender ist fertig, Update,
  dann rufen Sie Ihren Termin ändern.
2. Können Sie ein $ - Uhr auf dem Umfang, wie löst Ihr das Datum ändern
  jedes mal, wenn das Kalender-Objekt änderungen:
  
  http://plnkr.co/edit/Ww08VX?p=preview
Ich erstellt, Beispiel oben. In der test () - Methode, ich bin nur laden einige gefälschte Daten in Ereignissen, über ein Versprechen (Sie werden Hinzugefügt, März 2013) dann ändern Sie das Datum auf Dezember 2012. Ich bin gerade $Umfang.Kalender und jedesmal, wenn es änderungen (ein update ausgelöst wird, die in der Richtlinie) habe ich erneut den Befehl "date". Sie gesendet werden sollen. Dezember 2012, ohne dass die neuen Veranstaltungen gehen, aber wenn Sie gehen zurück bis März 2013 sollten Sie da sein. Ich steckte die Uhr in die andere .dann angenommen, Sie werden einige Wert, der zurückgegeben wird, um das Datum dynamisch.
- Ach, es war so einfach - $Umfang.Kalender. Verwenden von DOM-manipulation fühlte sich an wie ein hack. spontan, eine Uhr scheint der Weg zu gehen. Ich werde versuchen, den code in ein paar Tagen.
- fullcalendar ist jetzt nicht mehr verfügbar $Umfang.Kalender, es ist definiert als ein Attribut, z.B. Kalender="bob" wäre es möglich bei $Umfang.bob.fullCalendar() Finden Sie unter github.com/angular-ui/ui-calendar/pull/12
- Ich kann nicht verstehen, Ihre Unterhaltung da. Ich sehe, dass $Umfang.Kalender ist momentan nicht verfügbar, dann, wie könnte ich gotoDate ohne direkt das DOM Bearbeiten?
- ohne nach einem code zu bestätigen, und mit meinem Beispiel $scope.bob.fullCalendar().gotoDate()
InformationsquelleAutor Cuong Vo

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.