25

Fullcalendar ウィジェットは素晴らしいです。Twitter Bootstrap プロジェクトで使用していますが、箱から出してほぼ完璧に見えます。

ただし、目立っているのは、進む、戻る、今日などのボタンのHTMLです。Bootstrap のButton Groupに準拠するようにFullcalendar がボタン コードを出力する方法を変更する方法はありますか? 例えば：

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

そうでない場合は、自分でボタンを作成し、それらを Fullcalendar ウィジェットに接続する方法があると思います。しかし、私は jquery のプロではないので、もっと単純なものを試してみたいと思っています。ありがとう。

4

3 に答える 3

23

質問で暗示したように、それを行うには2つの方法があります。また：

  1. fullcalendar.jsの独自のカスタム ビルドを作成します。

  2. できればjQueryなどを使用して、レンダリング後にデフォルトのHTMLを操作します。

カスタムビルド

前者を実行する場合は、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();

これにより、3 つのデフォルト ボタンが取り除かれ、クラスを持つ に<table>放り込まれます。その後、その空のテーブルを破棄できます。<div>btn-group

これらのボタンには多数の CSS が引き続き関連付けられるため、技術的には「Twitter ブートストラップ」ボタン グループになったとしても、見た目は派手ではないことに注意してください。他の答えがあれば、すべての CSS を自分で把握できると思います。

JSFiddleデモ

</p>

于 2012-08-02T22:27:57.847 に答える
4

@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'));
于 2014-09-07T22:01:31.780 に答える
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に追加して、好きなように変更してみてください

于 2012-07-02T07:43:12.533 に答える