fullcalendar 允许通过 css 对自定义按钮进行样式定制，包括背景色、前景色、内边距和外边距。核心方法是利用 fullcalendar 自动生成的 css 类名 `fc-[自定义按钮名称]-button`，并应用自定义 css 规则。为确保样式生效，可能需要使用 `!important` 关键字覆盖其默认样式。
FullCalendar 提供强大的日历功能，并允许开发者通过 customButtons 配置项添加自定义按钮。虽然默认样式已预设，但我们常常需要根据项目设计规范调整这些按钮的外观，如背景色、文字颜色、内边距和外边距等。本文将详细介绍如何利用 CSS 对 FullCalendar 的自定义按钮进行精细化样式控制。
识别自定义按钮的 CSS 类名
FullCalendar 在渲染自定义按钮时，会根据您在 customButtons 配置中为按钮指定的名称自动生成一个唯一的 CSS 类。这个类名的格式为 fc-[您的按钮名称]-button。
例如，如果您定义了一个名为 myCustomButton 的按钮：
customButtons: {
myCustomButton: {
text: '自定义按钮',
click: function() {
alert('点击了自定义按钮！');
}
}
}那么，FullCalendar 渲染出的 HTML 按钮元素将包含一个 fc-myCustomButton-button 的 CSS 类。通过检查浏览器开发者工具，您可以轻松确认这一点。
应用自定义样式
一旦识别出正确的 CSS 类名，您就可以像对待任何其他 HTML 元素一样，使用 CSS 对其应用各种样式规则。这包括但不限于：
- background-color: 背景色
- color: 文字颜色
- padding: 内边距
- margin: 外边距
- border: 边框
- font-size: 字体大小
- border-radius: 边框圆角
示例代码：
/* 为名为 'myCustomButton' 的自定义按钮设置样式 */
.fc-myCustomButton-button {
background-color: #4CAF50; /* 绿色背景 */
color: white; /* 白色文字 */
padding: 8px 15px; /* 上下8px，左右15px 内边距 */
margin-right: 10px; /* 右侧外边距 */
border: none; /* 移除边框 */
border-radius: 4px; /* 轻微圆角 */
font-size: 14px; /* 字体大小 */
cursor: pointer; /* 鼠标悬停显示手型 */
}
/* 也可以添加 hover 效果 */
.fc-myCustomButton-button:hover {
background-color: #45a049;
}覆盖 FullCalendar 默认样式 (!important 的使用)
FullCalendar 自身带有一套默认的 CSS 样式，可能会覆盖您自定义的样式。在这种情况下，您需要在您的 CSS 规则中添加 !important 关键字来强制应用您的样式。
例如，如果您发现背景色没有生效：
.fc-myCustomButton-button {
background-color: red !important; /* 强制背景色为红色 */
color: white !important; /* 强制文字颜色为白色 */
}注意事项： 尽管 !important 可以解决样式覆盖问题，但过度使用可能会导致 CSS 维护困难。建议在必要时使用，并尽量通过更具体的选择器来提高优先级，减少对 !important 的依赖。
整合示例 (JavaScript & CSS)
以下是一个完整的示例，展示了如何在 FullCalendar 中定义自定义按钮并应用自定义样式：
HTML 结构:
FullCalendar 自定义按钮样式示例
总结
通过上述方法，您可以完全掌控 FullCalendar 自定义按钮的视觉样式。关键在于理解 FullCalendar 自动生成的 CSS 类名规则 (fc-[按钮名称]-button)，并结合标准的 CSS 属性进行样式定义。在遇到样式优先级问题时，合理运用 !important 关键字或更具体的选择器，即可实现理想的按钮外观。这使得 FullCalendar 不仅功能强大，在界面定制方面也具备高度的灵活性。
