web-dev-qa-db-fra.com

Format horaire 24 heures (donc pas du matin au soir) pour fullCalendar

J'essaie d'afficher le format 24 heures dans fullCalendar, j'essaie d'utiliser ces instructions: http://arshaw.com/fullcalendar/docs/text/timeFormat/

J'ai donc ajouté

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


    });

});

mais cela n'a pas fonctionné, j'ai donc ajouté à 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

mais cela n'a pas fonctionné non plus, qu'est-ce que je fais mal?

jquerytimefullcalendar
29
Maarten Hartman

Vous souhaitez définir la disposition sur un système de 24 heures ou sur les événements.

Si vous voulez ajouter aux événements, mettez comme 22:00 'party' puis ajoutez timeFormat: 'H: mm', à votre fichier json.php.

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

Si vous souhaitez modifier la disposition de votre calendrier, accédez simplement à votre fullCalendar.js

Chercher:

setDefaults

Et changez votre code comme suit.

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

Cette option fonctionne maintenant pour moi dans fullCalendar v2:

slotLabelFormat:"HH:mm"

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

29
Ekaterina Tokareva

Si vous voulez changer la vue du mois dans la recherche 24H et changer dans fullcalendar.js ceci:

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

La réponse la plus votée fonctionne pour les anciennes versions. Pour les versions plus récentes, ajoutez une autre variable dans SetDefaults:

slotLabelFormat:'H(:mm)',

Cela devrait fonctionner pour les versions plus récentes (2018), comme FullCalendar v3.9.0

3
bubble

im utilisant la version 4.2.0 et cela a fonctionné à la fin des événements:

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

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

});
2
guppy

Pour une raison quelconque, ces solutions ne fonctionnaient plus pour moi.

Donc, après quelques recherches approfondies (cmd + F), j'ai trouvé cet article parlant de /includes/js/main.js autour de la ligne 107. La ligne 107 vous permet de modifier l'ordre jour/mois/année.

Mais alors! La ligne 113 (ou autour) vous permet de changer am/pm, dans la vue de l'agenda de la semaine et du jour, en une représentation horaire utilisée par le monde entier (à l'exception de certains pays anglophones).

Vous pouvez changer plus si vous le souhaitez, mais ci-dessous, vous trouverez le code pièce qui était assez bon pour que je le montre correctement sur un site néerlandais.

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})}) Et pour votre commodité, vous trouverez ici l'intégralité de main.js corrigé pour le néerlandais: http://Pastebin.com/HYGHRebZ

J'espère que cette solution fonctionnera aussi pour vous!

1
Joid

utilisez ceci pour v.2 plustimeFormat: 'H(:mm)',

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

il fonctionne à la fois sur agendaDay vue et événement au format 24 heures

1
user3401419

Si vous utilisez fullCalendar v1, vous devez essayer d'ajouter ceux-ci:

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

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

Depuis la version 4 de fullCalendar.io, selon l'endroit où vous souhaitez modifier le format, utilisez eventTimeFormat , titleFormat , columnHeaderFormat ou slotLabelFormat (le dernier pour l'axe dans les grilles de temps) sous la forme suivante:

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
}

Les commentaires affichent les options de valeur.

Pour plus de référence: https://fullcalendar.io/docs/date-formatting

1
joeck