fullcalendar + ko

HTML

<link rel="stylesheet" href="http://arshaw.com/js/fullcalendar-1.5.4/fullcalendar/fullcalendar.css">
<script src="http://arshaw.com/js/fullcalendar-1.5.4/fullcalendar/fullcalendar.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.0.0/knockout-min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<diiv data-bind="fullCalendar: calendarViewModel"> </div>

<button data-bind='click: function() { items.push({ title: "New item", start: new Date(), allDay: false }) }'>
    Add item    
</button>

<span data-bind="text: viewDate"></span>

<button data-bind='click: function() { viewDate(new Date()) }'>
    Today   
</button>

JavaScript

(function() {

    ko.fullCalendar = {
        // Defines a view model class you can use to populate a calendar
        viewModel: function(configuration) {
            this.events = configuration.events;
            this.header = configuration.header;
            this.editable = configuration.editable;
            this.viewDate = configuration.viewDate || ko.observable(new Date());
        }
    };

    // The "fullCalendar" binding
    ko.bindingHandlers.fullCalendar = {
        // This method is called to initialize the node, and will also be called again if you change what the grid is bound to
        update: function(element, viewModelAccessor) {
            var viewModel = viewModelAccessor();
            element.innerHTML = "";

            $(element).fullCalendar({
                events: ko.utils.unwrapObservable(viewModel.events),
                header: viewModel.header,
                editable: viewModel.editable
            });
            $(element).fullCalendar('gotoDate', ko.utils.unwrapObservable(viewModel.viewDate));
        }
    };
})();

var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();

var myModel = {
    items: ko.observableArray([
        {
        title: 'All Day Event',
        start: new Date(y, m, 1)},
    {
        title: 'Long Event',
        start: new Date(y, m, d - 5),
        end: new Date(y, m, d - 2)},
    {
        id: 999,
        title: 'Repeating Event',
        start: new Date(y, m, d - 3, 16, 0),
        allDay: false},
    {
        id: 999,
        title: 'Repeating Event',
        start: new Date(y, m, d + 4, 16, 0),
        allDay: false},
    {
        title: 'Meeting',
        start: new Date(y, m, d, 10, 30),
        allDay: false},
    {
        title: 'Lunch',
        start: new Date(y, m, d, 12, 0),
        end: new Date(y, m, d, 14, 0),
        allDay: false},
    {
        title: 'Birthday Party',
        start: new Date(y, m, d + 1, 19, 0),
        end: new...