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

Answer 1

use this for v.2 plustimeFormat: 'H(:mm)',

Answer 2

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

Answer 3

in v4 for vue.js

<div>    
    <FullCalendar

       [...] // some code

       :eventTimeFormat="{
             hour: '2-digit',
             minute: '2-digit',
             hour12: false
       }"
    />
</div>

Answer 4

This option works now for me in fullCalendar v2 :

slotLabelFormat:"HH:mm"

http://fullcalendar.io/docs/agenda/slotLabelFormat/

Answer 5

With v.4 something like this was necessary for me to achieve 24-hours format:

slotLabelFormat: {hour: 'numeric', minute: '2-digit', hour12: false}

Answer 6

As of fullCalendar.io version 4, depending on where you want the format to change, use eventTimeFormat, titleFormat, columnHeaderFormat or slotLabelFormat (last one for the axis in timegrids) in the following form :

eventTimeFormat: {
  hour: '2-digit', //2-digit, numeric
  minute: '2-digit', //2-digit, numeric
  second: '2-digit', //2-digit, numeric
  meridiem: false, //lowercase, short, narrow, false (display of AM/PM)
  hour12: false //true, false
}

The comments display the value options.

For more reference: https://fullcalendar.io/docs/date-formatting