web-dev-qa-db-ja.com

Twitterブートストラップを備えたフルカレンダー？

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

ただし、突出しているのは、ボタンの[〜＃〜] html [〜＃〜]（進む、戻る、今日など）です。ブートストラップのボタングループに準拠するようにFullcalendarがボタンコードを出力する方法を変更するする方法はありますか？例えば。：

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

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

jquerytwitter-bootstrapfullcalendar
25
Dogweather

質問で暗示されているように、それを行うには2つの方法があります。どちらか：

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

これにより、3つのデフォルトボタンが<table>およびそれらを<div> とともに btn-groupクラス。その後、その空のテーブルを破棄できます。

多くのCSSがこれらのボタンに引き続き添付されることに注意してください。そのため、技術的には「Twitterブートストラップ」ボタングループになったとしても、見栄えがよくありません。他の答えがあれば、自分ですべてのCSSを理解できると思います。

JSFiddleデモ

23
merv

@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'));
4
mike

これはFullcalendarのデフォルトのCSSですButtons

/* 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に追加して、好きなように変更してみてください

3
osyan