Angular で UI カレンダーを使用した経験を共有する例

この記事では、Angular での UI カレンダーの使用経験をいくつか紹介します (推奨)。編集者はこれがとても良いものだと思ったので、皆さんの参考として今から共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

ui カレンダーは、fullcalendar をカプセル化する angular コマンド プラグインです

公式アドレス: http://angular-ui.github.io/ui-calendar/

fullcalendar と ui のインストールについては紹介しませんカレンダーパッケージ。百度からダウンロードしてください。

パッケージがインストールされたら、パス参照を追加します

この開発環境 angular1 の使用中に遭遇したいくつかの問題について説明すると、まず要件から始める必要があります:

1. 毎日のイベントを並べ替える必要があります。フィールド「x」によって。

2. 月ごとに異なる月の表示データをフィルタリングします。

まず最初の問題を解決しましょう。fullcalendar に並べ替え機能があるかどうかを確認します。私は中国の Baidu に長い時間を費やしました。 。 。英語で検索したところ、fullcalendar の新しいバージョンには並べ替えフィールドが用意されており、デフォルトは「title」であることがわかりました。そこで、fullcalendar を再インストールし、並べ替え方法を手動で設定しました。データ セットにカスタム並べ替えフィールドを追加します。 title:'111', sort:'22'} を追加し、$scope.urConfig.calendar にeventOrder:'sort' を追加します。最初の問題が解決されたことをとても嬉しく思います。

2 番目の質問は、時間に基づいてさまざまな月のビューを表示するには、さまざまな月のデータ セットをeventSources にスローするだけで十分ではないでしょうか?試してみましたが、景色は変わりません。 。 。英語探索の旅が再び始まりました。 。 。

最終的に投稿を見つけました。方法は次のとおりです:

1. uiCalendarConfig をコントローラーに挿入し、次に uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', CalendarMonth);calendarMonth はロードする必要がある月です。と表示されますが、uiCalendarConfig を呼び出した後、calendars.myCalendar は未定義です...

解決策:

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

この時点で、プロジェクトに必要な基本的な機能が実装されました。

最適化の開始:

1. 表示インターフェイスを中国語に調整し、設定に lang:'zh-cn' または locale:'zh-cn' を追加します。それでも動作しない場合は、UI カレンダーをアップグレードしてください。パッケージ

2. ビューの読み込みが非常に遅く、英語の検索に時間がかかります。 。 。それについて文句を言ってください。中国人はこのような問題に遭遇したことはありませんか？中国語で検索してもまったく見つかりません。 。 。 、最後に投稿を見ました:

Change $scope.eventSources = [$scope.events]; to $scope.eventSources = [],

$scope.events は、uiCalendarConfig.calendars.myCalendar.fullCalendar を受信した後にリクエストを通じて返されます('addEventSource', $scope.events); ロードして試してください。よかった、遅さの問題は解決しました。 。 。しかし、ビューが最後のデータを消去せず、データが重複してしまうという新たな問題が発生します。

最終的に $scope.eventSources.push($scope.events); に変更されましたが、上記の問題は解決されていませんでした。 。 。専門家の指導は大歓迎です！

上記は、使用中に遭遇した問題の一部です。 。 。これが同じ問題を抱えている友達に役立つことを願っています!後で使用できるように自分で記録してください。

関連する推奨事項:

Angularの異なるコンポーネント間の値の転送と通信方法の詳細な例

Angular4でCSSスタイルを表示するためのサンプルコード

Angularはスケジュール機能を実装します(表示の追加と非表示が可能です) ）詳しい説明

以上がAngular で UI カレンダーを使用した経験を共有する例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。