使用Twitter Bootstrap的Fullcalendar？
Fullcalendar小部件非常棒。 我在Twitter Bootstrap项目中使用它，它看起来非常完美。
但是，有一点可以说是按钮的HTML ，例如前进，后退和今天。 有没有办法改变Fullcalendar输出按钮代码的方式 ，使其符合Bootstrap的按钮组 ？ 例如：
如果没有，我认为一种方法是自己创建按钮并将它们连接到Fullcalendar小部件。 但我不是一个jquery专家，我宁愿尝试更简单的东西。 谢谢。
正如你在问题中暗示的那样，有两种方法可以做到这一点。 或者：
-
制作自己的fullcalendar.js自定义版本。
-
在渲染后操作默认HTML，最好使用类似jQuery的东西。
自定义构建
如果要执行前者，则需要编辑Header.js文件，然后重新编译并提供fullcalendar.js的自定义版本。 但是，我会回避这一点，因为它将增加未来更新FullCalendar插件的开销。 但是，如果你想走那条路，那就是你的电话。 优点是你可以控制一切，所以它从一开始就是你想要的。
jQuery覆盖
如果要覆盖默认渲染，它只需要少量的jQuery行。 例如：
var $fcButtons = $('[class*="fc-button"]').addClass('btn') , $oldTable = $('.fc-header-right > table'); $('') .addClass('btn-group') .appendTo('.fc-header-right') .append($fcButtons); $oldTable.remove();
这将从
删除三个默认按钮，然后将它们放入带有btn-group类的
。 之后我们可以丢弃那张空桌子。
请记住，一堆CSS仍将附加到这些按钮，所以即使从技术上讲它们现在是一个“Twitter引导程序”按钮组，它们仍然看起来不那么漂亮。 我假设，给出另一个答案，你可以自己弄清楚所有的CSS。
JSFiddle演示
要添加@merv的答案我的fullcalendar版本不使用表，所以我添加了这个jquery来更新按钮
$('.fc-toolbar').find('.fc-button-group').addClass('btn-group'); $('.fc-toolbar').find('.ui-button').addClass('btn btn-primary'); $('.fc-toolbar').find('.fc-prev-button').html($('').attr('class', 'glyphicon glyphicon-chevron-left')); $('.fc-toolbar').find('.fc-next-button').html($('').attr('class', 'glyphicon glyphicon-chevron-right'));
这是Fullcalendar 按钮的默认css
/* Buttons ------------------------------------------------------------------------*/ .fc-button { position: relative; display: inline-block; cursor: pointer; } .fc-state-default { /* non-theme */ border-style: solid; border-width: 1px 0; } .fc-button-inner { position: relative; float: left; overflow: hidden; } .fc-state-default .fc-button-inner { /* non-theme */ border-style: solid; border-width: 0 1px; } .fc-button-content { position: relative; float: left; height: 1.9em; line-height: 1.9em; padding: 0 .6em; white-space: nowrap; } /* icon (for jquery ui) */ .fc-button-content .fc-icon-wrap { position: relative; float: left; top: 50%; } .fc-button-content .ui-icon { position: relative; float: left; margin-top: -50%; *margin-top: 0; *top: -50%; } /* gloss effect */ .fc-state-default .fc-button-effect { position: absolute; top: 50%; left: 0; } .fc-state-default .fc-button-effect span { position: absolute; top: -100px; left: 0; width: 500px; height: 100px; border-width: 100px 0 0 1px; border-style: solid; border-color: #fff; background: #444; opacity: .09; filter: alpha(opacity=9); } /* button states (determines colors) */ .fc-state-default, .fc-state-default .fc-button-inner { border-style: solid; border-color: #ccc #bbb #aaa; background: #F3F3F3; color: rgb(162, 48, 48); } .fc-state-hover, .fc-state-hover .fc-button-inner { border-color: #999; } .fc-state-down, .fc-state-down .fc-button-inner { border-color: #555; background: #777; } .fc-state-active, .fc-state-active .fc-button-inner { border-color: #555; background: #777; color: #fff; } .fc-state-disabled, .fc-state-disabled .fc-button-inner { color: rgb(122, 69, 69); border-color: #ddd; } .fc-state-disabled { cursor: default; } .fc-state-disabled .fc-button-effect { display: none; }
所以只需尝试将其添加到CSS并根据需要更改它们