Format de l'heure 24 heures (donc pas AM à PM) pour fullCalendar

J'essaie d'afficher le format de l'heure 24 heures en 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}'
    },

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


    });

});

Mais cela n'a pas fonctionné, donc j'ai 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 de mal?

21
demandé sur AstroCB 2012-01-31 18:10:49

8 réponses

Vous souhaitez définir la mise en page sur le système 24 heures ou les événements.

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

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

Si vous voulez changer la mise en page de votre calendrier, allez simplement dans votre fullCalendar.js

Rechercher:

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
});
44
répondu Stino 2018-04-04 06:06:11

Cette option fonctionne maintenant, pour moi, dans fullCalendar v2 :

slotLabelFormat:"HH:mm"

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

23
répondu Ekaterina Tokareva 2015-12-12 14:01:12

Si vous voulez changer la vue mensuelle en recherche 24H et changer en 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';
}

};

7
répondu fausto 2013-08-28 08:20:02

Si vous utilisez fullCalendar v1, vous devriez essayer d'ajouter ces éléments:

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

     axisFormat: 'H:mm',
     timeFormat: {
          agenda: 'H:mm{ - H:mm}'
     }
});
1
répondu hellowdiie 2014-07-02 21:08:21

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

Donc, après une longue recherche (cmd + F), j'ai trouvé ce post 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! Ligne 113 (ou autour) vous permet de changer am / pm, en vue de l'ordre du jour de la semaine et le jour, dans une représentation de temps qui est utilisé par le monde entier (sauf certains pays anglophones).

Vous pouvez changer plus si vous le souhaitez, mais ci-dessous vous trouvez le code de pièce qui était assez bon pour moi de l'avoir montré correctement sur un site web 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 tout le principal.js fixé pour le néerlandais: http://pastebin.com/HYGHRebZ

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

1
répondu Joid 2015-02-01 13:54:18

Utilisez ceci pour v. 2 plus timeFormat: 'H(:mm)',

1
répondu Serdar KUŞ 2017-05-17 18:26:59

La réponse la plus upvoted 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

1
répondu bubble 2018-07-17 15:19:40
axisFormat: 'H:mm',
timeFormat: {
    agenda: 'H:mm'
},

Il fonctionne à la fois sur agendaDay view et event show 24 h format

0
répondu user3401419 2018-05-22 12:29:13