fullCalendar 的 24 小时时间格式（所以没有上午到下午）
Posted
技术标签:
【中文标题】fullCalendar 的 24 小时时间格式（所以没有上午到下午）【英文标题】：24 hour time format (so no AM to PM) for fullCalendar 【发布时间】：2012-02-23 06:07:02 【问题描述】：我正在尝试以 fullCalendar 显示 24 小时时间格式，我正在尝试使用这些说明：http://arshaw.com/fullcalendar/docs/text/timeFormat/
所以我添加了
timeFormat:
agenda: 'H(:mm)' //h:mm - h:mm'
,
到 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();
);
);
但这不起作用，所以我添加到 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
但这也不起作用，我做错了什么？
【问题讨论】：
【参考方案1】：试试这个，它会起作用的
1 - first thing :
将此行添加到您的选项中
locale: 'en-GB',
它会从 0 ... 24 开始
2 - second thing :
并添加这一行
slotLabelFormat:
hour: 'numeric',
minute: '2-digit',
omitZeroMinute: false,
,
在 slotLabelFormat 中，您可以自定义日历中的时间 现在它将从 00:00 .... 23:00 开始
【讨论】：
【参考方案2】：v4 vue.js
<div>
<FullCalendar
[...] // some code
:eventTimeFormat="
hour: '2-digit',
minute: '2-digit',
hour12: false
"
/>
</div>
【讨论】：
【参考方案3】：在 v4 中，您可以通过编程设置日历选项以实现网格左侧小时标签的 24 小时格式：
const slotLabelOption =
hour: 'numeric',
minute: '2-digit',
omitZeroMinute: false,
meridiem: 'narrow',
hour12: false
;
calendar.setOption('slotLabelFormat', slotLabelOption);
在活动时间做同样的事情：
const eventTimeOption =
hour: 'numeric',
minute: '2-digit',
omitZeroMinute: false,
meridiem: 'narrow',
hour12: false
;
calendar.setOption('eventTimeFormat', eventTimeOption);
with calendar = new FullCalendar.Calendar(....) //不管你如何初始化它
【讨论】：
【参考方案4】：对于 v.4，我需要这样的东西来实现 24 小时格式：
slotLabelFormat: hour: 'numeric', minute: '2-digit', hour12: false
【讨论】：
【参考方案5】：我使用的是 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
);
【讨论】：
这很好用!!......虽然在 docs 中应该更容易理解，但使用你的好答案找到它now..Thnx 谢谢，我用的是 5.4.0 版本，也可以用！【参考方案6】：从 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
cmets 显示值选项。
更多参考：https://fullcalendar.io/docs/date-formatting
【讨论】：
这仅适用于事件框，不适用于网格标签（并且您在第一个 false 之后缺少“，”【参考方案7】：如果您想在 24H 搜索中更改月份视图并在 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';
;
【讨论】：
【参考方案8】：最受好评的答案适用于旧版本。
对于较新的版本，请在 SetDefaults 中添加另一个变量：
slotLabelFormat:'H(:mm)',
这应该适用于较新的版本 (2018)，例如 FullCalendar v3.9.0
【讨论】：
在 v4 中给了我“t.cmdFormatter 不是函数”【参考方案9】：axisFormat: 'H:mm',
timeFormat:
agenda: 'H:mm'
,
它适用于 agendaDay 视图和事件显示 24 小时格式
【讨论】：
【参考方案10】：您想将布局设置为 24 小时制或事件。
如果你想添加到事件中，像 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',
如果您想更改日历的布局，只需转到您的 fullCalendar.js
向上看：
设置默认值
然后像下面这样更改你的代码。
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
);
【讨论】：
【参考方案11】：将此用于 v.2 plustimeFormat: 'H(:mm)',
【讨论】：
【参考方案12】：这个选项现在在 fullCalendar v2 中适用于我：
slotLabelFormat:"HH:mm"
http://fullcalendar.io/docs/agenda/slotLabelFormat/
【讨论】：
slotLabelFormat 在 v3 之前不可用【参考方案13】：由于某种原因，这些解决方案不再适合我了。
因此，经过大量 (cmd+F) 搜索后，我发现这篇文章在第 107 行左右谈论 /includes/js/main.js。第 107 行允许您更改日/月/年顺序。
然后！第 113 行（或附近）让您可以在周和日议程视图中将 am/pm 更改为全世界（除了一些英语国家）使用的时间表示。
如果您愿意，您可以进行更多更改，但您会在下面找到足以让我在荷兰网站上正确显示的代码。
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
我希望这个解决方案也对你有用！
【讨论】：
【参考方案14】：如果您使用的是 fullCalendar v1，您应该尝试添加这些：
$('#calendar').fullCalendar(
[...]// some code,
axisFormat: 'H:mm',
timeFormat:
agenda: 'H:mm - H:mm'
);
【讨论】：
以上是关于fullCalendar 的 24 小时时间格式（所以没有上午到下午）的主要内容，如果未能解决你的问题，请参考以下文章
C#如何将DateTime的12小时格式转换为24小时时间格式？？？？
C#如何将DateTime的12小时格式转换为24小时时间格式？？？？