AngularUIにCalendarというサブプロジェクトがあるので、使ってみました。
https://github.com/angular-ui/ui-calendar
これは、FullCalendarというjQueryプラグインをAngularのディレクティブ化するもののようです。 ちょっと依存ライブラリが多くて使うのをためらったのですが、他に良い候補も見つからず、AngularUIに入っているのだからうまくラップされているのだろうということで。
READMEを読むと、bowerを使って依存関係を管理せよと書いてあるのですが、まだ理解していないものを使いたくなかったので、手動で設定しました。
分かってしまえばそれほど難しいものではありません。次のものを読み込めばいいだけです。
- fullcalendar.css
- jquery.min.js
- jquery-ui.min.js
- jquery-ui-i18n.min.js
- angular.min.js
- angular-ui.min.js
- fullcalendar.js
- calendar.js
必要であればjQueryUIのテーマのcssも読み込みましょう。
さて、ui-calendarを使うとng-modelが使えるようです。
<div ui-calendar="calendarOptions" ng-model="eventSources">READMEにはこのように書いてありましたが、ここで、はまりました。ng-modelはeventSourceオブジェクトを指定するのではなく、events配列を指定するようです。READMEがソースの改変に追いついていないようです。もっと言うと、READMEではng-modelはオプション扱いですが、書かないとエラーになりました。
実際にevents配列を使ってみるのはこれからです。
追記。
ng-modelに指定するのは、events配列ではなく、eventSources配列であってました。でも、eventSourceオブジェクトの配列ではありません。READMEはeventSourceオブジェクトのリンクを指しているので分かりにくいです。
コメント