2012-01-31 75 views
20

Estoy tratando de mostrar el formato de 24 horas en fullCalendar, estoy tratando de utilizar estas instrucciones: http://arshaw.com/fullcalendar/docs/text/timeFormat/formato de hora de 24 horas (por lo que no AM a PM) para fullCalendar

Así que he añadido

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

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


    }); 

}); 

pero eso no funcionó, por lo que hemos añadido a 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 

pero eso tampoco funcionó, ¿qué estoy haciendo mal?

Respuesta

41

Desea configurar el diseño para el sistema de 24 horas o los eventos.

Si desea agregar a los eventos, ponga como 22:00 'party' luego agregue timeFormat: 'H: mm', a su archivo json.php.

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

Si desea cambiar el diseño de su calendario a continuación, sólo tiene que ir a sus fullCalendar.js

mirase;

setDefaults

y cambiar su código como el siguiente.

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 

});

+0

gracias, lo tengo trabajando ahora! (bedankt :)) –

7

Si quieres cambiar la vista del mes en busca 24H y el cambio en esta 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'; 
} 

};

1

Si está utilizando v1 fullCalendar, usted debe tratar de la adición de estos:

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

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

Por alguna razón estas soluciones no trabajaron para mí.

Así que después de una extensa búsqueda (cmd + F) encontré esta publicación hablando de /includes/js/main.js alrededor de la línea 107. La línea 107 le permite cambiar el orden día/mes/año.

¡Pero entonces! La línea 113 (o alrededor) le permite cambiar am/pm, en la vista de la agenda de la semana y el día, en una representación de tiempo que es utilizada por todo el mundo (excepto algunos países de habla inglesa).

Puede cambiar más si lo desea, pero a continuación encontrará el código de la pieza que fue lo suficientemente bueno para que se muestre correctamente en un sitio web holandés.

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})}) y para su comodidad encontrará aquí todo el main.js fijos para holandesa: http://pastebin.com/HYGHRebZ

espero que esta solución funcionará también para usted!

0

uso de esta versión 2, más timeFormat: 'H(:mm)',

0

axisFormat: 'H: mm', timeFormat: { agenda: 'H: mm' },

está funcionando. tanto en la agenda como en la vista del día y evento show formato 24hr

Cuestiones relacionadas