带有 Ember 和 Twitter Bootstrap 的 FullCalendar答案

【问题标题】：FullCalendar with Ember and Twitter Bootstrap带有 Ember 和 Twitter Bootstrap 的 FullCalendar
【发布时间】：2012-07-27 19:08:09
【问题描述】：

我在一个用 Ember 编写的 JS 应用程序中的 Twitter Bootstrap 选项卡中实现了 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/

【问题讨论】：

你有没有扩展过你的实现？具体来说，我正在尝试提出将 fullcalendar 事件绑定到 ember 数据对象的最佳方法

标签： twitter-bootstrap fullcalendar ember.js

【解决方案1】：

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

在标签点击时使用 FullCalendar 渲染解决。

【讨论】：

【解决方案2】：

刚刚遇到这个问题...我认为现在可以通过使用 emberCalendar 解决这个问题https://github.com/joinspoton/ember-calendar

【讨论】：