嘿，作为FullCalendar的新手，这两个需求其实都挺常见的，我来一步步给你讲清楚怎么实现～

一、动态设置按钮文本 #

FullCalendar提供了两种方式来控制按钮文本：初始化时配置，或者后续动态修改。

1. 初始化时自定义按钮文本 #

在日历初始化的配置项里，通过 buttonText 可以直接给预设按钮（比如today、month、week这些）设置自定义文本：

document.addEventListener('DOMContentLoaded', function() {
  const calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    // 自定义默认按钮文本
    buttonText: {
      today: '回到今日',
      month: '月视图',
      week: '周视图',
      day: '日视图'
    }
  });
  calendar.render();
});

2. 动态修改按钮文本 #

如果需要在某个事件触发后（比如用户点击了某个外部按钮）修改按钮文本，可以通过日历实例的 setOption 方法更新 buttonText，然后调用 updateSize 触发重绘：

// 假设页面上有个按钮用来触发文本修改
document.getElementById('modifyBtnText').addEventListener('click', function() {
  calendar.setOption('buttonText', {
    today: '回到今天',
    month: '月度视图',
    week: '周度视图',
    day: '单日视图'
  });
  // 强制更新日历布局，确保按钮文本生效
  calendar.updateSize();
});

二、自定义头部按钮样式 #

FullCalendar的按钮自带了一系列CSS类，我们可以直接通过CSS来定制样式（比如圆角、背景色、字体等）。如果是自定义按钮，还可以单独给它加专属样式。

1. 给默认按钮定制通用样式 #

FullCalendar的按钮基础类是 .fc-button，选中状态的按钮会带 .fc-button-active 类，你可以针对这些类写CSS：

/* 全局按钮基础样式 */
.fc .fc-button {
  border-radius: 8px; /* 圆角 */
  padding: 6px 14px; /* 内边距 */
  font-weight: 500; /* 字体加粗 */
  border: none; /* 去掉默认边框 */
  background-color: #4285F4; /* 背景色 */
  color: #fff; /* 文字颜色 */
  margin: 0 3px; /* 按钮间距 */
  transition: background-color 0.2s; /* 过渡动画 */
}

/* 按钮hover状态 */
.fc .fc-button:hover {
  background-color: #3367D6;
}

/* 当前选中视图的按钮样式 */
.fc .fc-button-active {
  background-color: #2952CC;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15); /* 阴影效果 */
}

/* 针对prev/next箭头按钮的特殊样式 */
.fc .fc-prev-button, .fc .fc-next-button {
  font-size: 16px;
  padding: 6px 10px;
}

2. 添加自定义按钮并定制样式 #

如果需要添加自己的按钮（比如导出、筛选功能），可以用 customButtons 配置项定义，然后给它加专属样式：

// 初始化时添加自定义按钮
const calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
  headerToolbar: {
    right: 'exportBtn,dayGridMonth,timeGridWeek'
  },
  customButtons: {
    exportBtn: {
      text: '导出日程',
      click: function() {
        // 这里写按钮点击逻辑
        alert('开始导出日程！');
      }
    }
  }
});

对应的CSS（自定义按钮的类名是 fc-xxx-button，xxx是你定义的按钮名）：

.fc .fc-exportBtn-button {
  background-color: #DB4437;
}

.fc .fc-exportBtn-button:hover {
  background-color: #C13527;
}

内容的提问来源于stack exchange，提问作者Paul John Pulumbarit