Как изменить формат времени события на 24 часа в React Big Calendar

Я использую response-big-calendar для своего проекта. По умолчанию в поле события отображается 12Hours время, как показано ниже.

введите описание изображения здесь

Как мне поменять его на формат 24Hours.


reactjs react-big-calendar
person Hemantha Dhanushka    schedule 22.01.2020    source источник
comment
Удалось найти исправление? У меня на экране так много разных форматов даты. - Вертикальный столбец 24-часовой формат даты - Верхний горизонтальный столбец Индикаторы дня на голландском языке (ma, di, wo, do, vr), но с датами в США рядом с ним (месяц-день). - Месяцы на английском языке в заголовке - 12-часовой формат am / pm в событиях   -  person Nathan Ruth    schedule 12.06.2020
comment
@NathanRuth Еще нет.   -  person Hemantha Dhanushka    schedule 14.06.2020

Ответы (3)


arrow_upward
0
arrow_downward

Если вы измените часовой пояс момента на moment.locale ('en-GB'). он должен работать. Возможно, вы можете попробовать это https://github.com/jquense/react-big-calendar/issues/698.

person Vinay    schedule 17.04.2020

arrow_upward
0
arrow_downward

документация не охватывает этого, но идея состоит в том, чтобы предоставить функцию, которая обрабатывает объект временного диапазона с start и end. Это позволяет вам выбрать, например, какой разделитель поставить между ними.

Попробуйте следующее:

const formats = {
  eventTimeRangeFormat: range =>
    `${format(range.start, 'HH:mm')} – ${format(range.end, 'HH:mm')}`,
};

export default function MyCalendar() {
  return (
     <Calendar
       localizer={localizer}
       formats={formats}
       ...
person Théophile    schedule 29.03.2021

arrow_upward
-1
arrow_downward

вы можете попробовать с кодом ниже. Обычно в формате реакции 24 часа ниже

<BigCalendar format={"DD/MM/YYYY HH:mm"} />
person Oshini    schedule 22.01.2020
comment
Мне нужно преобразовать временной диапазон события в 24Hours, как я уже упоминал на изображении выше. Не заголовок календарной сетки. - person Hemantha Dhanushka; 23.01.2020