24 hour time format (so no AM to PM) for fullCalendar

Question

I'm trying to display the 24 hour time format in fullCalendar, I'm trying to use these instructions: http://arshaw.com/fullcalendar/docs/text/timeFormat/

So I've added

timeFormat: {
    agenda: 'H(:mm)' //h:mm{ - h:mm}'
},

to json.php :

$(document).ready(function() {
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: true,
        allDayDefault: false,
        events: "core/displays/calendar/json-events.php", 
        defaultView: 'agendaDay',
        timeFormat: {
            agenda: 'H(:mm)' //h:mm{ - h:mm}'
        },
        eventDrop: function(event, delta) {
            alert(event.title + ' was moved ' + delta + ' days\n' + '(should probably update your database)');
        },
        eventClick: function(calEvent, jsEvent, view) {     
            window.location = "details_view.php?id=" + calEvent.id;
        },
        loading: function(bool) {
            if (bool)
                $('#loading').show();
            else
                $('#loading').hide();
        }
    });
});

but that didn't work, so I've added to fullCalendar.js

// time formats
titleFormat: {
    month: 'MMMM yyyy',
    week: "MMM d[ yyyy]{ '—'[ MMM] d yyyy}",
    day: 'dddd, MMM d, yyyy'
},
columnFormat: {
    month: 'ddd',
    week: 'ddd M/d',
    day: 'dddd M/d'
},
axisFormat: 'H(:mm)', //,'h(:mm)tt',
timeFormat: {
    agenda: 'H(:mm)' //h:mm{ - h:mm}'
},
// locale

but that didn't work either, what am I doing wrong?

Answer 1

You want to set the layout to 24 hour system or the events.

If you want to add to the events, put like 22:00 'party' then add timeFormat: 'H:mm' , to your json.php file.

eventDrop: function (event, delta) {
        alert(event.title + ' was moved ' + delta + ' days\n' +
            '(should probably update your database)');
},
timeFormat: 'H:mm',

If you want to change the layout of your calendar then just go to your fullCalendar.js

Look up:

setDefaults

And change your code like the following.

setDefaults({
    allDaySlot: true,
    allDayText: 'Volledige dag',
    firstHour: 8,
    slotMinutes: 30,
    defaultEventMinutes: 120,
    axisFormat: 'HH:mm',
    timeFormat: {
        agenda: 'H:mm{ - h:mm}'
    },
    dragOpacity: {
        agenda: .5
    },
    minTime: 0,
    maxTime: 24
});