我在一个使用Ember编写的JS应用程序中,在Twitter Bootstrap选项卡中实现了FullCalendar。 选项卡的内容中包含以下Handlebars。
<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/