Fullcalendar with Twitter Bootstrap?

Question

The Fullcalendar widget is awesome. I'm using it in a Twitter Bootstrap project, and it looks just about perfect out of the box.

One thing that sticks out, though, is the HTML for the buttons, such as forward, back, and today. Is there a way to change how Fullcalendar outputs the button code so that it conforms to Bootstrap's Button Group? E.g.:

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

If not, I imagine that one way to go would be to create the buttons on my own and wire them into the Fullcalendar widget. But I'm not a jquery pro, and I'd prefer to try something simpler. Thanks.

Answer 1

There are two ways to do it, as you implied in your question. Either:

1. Make your own custom build of fullcalendar.js.

2. Manipulate the default HTML after it renders, preferably using something like jQuery.

Custom Build

If you want to do the former, you need to edit the Header.js file and then recompile and serve your custom version of fullcalendar.js. However, I'd shy away from that because it will add overhead to updating the FullCalendar plugin in the future. However, it's your call if you want to go that route. The advantage is you control everything and so it's rendered how you want from the beginning.

jQuery Overrides

If you want to override the default render, it'll only take a handful of jQuery lines. For example:

var $fcButtons = $('[class*="fc-button"]').addClass('btn')
  , $oldTable = $('.fc-header-right > table');

$('<div>')
  .addClass('btn-group')
  .appendTo('.fc-header-right')
  .append($fcButtons);

$oldTable.remove();

This will rip the three default buttons out of that <table> and toss them into a <div> with a btn-group class. After that we can discard that empty table.

Keep in mind that a bunch of the CSS will still be attached to those buttons, so even though technically they are now a "Twitter bootstrap" button group, they still won't look as spiffy. I assume, given the other answer, you can figure out all the CSS yourself.

JSFiddle Demo

​

Answer 2

To add to the answer from @merv my fullcalendar version does not use a table, so I added this jquery to update the buttons

$('.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

This are the default css for Fullcalendar 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;
    }

So just try to add this to your CSS and change them as you like