web-dev-qa-db-ja.com

fullCalendarの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 + ' 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

しかし、それもうまくいきませんでした、私は何を間違っていますか？

jquerytimefullcalendar
29
Maarten Hartman

レイアウトを24時間制またはイベントに設定する必要があります。

イベントに追加する場合は、22：00のように 'party'を入力してから、json.phpファイルにtimeFormat： 'H：mm'を追加します。

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

カレンダーのレイアウトを変更する場合は、fullCalendar.jsに移動します

見上げる：

setDefaults

そして、次のようにコードを変更します。

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
});
51
Stino

FullCalendar v2でこのオプションが機能するようになりました。

slotLabelFormat:"HH:mm"

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

29
Ekaterina Tokareva

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

最も賛成の答えは、古いバージョンで機能します。新しいバージョンの場合は、SetDefaultsに別の変数を追加します。

slotLabelFormat:'H(:mm)',

これは、FullCalendar v3.9.0などの新しいバージョン（2018）で機能するはずです。

3
bubble

私はバージョン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
}

});
2
guppy

何らかの理由で、これらのソリューションはもう機能しませんでした。

そのため、広範囲にわたる（cmd + F）検索の後、この投稿で107行目の/includes/js/main.jsについて話していることがわかりました。107行目では、日/月/年の順序を変更できます。

しかしその後！ 113行目（またはその周辺）では、午前/午後の曜日と曜日の予定表ビューを、全世界（一部の英語圏の国を除く）で使用される時間表現に変更できます。

必要に応じてさらに変更できますが、オランダのWebサイトで正しく表示するのに十分な作品コードを以下に示します。

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

このソリューションがあなたにも役立つことを願っています！

1
Joid

これをv.2に使用plustimeFormat: 'H(:mm)',

1
Serdar KUŞ
axisFormat: 'H:mm',
timeFormat: {
    agenda: 'H:mm'
},

agendaDayビューとイベント表示24時間形式の両方で機能しています

1
user3401419

FullCalendar v1を使用している場合、これらを追加してみてください。

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

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

FullCalendar.ioバージョン4の時点で、フォーマットを変更する場所に応じて、 eventTimeFormat 、 titleFormat 、 columnHeaderFormat または 次の形式のslotLabelFormat （タイムグリッドの軸の最後の1つ）：

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

1
joeck