Fullcalendar headerToolbar 按钮显示为两个按钮

Question

我正在 ionic 5 应用程序中测试 fullcalendar/angular 5，视图的 header 工具栏显示为两个按钮：

这是我的日历选项：

  calendarOptions: CalendarOptions = {
    contentHeight: "auto",
    headerToolbar: {
      left: 'title',
      center: 'timeGridMes, timeGridDia',
      right: 'prev,next today'
    },
    initialView: 'timeGridDia',
    weekends: true,
    editable: false,
    selectable: true,
    selectMirror: true,
    dayMaxEvents: true,
    allDaySlot:false,      
    initialDate: new Date(),
    firstDay: 1,
    fixedWeekCount: false,
    locale: 'es',
    slotMinTime : "08:00:00",
    slotMaxTime : "23:00:00",
    navLinks: true,
    nowIndicator: true,
    slotDuration: "00:15:00",
    slotLabelInterval: "00:15:00",
    eventTimeFormat: { hour12: false, hour: '2-digit', minute: '2-digit' },
    showNonCurrentDates: true,
    timeZone: 'local',
    weekNumbers: true,
    weekText: "S",
    buttonText: {
      today: 'Hoy'
    },
    views: {
      timeGridMes: {
        type: 'dayGridMonth',
        dayMaxEventRows: 4,
        buttonText: 'Mes',
        titleFormat: { year: 'numeric', month: 'short'}
      },
      timeGridDia: {
        type: 'timeGridDay',
        buttonText: 'Día',
        titleFormat: { month: 'short', day: 'numeric' }
      }
    },
    select: this.handleDateSelect.bind(this),
    eventClick: this.handleEventClick.bind(this),
    eventsSet: this.handleEvents.bind(this)

  };

这是它生成的html：

<div class="fc-toolbar-chunk">
    <div class="fc-button-group">
        <button class="fc-timeGridMes-button fc-button fc-button-primary" type="button">Mes</button>
        <button class="fc--button fc-button fc-button-primary" type="button"></button>
    </div>
    <button class="fc-timeGridDia-button fc-button fc-button-primary fc-button-active" type="button">Día</button>
</div>

为什么用 class = "fc-button-group" 和两个按钮生成 div？

Answer 1

删除字符串中的逗号解决了问题...:[=12=]

headerToolbar: {
  left: 'title',
  center: 'timeGridMes timeGridDia',
  right: 'prev next today'
},

https://github.com/fullcalendar/fullcalendar/issues/5821#issue-701022933

Fullcalendar headerToolbar 按钮显示为两个按钮

Fullcalendar headerToolbar button displays as two buttons

fullcalendar

ionic5

angular10

fullcalendar-5