使用Twitter Bootstrap的Fullcalendar？

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类.之后我们可以丢弃那张空桌子.

请记住,一堆CSS仍将附加到这些按钮,所以即使从技术上讲它们现在是一个"Twitter引导程序"按钮组,它们仍然看起来不会那么漂亮.我假设,给出另一个答案,你可以自己弄清楚所有的CSS.

JSFiddle演示

​