Fullcalendar headerToolbar 按钮显示为两个按钮答案

【问题标题】：Fullcalendar headerToolbar button displays as two buttonsFullcalendar headerToolbar 按钮显示为两个按钮
【发布时间】：2021-02-06 13:46:06
【问题描述】：

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

这是我的日历选项：

  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？

【问题讨论】：

标签： fullcalendar ionic5 angular10 fullcalendar-5

【解决方案1】：

去掉字符串中的逗号即可解决问题...：

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

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

【讨论】：

不错！在这里，我认为这是一个未实现的下拉菜单。您还可以删除逗号后的空格并获得连接按钮（至少使用引导主题系统）。