WeekView - With Add Event

Uses moment.js and limited code.

HTML

<script src="http://momentjs.com/downloads/moment.min.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-3.1.0.js"></script>
<div id='dialog-container'>
   
</div>
 
<script type="text/html" id='dialog-template'>
    
     <fieldset style='border: solid 1px; margin-left: 15px'>
        <legend>Events</legend>
         
    
        <div data-bind='foreach:events'>
            <div>
                <span data-bind='text: description'></span><button data-bind='click: $parent.removeEvent'>X</button>
            </div>
        </div>
    </fieldset>
    <div>
        Description <input data-bind='value: event().description'></input>
        <br/>
        Location <input data-bind='value: event().location'></input>
        <br/>
        Details <input data-bind='value: event().details'></input>
        <br/>
        <div>
        <button  data-bind='click: $root.addEvent'>Add</button>
        <button  data-bind='click: $root.saveEvents'>Apply</button>
        </div>
    </div>
</script>

<div id='calendar-container' class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="calendar">
                <ul class="weekdays" id="weekdays" style="height: auto;" data-bind='foreach: weekdays'>
                    
                    <li data-bind='text:day'></li>
                </ul>
                <ul class="days" id="days" data-bind='foreach: weekdays'>
                    <li data-bind='css: hasEvent() ? "calendar-day-event" : "calendar-day"'>
                        
                        <div class='date'> 
                            <span class='day' data-bind='text: day() + ","'></span>
                            <span class='month' data-bind='text: month'></span>
                            <span data-bind='text: date, click: $parent.launchEventsDialog'></span>
                            
                            <!--ko foreach:events-->
                            <a...

CSS

body {
    padding-top: 80px;
}
.calendar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    clear: both;
    width: 100%;
}
.calendar li, {
    display: block;
    box-sizing: border-box;
    border: 1px solid #ccc;
}
.calendar .date {
    color: #7f7f7f;
}
.calendar:before, .calendar:after {
    content:"";
    display: table;
}
.calendar:after {
    clear: both;
}
.calendar-day, .calendar li.out-of-range, .calendar-day-event {
    height: 150px;
}
@media (max-width:768px) {
    .calendar .weekdays {
        display: none;
    }
    .calendar li {
        height: auto!important;
        border: 1px solid #ededed;
        width: 100%;
        padding: 10px;
        margin-bottom: -1px;
    }
    .calendar li .day, .calendar li .month {
        display:inline;
    }
    .calendar li.out-of-range, .calendar-day {
        display: none;
    }
    .calendar .date {
        text-align: center;
    }
}
@media (min-width:769px) {
    .calendar .date {
        text-align: right;
    }
    .calendar ul {
        list-style: none;
        padding: 0;
        margin: 0;
        clear: both;
        width: 100%;
    }
    .calendar li {
        display: block;
        float: left;
        width: 14.2857142857%;
        padding: 5px;
        box-sizing: border-box;
        border: 1px solid #ccc;
        margin-right: -1px;
        margin-bottom: -1px;
    }
    .calendar li .day, .calendar li .month {
        display:none;
    }
    .calendar li.out-of-range {
        background-color:#F5F5F5;
        color:#666;
    }
}

JavaScript

//set the moment
var today = moment();
 
var Event = function(data){
    return {
    month: ko.observable(data.month),
    day: ko.observable(data.day),
    time: ko.observable(data.time),
    location: ko.observable(data.location),
    description: ko.observable(data.description),
    details: ko.observable(data.details)
   }
}

var Day = function (moment, events) {
    
    var obj = {
     
        day : ko.observable(moment.format('dddd')),
        month : ko.observable(moment.format('MMM')),
        date : ko.observable(moment.format('D')),
        events : ko.observableArray(events)
    }
   
    obj.hasEvent = ko.computed(function () {         
        return obj.events().length > 0
    })
    return obj;
}

//create an array of events
var events = new Array(31);
for (var i = 0; i < 31; i++) {
    events[i] = [];
}
//add an event
events[today.format('D')] = [new Event({
    month: "May",
    day: "24",
    time: "3:00 pm - 5:00 pm",
    location: "My house",
    description: "Barbecue for the weekend",
    details: "EventDetail.html"
})];

var vm = {
    weekdays: ko.observableArray([]),
    selectedDay: ko.observable()
}

vm.launchEventsDialog = function(day){
      
    console.log(ko.toJSON(day))
     var dialogModel = {
         events: ko.observableArray(day.events().slice(0)),
         event: ko.observable(new Event({}))
     }
    
     dialogModel.addEvent = function(){
        dialogModel.events.push(dialogModel.event())
        dialogModel.event(new Event({}))
     }
     
     dialogModel.removeEvent = function(event){
        dialogModel.events.remove(event)
     }
      
     dialogModel.saveEvents = function(){
          
         var modfiedEvents = dialogModel.events();         
         day.events(modfiedEvents);
         $('#dialog-container').dialog('close')
          
     }
     
     $('#dialog-container').html('<div data-bind="template: {name:\'dialog-template\', data: $data}"></div>');
    
     ko.applyBindings(dialogModel,...