全日历编辑标题工具栏标题

Question

我有一个简单的全日历，它在标题工具栏中有按钮

问题是，如何更改这些按钮中的标题？

假设不是

month view

，而是

month

，而不是

Next day

，只是

Next

。

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'UTC',
    headerToolbar: {
      left: 'today prev,next',
      center: 'title',
      right: 'resourceTimelineDay,resourceTimelineMonth,resourceTimelineYear'
    },
    initialView: 'resourceTimelineDay',
    scrollTime: '08:00',
    aspectRatio: 1.5,
    editable: true,
    resourceAreaHeaderContent: 'Rooms',
    resources: 'https://fullcalendar.io/api/demo-feeds/resources.json?with-nesting&with-colors',
    events: 'https://fullcalendar.io/api/demo-feeds/events.json?single-day&for-resource-timeline'
  });

  calendar.render();
});

html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 1100px;
  margin: 40px auto;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/main.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/main.min.js"></script>
<div id='calendar'></div>

Answer 1

完整日历中的咏叹调标签或标题值被描述为提示，在此示例中，借助选项

buttonHints

向上一个、下一个按钮添加提示。所以只需将其作为日历选项添加到您的代码中即可。

在您的示例中添加更改代码如下

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'UTC',
    headerToolbar: {
      left: 'today prev,next',
      center: 'title',
      right: 'resourceTimelineDay,resourceTimelineMonth,resourceTimelineYear'
    },
    initialView: 'resourceTimelineDay',
    scrollTime: '08:00',
    aspectRatio: 1.5,
    editable: true,
    resourceAreaHeaderContent: 'Rooms',
    resources: 'https://fullcalendar.io/api/demo-feeds/resources.json?with-nesting&with-colors',
    events: 'https://fullcalendar.io/api/demo-feeds/events.json?single-day&for-resource-timeline',
    buttonHints: {
         next: 'next label',
         prev: 'prev label'
    }
  });

  calendar.render();
});

并根据需要更改下一个标签和上一个标签的值..

还添加了一个codepen工作链接here。 希望它有效:)