после рендеринга события не отображаются в 24-часовом формате Full Calendar - PullRequest
Новая
       24

после рендеринга события не отображаются в 24-часовом формате Full Calendar

0 голосов
/ 27 апреля 2020

Я запустил fullCalendar с такими настройками, как 

  config: {
    plugins: [interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin, momentPlugin],
    // axisFormat: 'HH',
    slotLabelFormat:"HH:mm",
    defaultView: 'timeGridWeek',
    allDaySlot: false,
    slotDuration: '00:60:00',
    columnFormat: 'dddd',
    columnHeaderFormat: { weekday: 'short' },
    defaultDate: '1970-01-01',
    dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    eventLimit: true,
    eventOverlap: false,
    eventColor: '#458CC7',
    firstDay: 1,
    height: 'auto',
    selectHelper: true,
    selectable: true,
    timezone: 'UTC',
    header: {
      left: '',
      center: '',
      right: ''
    },
    editable: true,
    events: null,
    eventTimeFormat: { // like '14:30:00'
      hour: '2-digit',
      minute: '2-digit',
      meridiem: false
    }
  },

, и я пытаюсь показать события с временем начала и окончания в 24-часовом формате. но они отображаются в 12-часовом формате. Ниже приведен вывод, который я получаю в данный момент, а последнее изображение - это вывод, который я на самом деле хочу.

enter image description here

Это способ отображения событий в Календаре. 

renderEvents () {
  const schedule = JSON.parse(this.schedule)
  const calendarWeek = this.currentCalendarWeek()
  const days = Object.keys(schedule)

  days.forEach((weekDay) => {
    const day = schedule[weekDay]
    if (day.length != 0) {
      day.forEach((event) => {
        const start = event.split('-')[0]
        const end = event.split('-')[1]

        const addEvent = {
          id: this.generate_random_string(4),
          start: moment(`${calendarWeek[weekDay]} ${start}`, 'YYYY-MM-DD HH:mm')._i,
          end: moment(`${calendarWeek[weekDay]} ${end}`, 'YYYY-MM-DD HH:mm')._i
        }
        this.calendar.addEvent(addEvent)
      })
    }
  })
},

и this.schedule - 

  schedule: JSON.stringify({
    Monday: ['08:00-18:00'],
    Tuesday: ['08:00-18:00'],
    Wednesday: ['08:00-18:00'],
    Thursday: ['08:00-18:00'],
    Friday: ['08:00-18:00'],
    Saturday: [],
    Sunday: []
  }),

Даже при добавлении нового события. это не 24-часовой формат времени

Как вместо этого получить вывод.

enter image description here

1 Ответ

0 голосов
/ 27 апреля 2020

Чтобы получить 24-часовой формат, у вас есть два способа сделать это.

Вы можете либо

1) Установить параметр hour12: false в вашем eventTimeFormat, например, 

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

Демонстрация: https://codepen.io/ADyson82/pen/xxwdNYa

(Документация eventTimeFormat описывает это, но немного неточно / неясно. Общий fullCalendar документация по форматированию даты делает это намного понятнее, если вы посмотрите там.)

ИЛИ

2) Поскольку вы уже используете момент JS Плагин (и уже использующий его для установки формата времени ваших слотов), вы можете использовать простой формат времени, идентичный тому, который вы уже установили для slotLabelFormat: 

eventTimeFormat: "HH:mm"

Демо: https://codepen.io/ADyson82/pen/KKdmLbv

...