Emberで記述されたJSアプリケーションのTwitterBootstrapタブにFullCalendarを実装しました。タブの内容には、次のハンドルバーが含まれています。
<div class="container-fluid">
<div class="row-fluid">
<div class="commands pull-left">
<input type="text" placeholder="Display Calendar for" data-provide="typeahead">
</div>
<div class="commands pull-right">
<a {{bindAttr class=":btn :btn-primary"}} href="#" {{action "newEvent"}}><i class="icon-plus icon-white"></i> Add Event</a>
</div>
</div>
<hr/>
<div class="row-fluid">
{{#view App.CalendarTool id="calendar" class="calendar"}}
{{/view}}
</div>
</div>
クラスApp.CalendarToolは次のように定義されています。
require('fullcalendar/fullcalendar');
require('fullcalendar/gcal');
App.CalendarTool = Em.View.extend({
tagName:'div',
attributeBindings:['id','events','owner'],
classNamesBindings:['class'],
didInsertElement:function(){
this.$().fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay '
},
editable: true,
events: []
});
}
});
ページが読み込まれると、フルカレンダーが表示されません。上部のボタンのみが表示されます。今日押すと、フルカレンダーが表示されています。
JSFIddle- http: //jsfiddle.net/uMVyu/