jquery - 带有 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 专业人士，我更愿意尝试更简单的东西。谢谢。

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 演示

​</p>

Answer 2

要添加来自@merv 的答案，我的完整日历版本不使用表格，所以我添加了这个 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'));

Answer 3

这是全日历按钮的默认 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 并根据需要更改它们