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

in v4, you can set the calendar option programmatically to achieve the 24h format for the hour label on the left of the grid:

const slotLabelOption = {
    hour: 'numeric',
    minute: '2-digit',
    omitZeroMinute: false,
    meridiem: 'narrow',
    hour12: false
};
calendar.setOption('slotLabelFormat', slotLabelOption);

For the event time do the same:

 const eventTimeOption = {
        hour: 'numeric',
        minute: '2-digit',
        omitZeroMinute: false,
        meridiem: 'narrow',
        hour12: false
    };
 calendar.setOption('eventTimeFormat', eventTimeOption);

with calendar = new FullCalendar.Calendar(....) //however you initialize it

Answer 2

For some reason these solutions didn’t worked for me anymore.

So after some extensive (cmd+F) search I found this post talking about /includes/js/main.js around line 107. Line 107 lets you change the day/month/year order.

But then! Line 113 (or around) lets you change am/pm, in week and day agenda view, into a time representation which is used by the whole world (except some English speaking countries).

You can change more if you like, but below you'll find the piece code that was good enough for me to have it shown correctly on a Dutch website.

TT:function(a){return a.getHours()<12?"AM":"PM"},u:function(a){return Oa(a,"yyyy-MM-dd'T'HH:mm:ss'Z'")},S:function(a){a=a.getDate();if(a>10&&a<20)return"th";return["st","nd","rd"][a%10-1]||"th"}};Aa.applyAll=$a;Ja.month=mc;Ja.basicWeek=nc;Ja.basicDay=oc;wb({weekMode:"fixed"});Ja.agendaWeek=qc;Ja.agendaDay=rc;wb({allDaySlot:true,allDayText:"hele dag",firstHour:8,slotMinutes:30,defaultEventMinutes:120,axisFormat:"HH:mm",timeFormat:{agenda:"h:mm{ - h:mm}"},dragOpacity:{agenda:0.5},minTime:0, maxTime:22})}) And for your convenience you'll find here the whole main.js fixed for Dutch: http://pastebin.com/HYGHRebZ

I hope this solution will work also for you!

Answer 3

im using version 4.2.0 and it worked with this at the end of events :

      {
      title: 'Birthday Party',
      start: '2019-06-13T07:00:00',
      eventBackgroundColor: '#ff0000',
      allDay:false
      }

  ],
  eventTimeFormat: { 
    hour: '2-digit',
    minute: '2-digit',
    hour12:false
}

});

Answer 4

If you are using fullCalendar v1, you should try adding these:

$('#calendar').fullCalendar({
     [...]// some code,

     axisFormat: 'H:mm',
     timeFormat: {
          agenda: 'H:mm{ - H:mm}'
     }
});

Answer 5

If you wanna change the month view in 24H search and change in fullcalendar.js this:

var dateFormatters = {
    s   : function(d)   { return d.getSeconds() },
    ss  : function(d)   { return zeroPad(d.getSeconds()) },
    m   : function(d)   { return d.getMinutes() },
    mm  : function(d)   { return zeroPad(d.getMinutes()) },
    h   : function(d)   { return d.getHours() % 24 || 24 },             //modificato : era 12 al posto di 24
    hh  : function(d)   { return zeroPad(d.getHours() % 24 || 24) },    //modificato : era 12 al posto di 24
    H   : function(d)   { return d.getHours() },
    HH  : function(d)   { return zeroPad(d.getHours()) },
    d   : function(d)   { return d.getDate() },
    dd  : function(d)   { return zeroPad(d.getDate()) },
    ffffd : function(d,o) { return o.dayNamesShort[d.getDay()] },
    ffffdd: function(d,o) { return o.dayNames[d.getDay()] },
    M   : function(d)   { return d.getMonth() + 1 },
    MM  : function(d)   { return zeroPad(d.getMonth() + 1) },
    MMM : function(d,o) { return o.monthNamesShort[d.getMonth()] },
    MMMM: function(d,o) { return o.monthNames[d.getMonth()] },
    yy  : function(d)   { return (d.getFullYear()+'').substring(2) },
    yyyy: function(d)   { return d.getFullYear() },
    //t : function(d)   { return d.getHours() < 12 ? 'a' : 'p' },
    //tt    : function(d)   { return d.getHours() < 12 ? 'am' : 'pm' },
    //T : function(d)   { return d.getHours() < 12 ? 'A' : 'P' },
    //TT    : function(d)   { return d.getHours() < 12 ? 'AM' : 'PM' },
    t   : function(d)   { return d.getMinutes() == 0 ? ':00' : '' },
    tt  : function(d)   { return d.getHours() < 12 ? '' : '' },
    T   : function(d)   { return d.getHours() < 12 ? '' : '' },
    TT  : function(d)   { return d.getHours() < 12 ? '' : '' },
    u   : function(d)   { return formatDate(d, "yyyy-MM-dd'T'HH:mm:ss'Z'") },
    S   : function(d)   {
        var date = d.getDate();
        if (date > 10 && date < 20) {
            return 'th';
        }
        return ['st', 'nd', 'rd'][date%10-1] || 'th';
    }
};

Answer 6

axisFormat: 'H:mm',
timeFormat: {
    agenda: 'H:mm'
},

it is working on both agendaDay view and event show 24 hr format