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