24-часовой формат времени (поэтому без AM до PM) для fullCalendar - PullRequest
27 голосов
/ 31 января 2012

Я пытаюсь отобразить 24-часовой формат времени в fullCalendar, я пытаюсь использовать следующие инструкции: http://arshaw.com/fullcalendar/docs/text/timeFormat/

Итак, я добавил

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


    });

});

но это не сработало, поэтому я добавил в 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

но это тоже не сработало, что я делаю не так?

Ответы [ 10 ]

47 голосов
/ 01 февраля 2012

Вы хотите установить макет на 24-часовую систему или события.

Если вы хотите добавить к событиям, поставьте как 22:00 «вечеринка», затем добавьте timeFormat: «Ч: мм»,в ваш файл json.php.

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

Если вы хотите изменить макет своего календаря, просто перейдите к вашему fullCalendar.js

Просмотрите:

setDefaults

И измените свой код следующим образом.

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
});
26 голосов
/ 12 декабря 2015

Эта опция теперь работает для меня в fullCalendar v2:

slotLabelFormat:"HH:mm"

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

9 голосов
/ 28 августа 2013

Если вы хотите изменить представление месяца в поиске за 24 часа и изменить в 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';
    }
};
3 голосов
/ 17 июля 2018

Ответ с наибольшим количеством голосов работает для более старых версий. Для более новых версий добавьте еще одну переменную в SetDefaults:

slotLabelFormat:'H(:mm)',

Это должно работать для более новых версий (2018), таких как FullCalendar v3.9.0

1 голос
/ 10 июля 2019

я использую версию 4.2.0, и она работала с этим в конце событий:

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

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

});
1 голос
/ 27 февраля 2018
axisFormat: 'H:mm',
timeFormat: {
    agenda: 'H:mm'
},

работает как в режиме agendaDay, так и в режиме отображения событий 24 часа

1 голос
/ 17 мая 2017

используйте это для v.2 плюс timeFormat: 'H(:mm)',

1 голос
/ 01 февраля 2015

Почему-то эти решения больше не работали для меня.

Итак, после некоторого расширенного (cmd + F) поиска я обнаружил, что этот пост говорит о /include/js/main.js вокруг строки 107. Строка 107 позволяет вам изменить порядок дня / месяца / года.

Но тогда! Строка 113 (или около того) позволяет вам изменить am / pm в представлении повестки дня на неделю и день на представление времени, которое используется всем миром (за исключением некоторых англоязычных стран).

Вы можете изменить больше, если хотите, но ниже вы найдете фрагмент кода, который был достаточно хорош для меня, чтобы он правильно отображался на голландском веб-сайте.

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})}) И для вашего удобства вы найдете здесь весь main.js, исправленный для голландского: http://pastebin.com/HYGHRebZ

Надеюсь, это решение подойдет и вам!

1 голос
/ 03 июля 2014

Если вы используете fullCalendar v1, попробуйте добавить следующее:

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

     axisFormat: 'H:mm',
     timeFormat: {
          agenda: 'H:mm{ - H:mm}'
     }
});
0 голосов
/ 06 мая 2019

Начиная с версии fullCalendar.io версии 4, в зависимости от того, где вы хотите изменить формат, используйте eventTimeFormat , titleFormat , columnHeaderFormat или slotLabelFormat (последний для оси в временных сетках) в следующем виде:

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
}

В комментариях отображаются значения параметров.

Для справки: https://fullcalendar.io/docs/date-formatting

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...