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

​