Fullcalendar с Twitter Bootstrap?

Виджет 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, и я бы предпочел попробовать что-то более простое. Спасибо.

Ответ 1

Есть два способа сделать это, как вы подразумевали в своем вопросе. Или:

Создайте собственную сборку fullcalendar.js.
Манипулируйте 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 Demo

Ответ 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'));

Ответ 3

Это css по умолчанию для Fullcalendar Кнопки

/* 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 и изменить их, как вам нравится