Fullcalendar与Twitter Bootstrap配合使用？

Question

Fullcalendar插件非常棒。我正在一个Twitter Bootstrap项目中使用它，它直接使用显示效果非常完美。

但是有一件事情引人注目，那就是按钮的HTML代码，例如向前、向后和今天。有没有一种方法可以更改Fullcalendar输出的按钮代码，使其符合Bootstrap的Button Group？例如：

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

如果没有的话，我想一种方法是自己创建按钮并将它们连接到Fullcalendar小部件。但我不是一个jQuery专家，我更喜欢尝试一些简单的东西。谢谢。

- Dogweather

---

也许我在另一个“Fullcalendar”（SO问题）中的最后一条评论可以帮到你。干杯！ - arttronics

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();

这将从那个中铲掉三个默认按钮并将它们扔进一个带有btn-group类的

中。然后我们可以丢弃那个空表格。

请记住，一堆CSS仍将附加到这些按钮上，因此，即使从技术上讲它们现在是“Twitter bootstrap”按钮组，它们看起来仍不会像样。考虑到其他答案，我认为你可以自己解决所有CSS问题。

JSFiddle演示

​

- merv

Answer 2

继 @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($('<span />').attr('class', 'glyphicon glyphicon-chevron-left'));
$('.fc-toolbar').find('.fc-next-button').html($('<span />').attr('class', 'glyphicon glyphicon-chevron-right'));

- mike

---

谢谢，我刚刚用v2.3.1完成了这个。 实际上，最终我做了以下几件事： (1) 将glyphicons植入源JS（容易）。 我需要改变“今天”的大写方式。 (2) 从分发中删除所有与图标相关的CSS。 (3) 基本上按照上面的方法动态添加btn-group和btn类。 - philw

Answer 3

这是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中，并根据需要进行更改

- osyan

---

你也可以使用 !important 来确保！ - osyan

谢谢，但这个答案只涉及CSS。然而，要使用Twitter Bootstrap，底层HTML结构需要更改。 - Dogweather