24-Stunden-Zeitformat (also kein AM bis PM) für fullCalendar

Lesezeit: 4 Minuten

Benutzer-Avatar
Maarten Hartmann

Ich versuche, das 24-Stunden-Zeitformat in fullCalendar anzuzeigen, ich versuche, diese Anweisungen zu verwenden: http://arshaw.com/fullcalendar/docs/text/timeFormat/

Also habe ich hinzugefügt

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

zu 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();
        }
    });
});

aber das hat nicht funktioniert, also habe ich zu fullCalendar.js hinzugefügt

// 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

aber das hat auch nicht funktioniert, was mache ich falsch?

Benutzer-Avatar
Stino

Sie möchten das Layout auf 24-Stunden-System oder die Ereignisse einstellen.

Wenn Sie etwas zu den Ereignissen hinzufügen möchten, geben Sie wie 22:00 ‘party’ ein und fügen Sie dann timeFormat: ‘H:mm’ zu Ihrer json.php-Datei hinzu.

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

Wenn Sie das Layout Ihres Kalenders ändern möchten, gehen Sie einfach zu Ihrer fullCalendar.js

Sieh nach oben:

setDefaults

Und ändern Sie Ihren Code wie folgt.

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

Diese Option funktioniert jetzt für mich in fullCalendar v2:

slotLabelFormat:"HH:mm"

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

  • slotLabelFormat ist bis v3 nicht verfügbar

    – Samuel Ev

    24. September 2019 um 4:39 Uhr

  • slotLabelFormat: {hour: 'numeric', minute: '2-digit', hour12: false} für Version v5.10.2

    – lafeber

    13. Mai um 10:07 Uhr

Ich verwende Version 4.2.0 und es hat am Ende der Ereignisse damit funktioniert:

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

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

});

  • das funktioniert gut !!… Hätte leichter verständlich sein sollen Dokumente obwohl, Gefunden jetzt mit Ihrer guten Antwort .. Thnx

    – Irf

    12. Februar 2020 um 12:14 Uhr

  • Danke, ich verwende Version 5.4.0 und es hat auch funktioniert!

    – kw88

    31. Dezember 2020 um 3:59 Uhr

Benutzer-Avatar
jöck

Ab fullCalendar.io Version 4 verwenden Sie je nachdem, wo Sie das Format ändern möchten eventTimeFormat, Titelformat, Spaltenkopfformat oder slotLabelFormat (letzte für die Achse in Zeitrastern) in der folgenden 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
}

Die Kommentare zeigen die Wertoptionen an.

Weitere Referenzen: https://fullcalendar.io/docs/date-formatting

Benutzer-Avatar
fausto

Wenn Sie die Monatsansicht in der 24-Stunden-Suche ändern und in fullcalendar.js Folgendes ändern möchten:

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

Mit v.4 war so etwas für mich notwendig, um das 24-Stunden-Format zu erreichen:

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

Benutzer-Avatar
mzrnsh

Die am meisten positiv bewertete Antwort funktioniert für ältere Versionen. Fügen Sie für neuere Versionen eine weitere Variable hinzu SetDefaults:

slotLabelFormat:'H(:mm)',

Dies sollte für neuere Versionen (2018) wie FullCalendar v3.9.0 funktionieren

  • gibt mir “t.cmdFormatter ist keine Funktion” in v4

    – Fanky

    28. Mai 2019 um 11:55 Uhr

1217320cookie-check24-Stunden-Zeitformat (also kein AM bis PM) für fullCalendar

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy