vue FullCalendar 将headerToolbar 中title换成input输入框

可以通过自定义 `headerToolbar` 来实现将 `title` 替换为 `input` 输入框。

首先，在 `headerToolbar` 中添加一个 `input` 元素，并设置一个唯一的 `id` 属性：

headerToolbar: {
  left: 'prev,next today',
  center: '<input type="text" id="calendar-title">',
  right: 'dayGridMonth,timeGridWeek,timeGridDay'
},

然后，使用 JavaScript 获取该 `input` 元素，并添加一个 `change` 事件监听器，以在输入框中输入文本时更新 `title`：

document.getElementById('calendar-title').addEventListener('change', function() {
  var newTitle = this.value;
  calendar.setOption('title', newTitle);
});

最后，您可以使用 CSS 对 `input` 元素进行样式设置：

#calendar-title {
  border: none;
  font-size: 1.5rem;
  font-weight: 700;
  width: 100%;
  text-align: center;
  outline: none;
}

完整代码示例：

var calendarEl = document.getElementById('calendar');

var calendar = new FullCalendar.Calendar(calendarEl, {
  headerToolbar: {
    left: 'prev,next today',
    center: '<input type="text" id="calendar-title">',
    right: 'dayGridMonth,timeGridWeek,timeGridDay'
  },
  initialView: 'dayGridMonth',
  events: [
    // events...
  ]
});

document.getElementById('calendar-title').addEventListener('change', function() {
  var newTitle = this.value;
  calendar.setOption('title', newTitle);
});

calendar.render();