JSFiddle - React, Tailwind, and code Playground

by simpleshadow

HTML

<script src="http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.min.js"></script>
<link rel="stylesheet" href="http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.css">
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.8.1.min.js"></script>
<script src="https://raw.github.com/twitter/bootstrap/master/js/bootstrap-tab.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<ul class="nav nav-tabs" id="myTab">
                        <li class="active"><a href="#sales" data-toggle="tab">Sales</a></li>
                        <li><a href="#order" data-toggle="tab">Order</a></li>
                        <li><a href="#cal" data-toggle="tab">Calendar</a></li>
                        
                        <li><a href="#contacts" data-toggle="tab">Contacts</a></li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane active" id="sales">
                            Sales
                        </div>
                        <div class="tab-pane" id="order">
                            Orders
                        </div>
                        <div class="tab-pane" id="cal">
                            <script type="text/x-handlebars">
                                {{#view App.CalendarTool id="calendar"}}{{/view}}
                            </script>
                            
                        </div>
                        <div class="tab-pane" id="contacts">Contacts</div>
                    </div>

JavaScript

App = Ember.Application.create();

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

    }

});

$('#myTab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
    $('#calendar').fullCalendar('render');
})