twitter-bootstrap – 带Ember和Twitter Bootstrap的FullCalenda

发布时间：2020-12-17 21:35:08 所属栏目：安全来源：网络整理

导读：我在用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 f

我在用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: []
        });

    }

});

页面加载时,fullcalendar不会出现.只有顶部的按钮即将出现.当我今天按下时,全日历正在显示.

JSFIddle – http://jsfiddle.net/uMVyu/

解决方法

http://jsfiddle.net/uMVyu/1/

单击选项卡上的FullCalendar Render解决.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!