よりリッチなイベントカレンダーを実装する - UI Calendar
UI Bootstrap（Datepicker）でも、簡易なカレンダーを実装することはできます。しかし、よりリッチなカレンダーを作成するならば、UI Calendarを利用することをお勧めします。UI Calendarでは、日を跨るスケジュール情報をカレンダーに日付／件名共々埋め込めますので、より直観的な一覧性に優れます。
UI Calendarは、Bowerを利用することで、以下のコマンドでインストールできます。
> bower install angular-ui-calendar
では、具体的なコードを確認していきましょう。
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8" /> <title>AngularJS</title> <!-- （1）ライブラリをインポート --> <link rel="stylesheet" href="bower_components/fullcalendar/dist/fullcalendar.css"/> <script src="bower_components/jquery/dist/jquery.min.js"></script> <script src="bower_components/moment/moment.js"></script> <script src="bower_components/angular/angular.min.js"></script> <script src="bower_components/angular-i18n/angular-locale_ja-jp.js"></script> <script src="bower_components/fullcalendar/dist/fullcalendar.min.js"></script> <script src="bower_components/fullcalendar/dist/gcal.js"></script> <script src="bower_components/fullcalendar/dist/lang/ja.js"></script> <script src="bower_components/angular-ui-calendar/src/calendar.js"></script> <script src="scripts/rich_calendar.js"></script> </head> <body ng-controller="MyController"> <!-- （3）ui-calendar属性を指定 --> <div ui-calendar="myConfig" ng-model="data"></div> </body> </html>
// （2）ui.calendarモジュールへの依存関係を
angular.module('myApp', ['ui.calendar'])
.controller('MyController', ['$scope', function($scope) {
// （4）動作オプションを指定
$scope.myConfig = {
defaultDate: new Date(),
timeFormat: "H:mm",
height: 450,
header:{
left: 'month basicWeek basicDay agendaWeek agendaDay',
center: 'title',
right: 'today,prev,next'
},
dayClick: function(date, allDay, jsEvent) {
// 選択された日付をログに表示
console.log(date.format());
}
};
// カレンダーに表示するイベント情報を準備
$scope.data = {
backgroundColor: '#fff',
borderColor: '#808080',
textColor: '#000',
events: [
{
title: '九州旅行',
start: '2016-05-01',
end: '2016-05-05',
backgroundColor: '#0f0'
},
{
title: '京都出張',
start: '2016-05-18',
end: '2016-05-20',
backgroundColor: '#0ff'
},
...中略...
]
};
}]);
UI Calendarは、FullCalendarをはじめ、さまざまなライブラリに依存しています。まずは（1）のように、一連のライブラリをインポートしてください。また、アプリモジュール（myApp）からui.calendarモジュールへの依存関係を設定しておきます（2）。
あとは、カレンダーを表示するコンテナー要素（（3）の<div>要素）に対して、ui-calendar属性（ディレクティブ）を指定することで、カレンダーを有効化できます。ui-calendar属性にはカレンダーの動作オプションを指定します。ui-calendar属性で指定できる動作オプションはFullCalendarのそれに準じますが、相当数にのぼりますので、以下では本稿で利用しているものを中心にまとめます。これらを「オプション名: 値」のハッシュ形式で指定してください（4）。
| オプション | 概要 |
|---|---|
| defaultDate | 初期の日付 |
| timeFormat | 時刻の表示形式 |
| height | カレンダーの高さ |
| header | カレンダー上部のボタンとタイトル（サブキーleft、center、rightで、それぞれの位置に表示するボタンを指定） |
| dayClick | 日付クリック時に呼び出すべきリスナー |
また、カレンダーに表示すべきイベント情報（モデル）は、ng-model属性に対して指定します。モデルは、以下のようなプロパティを持ったオブジェクト配列である必要があります（5）。
| プロパティ | 概要 |
|---|---|
| title | イベントの件名 |
| start | 日時（開始） |
| end | 日時（終了） |
| url | リンク先のURL |
| textColor | テキスト色 |
| backgroundColor | 背景色 |
| borderColor | 枠線の色 |
xxxxxColorプロパティは、個々のイベント情報で指定できる他、イベント情報の直接のプロパティとして指定することで、すべてのイベント表示に適用させることもできます。
まとめ
以上、本稿では日付情報と、これに紐づいたイベント／スケジュール情報を表示するための、UI Bootstrap（Datepicker）とUI Calendarという2つのライブラリについて紹介しました。簡易なカレンダー表示である、UI Bootstrapを既に導入しているならば、Datepickerディレクティブの導入がまずは手軽ですし、より高度にカレンダー中心のページを開発したいならば、UI Calendarの利用がお勧めです。用途に応じて使い分けてください。
次回は、フォーム開発に役立つAngular Wizard、UI Select、UI Maskなどを解説の予定です。
