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?
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
});
Cette option fonctionne maintenant, pour moi, dans fullCalendar v2 :
slotLabelFormat:"HH:mm"
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';
}
};
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}'
}
});
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!
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
axisFormat: 'H:mm',
timeFormat: {
agenda: 'H:mm'
},
Il fonctionne à la fois sur agendaDay view et event show 24 h format