Full Calendar Google events start/end format

2
votes

I am using Full Calendar to display some Google Calendars on a webpage. I've added qTip, to display the full event details (location, description, etc.), when the user hovers over an event on the calendar. I'd like the qTip to show the start/end time of the event, formatted as:

Day, Date Month, Start time - End time

with the times in the 24-hour clock.

If I add event.start and event.end to my qTip, then the start and end times appear, but not formatted correctly. I think I need to use the formatdate function, but I can't figure out how. Can anyone help, please? I've pasted my code as it stands below.

<script type='text/javascript'>                     

$(document).ready(function() {
$('#calendar').fullCalendar({
       eventRender: function(event, element) {
        element.qtip({
            content: '<b>' + event.title + event.start +' - ' + event.end + '</b><br><br>LOCATION: ' + event.location + '<br><br> AVAILABILITY: ' + event.description
        })
    },
    eventSources: { 
    url: 'my calendar URL'
    }
});
});
</script>
1
fullcalendargoogle-calendar-api

1 Answers

9
votes

The last versions of FullCalendar include Moment.js, you can format your time like this:

var start = moment(event.start).format("DD-MM-YYYY HH:mm");

More info:

http://momentjs.com/docs/#/parsing/string-format/

http://arshaw.com/fullcalendar/docs/utilities/Moment/