Beispiele zum Teilen von Erfahrungen mit der Verwendung des UI-Kalenders in Angular

Dieser Artikel vermittelt Ihnen einige Erfahrungen mit der Verwendung des UI-Kalenders in Angular (empfohlen). Der Herausgeber findet es ziemlich gut, deshalb teile ich es jetzt mit Ihnen und gebe es als Referenz. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

UI Calendar ist ein Angular-Befehls-Plug-In, das Fullcalendar kapselt

Offizielle Adresse: http://angular-ui.github.io/ui-calendar/

Ich werde die Installation von Fullcalendar- und UI-Kalenderpaketen nicht vorstellen. Laden Sie es von Baidu herunter.

Fügen Sie nach der Installation des Pakets die Pfadreferenz hinzu

Diese Entwicklungsumgebung angle1.x

Aufruf

<p ui-calendar="uiConfig.calendar" class="span8 calendar" ng-model="eventSources" calendar="myCalendar"></p>

Parameter im Controller konfigurieren

/* config object */
$scope.uiConfig = {
　　calendar: {
　　　　height:..,//容器高度
　　　　editable:..,//是否可编辑
　　　　header: {
　　　　　　right: '',//右边操作按钮
　　　　　　center: 'title',
　　　　　　left: '',//左边操作按钮

　　　　},

　　}

};

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

Dies sind einige grundlegende Konfigurationen. Bitte konfigurieren Sie andere entsprechend Ihren Anforderungen.

Lassen Sie uns über einige der Probleme sprechen, auf die ich während der Verwendung gestoßen bin. Beginnen Sie zunächst mit den Anforderungen:

1. Produktanforderungen: Tägliche Ereignisse sollten nach Feld „x“ sortiert werden.

2. Filtern Sie die Ansichtsdaten verschiedener Monate nach Monat.

Lasst uns zunächst das erste Problem lösen. Ich habe lange Zeit mit Chinesisch Baidu verbracht. . . Bei der Suche auf Englisch habe ich schließlich herausgefunden, dass die neue Version von Fullcalendar ein Sortierfeld bereitstellt und der Standardwert „Titel“ ist. Daher habe ich Fullcalendar neu installiert und die Sortiermethode manuell festgelegt: Fügen Sie dem Datensatz ein benutzerdefiniertes Sortierfeld hinzu, z. B. {; title:'111', sort:'22'} und dann eventOrder:'sort' in $scope.urConfig.calendar hinzufügen. Ich bin sehr froh, dass das erste Problem gelöst ist!

Die zweite Frage: Um verschiedene Monatsansichten basierend auf der Zeit anzuzeigen, reicht es nicht aus, einfach die Datensätze verschiedener Monate in eventSources zu werfen? Ich habe es versucht, äh, die Ansicht ändert sich nicht. . . Die englische Suchreise begann von neuem. . .
Endlich einen Beitrag gefunden, die Methode lautet wie folgt:

1. Injizieren Sie uiCalendarConfig in den Controller und dann uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', CalendarMonth);calendarMonth Monat geladen und angezeigt werden soll, aber nach dem Aufruf von uiCalendarConfig.calendars.myCalendar ist undefiniert...

Lösung:

$timeout(function(){

　　uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', calendarMonth);

});

In diesem Schritt wurden die für das Projekt erforderlichen Grundfunktionen erstellt umgesetzt.

Optimierung starten:

1. Passen Sie die Anzeigeoberfläche auf Chinesisch an, fügen Sie lang:'zh-cn' oder locale:'zh-cn' in der Konfigurationskonfiguration hinzu, falls dies immer noch der Fall ist. Funktioniert nicht, bitte aktualisieren Sie Ihr UI-Kalenderpaket

2. Die Ansicht wird sehr langsam geladen und die Suche auf Englisch dauert lange. . . Beschwere dich darüber. Sind Chinesen nicht auf ein solches Problem gestoßen? Ich kann es bei chinesischen Suchanfragen überhaupt nicht finden. . . , habe endlich einen Beitrag gesehen:

Ändere $scope.eventSources = [$scope.events]; zu $scope.eventSources = [],

$scope.events wird durch Anforderung zurückgegeben uiCalendarConfig.calendars.myCalendar.fullCalendar('addEventSource', $scope.events); wurde geladen, ich habe es versucht. Schön, das Langsamkeitsproblem ist gelöst. . . Es kommt jedoch ein neues Problem. Die Ansicht löscht meine letzten Daten nicht, was zu doppelten Daten führt!

Endlich geändert in $scope.eventSources.push($scope.events); obwohl das Problem gelöst wurde, wurde das obige Problem nicht gelöst. . . Fachkundige Beratung ist willkommen!

Die oben genannten sind einige der Probleme, auf die ich während der Nutzung gestoßen bin. . . Ich hoffe, es hilft Freunden, die das gleiche Problem haben! Nehmen Sie es zur späteren Verwendung selbst auf!

Verwandte Empfehlungen:

Beispiele, die die Methoden der Wertübertragung und Kommunikation zwischen verschiedenen Komponenten in Angular detailliert beschreiben

Wird in Angular4 angezeigt Beispielcode für den CSS-Stil

Detaillierte Erläuterung der Angular-Implementierung der Zeitplanfunktion (kann Anzeigeinhalte hinzufügen und ausblenden)

Das obige ist der detaillierte Inhalt vonBeispiele zum Teilen von Erfahrungen mit der Verwendung des UI-Kalenders in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!