Implement a basic bootstrap theme

src/Toolbar.js

@@ -205,7 +205,7 @@ function Toolbar(calendar, toolbarOptions) {
 				if (groupChildren.length > 1) {
 					groupEl = $('<div/>');
 					if (isOnlyButtons) {
-						groupEl.addClass('fc-button-group');
+						groupEl.addClass(calendar.theme.getClass('buttonGroup'));
 					}
 					groupEl.append(groupChildren);
 					sectionEl.append(groupEl);

src/agenda/AgendaView.js

@@ -123,7 +123,7 @@ var AgendaView = FC.AgendaView = View.extend({
 	// The day-grid and time-grid components will render inside containers defined by this HTML.
 	renderSkeletonHtml: function() {
 		return '' +
-			'<table>' +
+			'<table class="' + this.calendar.theme.getClass('tableGrid') + '">' +
 				'<thead class="fc-head">' +
 					'<tr>' +
 						'<td class="fc-head-container ' + this.widgetHeaderClass + '"></td>' +

src/basic/BasicView.js

@@ -124,7 +124,7 @@ var BasicView = FC.BasicView = View.extend({
 	// The day-grid component will render inside of a container defined by this HTML.
 	renderSkeletonHtml: function() {
 		return '' +
-			'<table>' +
+			'<table class="' + this.calendar.theme.getClass('tableGrid') + '">' +
 				'<thead class="fc-head">' +
 					'<tr>' +
 						'<td class="fc-head-container ' + this.widgetHeaderClass + '"></td>' +

src/common/DayGrid.js

@@ -86,7 +86,7 @@ var DayGrid = FC.DayGrid = Grid.extend(DayTableMixin, {
 		return '' +
 			'<div class="' + classes.join(' ') + '">' +
 				'<div class="fc-bg">' +
-					'<table>' +
+					'<table class="' + this.view.calendar.theme.getClass('tableGrid') + '">' +
 						this.renderBgTrHtml(row) +
 					'</table>' +
 				'</div>' +

src/common/DayTableMixin.js

@@ -253,7 +253,7 @@ var DayTableMixin = FC.DayTableMixin = {
 
 		return '' +
 			'<div class="fc-row ' + view.widgetHeaderClass + '">' +
-				'<table>' +
+				'<table class="' + this.view.calendar.theme.getClass('tableGrid') + '">' +
 					'<thead>' +
 						this.renderHeadTrHtml() +
 					'</thead>' +

src/common/Theme.js

@@ -26,6 +26,14 @@ var themes = {
 		cornerLeft: 'ui-corner-left',
 		cornerRight: 'ui-corner-right',
 		buttonGroup: 'fc-button-group'
+	},
+	bootstrap3: {
+		stateActive: 'active',
+		stateDisabled: 'disabled',
+		button: 'btn btn-default',
+		buttonGroup: 'btn-group',
+		tableGrid: 'table-bordered',
+		tableList: 'table'
 	}
 };
 

src/common/TimeGrid.js

@@ -52,12 +52,12 @@ var TimeGrid = FC.TimeGrid = Grid.extend(DayTableMixin, {
 	renderHtml: function() {
 		return '' +
 			'<div class="fc-bg">' +
-				'<table>' +
+				'<table class="' + this.view.calendar.theme.getClass('tableGrid') + '">' +
 					this.renderBgTrHtml(0) + // row=0
 				'</table>' +
 			'</div>' +
 			'<div class="fc-slats">' +
-				'<table>' +
+				'<table class="' + this.view.calendar.theme.getClass('tableGrid') + '">' +
 					this.renderSlatRowHtml() +
 				'</table>' +
 			'</div>';

src/list/ListView.js

@@ -162,7 +162,7 @@ var ListViewGrid = Grid.extend({
 		var dayIndex;
 		var daySegs;
 		var i;
-		var tableEl = $('<table class="fc-list-table"><tbody/></table>');
+		var tableEl = $('<table class="fc-list-table ' + this.view.calendar.theme.getClass('tableList') + '"><tbody/></table>');
 		var tbodyEl = tableEl.find('tbody');
 
 		for (dayIndex = 0; dayIndex < segsByDay.length; dayIndex++) {