带有Twitter引导程序的完整日历

Question

Fullcalendar widget很棒。我正在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. 制作您自己的完整日历.js的自定义版本。

在

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

定制构建

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

jQuery Overrides

如果你想覆盖默认渲染，它只需要几个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>中撕下三个默认按钮，并将它们扔到具有 btn-group 类的<div>中。 之后，我们可以丢弃该空表。

请记住，一堆CSS仍然会附加到这些按钮上，所以即使从技术上讲，它们现在是一个"Twitter引导"按钮组，它们仍然看起来不会那么漂亮。 我假设，给定另一个答案，您可以自己找出所有 CSS。

JSFiddle Demo

​

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中并根据需要更改它们