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

问题

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]{ '&#8212;'[ 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?

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

回答2:

This option works now for me in fullCalendar v2 :

slotLabelFormat:"HH:mm"

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

回答3:

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()) },
    ddd : function(d,o) { return o.dayNamesShort[d.getDay()] },
    dddd: 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';
    }
};

回答4:

The most upvoted answer works for older versions. For newer versions add another variable in SetDefaults:

slotLabelFormat:'H(:mm)',

This should work for newer versions (2018), like FullCalendar v3.9.0

回答5:

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
}

});

回答6:

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

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

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

回答7:

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!

回答8:

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

回答9:

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

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

回答10:

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

来源：https://stackoverflow.com/questions/9080944/24-hour-time-format-so-no-am-to-pm-for-fullcalendar

标签

jquery

time

fullcalendar