Working Calendar

by cory a

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.css">
<div id="fullCalModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span>  <span class="sr-only">close</span>

                </button>
                 <h4 id="modalTitle" class="modal-title"></h4>

            </div>
            <div id="modalBody" class="modal-body">Are you sure remove the event?</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-danger" id="revButton" data-dismiss="modal">Remove</button>
            </div>
        </div>
    </div>
</div>
<div id="fullCal"></div>

JavaScript

$('#fullCal').fullCalendar({
    events: [{
        _id: 1,
        title: 'Pizza Appointment',
        start: moment().add(-4, 'h'),
        end: moment().add(-2, 'h'),
        description: 'Eat Pizza',
        allDay: false
    }, {
        _id: 2,
        title: 'Get Juiced',
        start: moment().add(1, 'd'),
        end: moment().add(2, 'd'),
        description: 'Drink Coffee',
        allDay: false
    }, {
        _id: 3,
        title: 'Coding Time',
        start: moment().add(6, 'd'),
        end: moment().add(8, 'd'),
        description: 'Hackathon',
        allDay: false
    }],
    header: {
        left: '',
        center: 'prev title next today',
        right: ''
    },
    eventClick: function (event, delta) {

        //these are working
        $('#modalTitle').html(event.title);
        $('#modalBody').html(event.description);
        $('#fullCalModal').modal();

        // [Case 1] notting happen, event is not disappered(deleted) , why?
        $("#revButton").click(function () {            
            $('#fullCal').fullCalendar('removeEvents', event._id); //external event, therefore using event._id
        });
    },
    timezone: 'local'
});