Date formatting two different times with same code

I'm using FullCalendar to display employee shifts in a calendar form.

I'm using tooltips to display a very brief summary of their shift which works fine, and then when I click on the event it loads up a modal with the full information about the shift.

For some reason calling event.end.format("h:mm a") in the EventRender function to produce the tooltip gives me the correct finishing time for that person, yet when trying to produce the same for the modal in the EventClick function I get a different result.

Maybe I'm missing something, but I've been at it for hours trying to debug it and cannot work it out as the code is exactly the same for producing the time. All the events come from a JSON feed (and the time is correct everywhere else) yet, for example, the expected outcome of event.end.format("h:mm a") is 4:30 pm (and is displayed correctly in the tooltip) comes out as 12:30 am in the modal and I am still using event.end.format("h:mm a").

Full code for my calendar below:

<script>
    $(document).ready(function() {

    $('#calendar').fullCalendar({
        header:{
        left:"prev,next today",
        center:"title",
        right:"month,agendaWeek,agendaDay"},
        eventLimit:false,

        eventClick:  function(event) 
        {
            $('#modalTitle').html(event.title);
            $('#modalBody').html("<p><strong>Start:</strong> " + event.start.format("h:mm a") + "</p>" +
                                    "<p><strong>Finish:</strong> " + event.end.format("h:mm a") + "</p>" +
                                    "<p><strong>Lunch Duration:</strong> " + event.total_breaks + " minutes </p>" +
                                    "<p><strong>Shift Type:</strong> " + event.shift_status + "</p>"
                                    );
            $('#eventUrl').attr('href',event.url);
            $('#fullCalModal').modal();
        },
        defaultDate: moment().format("YYYY-MM-DD"),
        editable: false,
        displayEventEnd: true,
        events: {
            url: 'calendar/test',
            error: function() 
            {
                alert("error");
            },
            success: function()
            {
                console.log("successfully loaded");
            }
        },
        loading: function(bool) 
        {
            console.log("loading");
        },
        eventAfterRender: function (event, element) 
        {
        $(element).tooltip({title:event.title + " working " + event.start.format("h:mm a") + " to " + event.end.format("h:mm a") + ". " + event.end.subtract({hours:event.start.format("H"), minutes:event.start.format("m")}).format("H") + " hours and " + event.end.subtract({hours:event.start.format("H"), minutes:event.start.format("m")}).format("m") + " minutes worked.", container: "body"});
        }       
    });

    });
</script>

Can anyone help point out why I am getting the incorrect time inside the modal for the event end time?

via Chebli Mohamed