var TeamMember = function (options) { var options = options || {}; this.teamMemberName = ko.observable(options.teamMemberName || ""); this.startDate = ko.observable(options.startDate || moment().format("MM/DD/YYYY")); this.id = 0; }; var ProjectViewModel = function () { var _projectName = ko.observable(); var _projectDescription = ko.observable(); var _projectTeam = ko.observableArray(); var _teamSize = ko.computed(function(){ return _projectTeam().length; }); // Team has changed - push items to calendar _projectTeam.subscribe(function (newValue) { populateCalendar(ko.toJS(_projectTeam)); }); var _currentTeamMember = new TeamMember({ teamMemberName: "Jethro", startDate: "1/13/2015" }); var _calendar; var initCalendar = function () { if (!_calendar) { _calendar = $('#calendar').fullCalendar({ allDayText: 'Items', defaultView: "month", defaultEventMinutes: 30, header: { left: 'prev,next today', center: 'title', ignoreTimeZone: false, }, events: [{title: "test", start: moment().format()}] }); } }; var populateCalendar = function (entries) { var length = entries.length; _calendar.fullCalendar("removeEvents"); for (var i = 0; i < length; i++) { var event = {}; var entry = entries[i]; event.title = entry.teamMemberName + " starts"; event.start = moment(entry.startDate); event.allDay = true; _calendar.fullCalendar("renderEvent", event, true); console.log(event); } }; var refreshCalendar = function () { // Bootstrap tab hinders calendar rendering - need to nudge it to render $('.fc-today-button').click(); $("#calendar").fullCalendar('rerenderEvents'); }; // public functions var addTeamMember = function () { var newbie = new TeamMember({ teamMemberName: _currentTeamMember.teamMemberName(), startDate: _currentTeamMember.startDate() }); newbie.id = _projectTeam().length + 1; console.log(newbie); _projectTeam.push(newbie); _currentTeamMember.teamMemberName(""); }; return { projectName: _projectName, projectDescription: _projectDescription, projectTeam: _projectTeam, currentTeamMember: _currentTeamMember, teamSize: _teamSize, // functions addTeamMember: addTeamMember, initCalendar: initCalendar, refreshCalendar: refreshCalendar }; }; $(document).ready(function () { var vm = new ProjectViewModel(); ko.applyBindings(vm); vm.initCalendar(); $("#apparea").on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) { vm.refreshCalendar(); }); });
<div style="padding: 8px;"> <div id="apparea" role="tabpanel"> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#project-info" aria-controls="project-info" role="tab" data-toggle="tab">Project Info</a> </li> <li role="presentation"><a href="#team" aria-controls="team" role="tab" data-toggle="tab">Team</a> </li> <li role="presentation"><a href="#timeline" aria-controls="timeline" role="tab" data-toggle="tab">Timeline</a> </li> </ul> <!-- Tab panes --> <div class="tab-content demo"> <div role="tabpanel" class="tab-pane active" id="project-info"> <p> <label>Project Name</label> <br/> <input data-bind="value: $root.projectName"></input> </p> <p> <label>Project Description</label> <br/> <textarea rows="3" cols="50" data-bind="value: projectDescription"></textarea> </p> <p> <label>Team Size: <label> <span data-bind="text: $root.teamSize"></span> </p> </div> <div role="tabpanel" class="tab-pane" id="team"> <p> <span class="team-members">Team Members for Project: <span data-bind="text: $root.projectName" class="project-name"></span></span> </p> <p> <label>Team Member</label> <input data-bind="value: $root.currentTeamMember.teamMemberName"></input> <label>Start Date</label> <input data-bind="value: $root.currentTeamMember.startDate"></input> <button type="button" data-bind="click: $root.addTeamMember">Add Team Member</button </p> <table id="team-roster" class="table table-striped"> <thead> <tr> <th>Team Member</th> <th>Start Date</th> </tr> </thead> <tbody data-bind="foreach: $root.projectTeam"> <tr> <td><span data-bind="text: $data.teamMemberName"></span> </td> <td><span data-bind="text: $data.startDate"></span> </td> </tr> </tbody> </table> </div> <div role="tabpanel" class="tab-pane" id="timeline"> <div id="calendar"></div> </div> </div> </div> </div>
div.demo { margin-top: 8px; } span.team-members { font-size: 14px; font-weight: bold; } span.project-name { font-style: italic; }