Edit in JSFiddle

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;
}