24 小时时间格式(因此没有 AM 到 PM)用于完整日历

我正在尝试在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 + ' daysn' + '(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();
        }
    });
});

但这不起作用，所以我添加了完整日历.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

但这也没有用，我做错了什么？

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

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

eventDrop: function (event, delta) {
        alert(event.title + ' was moved ' + delta + ' daysn' +
            '(should probably update your database)');
},
timeFormat: 'H:mm',

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

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

slotLabelFormat:"HH:mm"

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

im 使用版本 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
}
});

从 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
}

注释显示值选项。

更多参考： https://fullcalendar.io/docs/date-formatting

对于 v.4，这样的事情对我来说是实现 24 小时格式所必需的：

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

如果要在24小时搜索中更改月份视图并在完整日历中进行更改.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';
    }
};

投票最多的答案适用于旧版本。对于较新的版本，请在SetDefaults中添加另一个变量：

slotLabelFormat:'H(:mm)',

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

在 v4 中用于 vue.js

<div>    
    <FullCalendar
       [...] // some code
       :eventTimeFormat="{
             hour: '2-digit',
             minute: '2-digit',
             hour12: false
       }"
    />
</div>

对于 v.5，这样的东西对我来说是实现 24 小时格式所必需的：

<FullCalendar
    eventTimeFormat={{
        hour: '2-digit',
        minute: '2-digit',
        hour12: false
    }}
    slotLabelFormat={{
        hour: 'numeric',
        minute: '2-digit',
        hour12: false
    }}
>

eventTimeFormat 24 小时将议程标签放在 24 小时.
slotLabelFormat 24 小时开放。

如果您使用的是 fullCalendar v1，则应尝试添加以下内容：

$('#calendar').fullCalendar({
     [...]// some code,
     axisFormat: 'H:mm',
     timeFormat: {
          agenda: 'H:mm{ - H:mm}'
     }
});

由于某种原因，这些解决方案不再对我有用。

因此，经过一些广泛的(cmd + F(搜索，我发现这篇文章在第107行左右谈论/include/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})})为了您的方便，您会在这里找到整个主要的.js固定的荷兰语：http://pastebin.com/HYGHRebZ

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

将其

用于 v.2 加timeFormat: 'H(:mm)',

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

它正在agendaDay视图和活动显示 24 小时格式上工作

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

与日历 = 新的 FullCalendar.Calendar(....(//无论您如何初始化它

试试这个，它会起作用

1 - first thing :

将此行添加到您的选项

locale: 'en-GB',

它将从 0 开始...24

2 - second thing :

并添加此行

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

内部插槽标签格式，您可以在日历中自定义时间现在它将从 00：00 开始....23：00

相关内容

最新更新

热门标签：