AngularJS と wijevcal

この Angular 導入ガイドでは、HTML マークアップ、jQuery スクリプト、および AngularJS ディレクティブを使用して、EventsCalendar を HTML プロジェクト内で使用する方法について学習します。

コントローラーとモデルをそれぞれ個別のファイルで設定する、より複雑なサンプルについては、弊社 Web サイト「AngularJS Directive Gallery」を参照してください。

新しい HTML ページを作成するには、任意のテキストエディタで次のコードを追加し、.html 拡張子を付けてドキュメントを保存します。<HTML> タグと <body> タグが通常のタグとは異なることに注意してください。
- <HTML> タグは、ng-app ディレクティブによって Angular アプリケーションとマークされ、さらに Wijmo を使用するように指定されます。
- <body> タグを使用して、作成する Angular コントローラーのスコープを定義します。スコープには <div> などの別のタグも使用できますが、ここでは、body 全体を使用します。ng-controller ディレクティブは、このスコープ内で使用するコントローラーを指定します。
ドロップダウンからマークアップをコピーします
任意のテキストエディタに貼り付けます。
コードのコピー

<!DOCTYPE HTML> <HTML ng-app="MyApp"> <head> </head> <body ng-controller="MyController"> </body> </HTML>

任意のテキストエディタに貼り付けます。	コードのコピー
<!DOCTYPE HTML> <HTML ng-app="MyApp"> <head> </head> <body ng-controller="MyController"> </body> </HTML>

依存ファイルへのリンクを HTML ページの <head> タグ内に追加します。最新の依存ファイルについては、「wijmo cdn」のコンテンツ配信ネットワーク（CDN）ファイルを参照してください。通常の参照に加え、Angular 用に 2 つのスクリプト参照を追加します。この参照は jQuery 参照の後に続ける必要があるので、最後の 2 行となります。

1 つは AngularJS 自身です。
もう 1 つは、Wijmo の Angular javascript 統合ライブラリです。

ドロップダウンして参照コードをコピーし、head タグ内に貼り付けます

<head> タグ内の参照の後に、次のスクリプトを追加します。このスクリプトは、アプリケーションが Wijmo を使用するように設定し、$scope パラメータでデータコンテキストを制御する単純なコントローラーを作成します。
スクリプト
コードのコピー
<script type="text/javascript"> var app = angular.module("MyApp", ["wijmo"]); function MyController($scope) {} </script>
<body> タグ内に次のマークアップを記述して、ウィジェットを作成します。Angular を使用せずに jQuery でこの処理を行う方法については、「クイックスタート」を参照してください。<wij-evcal> ディレクティブを使用してウィジェットを作成し、要素内でいくつかのオプションを属性として設定します。
- timeInterval オプション（time-interval ディレクティブ）を設定して、カレンダーページのイベント行の増分を 15 分とします。
- timeIntervalHeight オプション（time-interval-height ディレクティブ）は、各イベント行のデフォルトの高さの 2 倍である 30 ピクセルに設定します。
- timeRulerFormat オプション（time-ruler-format ディレクティブ）は、デフォルトの「時間」ではなく、「時間と分」を表示するように設定します。
- timeRulerInterval オプション（time-ruler-interval ディレクティブ）は、ルーラー値が表示される間隔をデフォルトの「60 分」ではなく、「30 分」に設定します。
マークアップ
コードのコピー
<wij-evcal time-interval="15" time-interval-height="30" time-ruler-format="{0:h:mm tt}" time-ruler-interval="30"> </wij-evcal>
HTML ファイルを保存し、ブラウザで開きます。作成されたウィジェットは、実際には次のように表示されます。

関連トピック

参照