jquery - 带有 Twitter Bootstrap 的全日历？

Question

Fullcalendar 小部件非常棒。我在 Twitter Bootstrap 项目中使用它，它看起来几乎是完美的开箱即用。

不过，有一点很突出，那就是按钮的 HTML，例如前进、后退和今天。有没有办法更改 Fullcalendar 输出按钮代码的方式，使其符合 Bootstrap 的按钮组？例如:

<div class="btn-group">
  <button class="btn">1</button>
  <button class="btn">2</button>
  <button class="btn">3</button>
</div>

如果没有，我想一种方法是自己创建按钮并将它们连接到 Fullcalendar 小部件中。但我不是 jquery 专业人士，我更愿意尝试更简单的东西。谢谢。

Answer 1

正如您在问题中暗示的那样，有两种方法可以做到这一点。要么:

1. 制作您自己的 fullcalendar.js 自定义版本。

2. 在渲染后操作默认的 HTML，最好使用 jQuery 之类的东西。

自定义构建

如果您想执行前者，您需要编辑 Header.js文件，然后重新编译并提供您的自定义版本的 fullcalendar.js。但是，我会回避这一点，因为它会增加将来更新 FullCalendar 插件的开销。但是，如果您想走那条路，那是您的决定。优点是您可以控制一切，因此从一开始就按照您想要的方式呈现。

jQuery 覆盖

如果您想覆盖默认渲染，只需要几行 jQuery 代码即可。例如:

var $fcButtons = $('[class*="fc-button"]').addClass('btn')
  , $oldTable = $('.fc-header-right > table');

$('<div>')
  .addClass('btn-group')
  .appendTo('.fc-header-right')
  .append($fcButtons);

$oldTable.remove();

这将从 <table> 中删除三个默认按钮。然后把它们扔进<div>与 btn-group类(class)。之后我们可以丢弃那个空表。

请记住，一堆 CSS 仍将附加到这些按钮，因此即使从技术上讲它们现在是“Twitter bootstrap”按钮组，但它们看起来仍然不会那么漂亮。我想，鉴于其他答案，您可以自己弄清楚所有 CSS。

JSFiddle Demo

​