JSFiddle - React, Tailwind, and code Playground

by kei4eva4

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.0.2/fullcalendar.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.0.2/fullcalendar.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<div data-bind="fullCalendar: calendarViewModel"></div>

JavaScript

var params = {
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    events: [{
        title: 'event1',
        start: '2014-07-01'
    }, {
        title: 'event2',
        start: '2014-07-05',
        end: '2014-07-07'
    }],
    viewDate: '2014-07-14'
};

ko.fullCalendar = {
    viewModel: function(config) {
        this.header = config.header;
        this.events = config.events;
        this.viewDate = config.viewDate;
    }
};

ko.bindingHandlers.fullCalendar = {
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).fullCalendar({
            events: viewModel.events,
            header: viewModel.header
        });
        $(element).fullCalendar('gotoDate', viewModel.viewDate);
    }
};

var calendarViewModel = new ko.fullCalendar.viewModel(params);

ko.applyBindings(calendarViewModel);