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 t

Answer 1

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: #ffffd;
    }

.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

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

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

​