jQuery fullCalendar 的 24 小时时间格式（所以没有 AM 到 PM）

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

提问by Maarten Hartman

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/

我正在尝试在 fullCalendar 中显示 24 小时时间格式，我正在尝试使用这些说明：http://arshaw.com/fullcalendar/docs/text/timeFormat/

So I've added

所以我添加了

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

to json.php :

到 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

但这不起作用，所以我添加到 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?

但这也不起作用，我做错了什么？

回答by Stino

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

您想将布局设置为 24 小时制或事件。

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

如果你想添加到事件中，像 22:00 'party' 然后添加 timeFormat: 'H:mm' 到你的 json.php 文件中。

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

如果您想更改日历的布局，请转到 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
});

回答by Ekaterina Tokareva

This option works now for me in fullCalendar v2 :

这个选项现在在 fullCalendar v2 中对我有用：

slotLabelFormat:"HH:mm"

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

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

回答by fausto

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

如果您想在 24 小时搜索中更改月视图并在 fullcalendar.js 中更改：

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

回答by guppy

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

我使用的是 4.2.0 版，它在活动结束时使用了这个：

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

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

});

回答by joeck

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

从 fullCalendar.io 版本 4 开始，根据您希望更改格式的位置，以下列形式使用eventTimeFormat、titleFormat、columnHeaderFormat或slotLabelFormat（时间网格中的轴的最后一个）：

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: //fullcalendar.io/docs/date-formatting

回答by goose

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

最受好评的答案适用于旧版本。对于较新的版本，在 中添加另一个变量SetDefaults：

slotLabelFormat:'H(:mm)',

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

这应该适用于较新的版本（2018），例如 FullCalendar v3.9.0

回答by Serdar KU?

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

将此用于 v.2 plustimeFormat: 'H(:mm)',

回答by user3401419

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

it is working on both agendaDayview and event show 24 hr format

它正在处理agendaDay视图和事件显示 24 小时格式

回答by hellowdiie

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

如果您使用 fullCalendar v1，您应该尝试添加这些：

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

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

回答by Joid

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.

因此，经过一些广泛的 (cmd+F) 搜索后，我发现这篇文章在第 107 行附近讨论了 /includes/js/main.js。第 107 行允许您更改日/月/年的顺序。

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).

但是之后！第 113 行（或周围）可让您将周和日议程视图中的 am/pm 更改为全世界使用的时间表示（某些英语国家除外）。

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

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})}) 为方便起见，您可以在此处找到针对荷兰语修复的整个 main.js：http://pastebin.com/HYGHRebZ

I hope this solution will work also for you!

我希望这个解决方案也适用于你！