Merge branch 'columnHeadText-Format' of https://github.com/caseyjhol/fullcalendar

src/component/DayTableMixin.ts

@@ -85,7 +85,10 @@ export default class DayTableMixin extends Mixin implements DayTableInterface {
 	// Computes and assigned the colCnt property and updates any options that may be computed from it
 	updateDayTableCols() {
 		this.colCnt = this.computeColCnt();
-		this.colHeadFormat = (this as any).opt('columnFormat') || this.computeColHeadFormat();
+		this.colHeadFormat =
+			(this as any).opt('columnHeaderFormat') ||
+			(this as any).opt('columnFormat') || // deprecated
+			this.computeColHeadFormat();
 	}
 
 
@@ -321,7 +324,17 @@ export default class DayTableMixin extends Mixin implements DayTableInterface {
 			'fc-day-header',
 			view.calendar.theme.getClass('widgetHeader')
 		];
-		var innerHtml = htmlEscape(date.format(t.colHeadFormat));
+		var innerHtml;
+
+		if (typeof t.opt('columnHeaderHtml') === 'function') {
+			innerHtml = t.opt('columnHeaderHtml')(date);
+		}
+		else if (typeof t.opt('columnHeaderText') === 'function') {
+			innerHtml = htmlEscape(t.opt('columnHeaderText')(date));
+		}
+		else {
+			innerHtml = htmlEscape(date.format(t.colHeadFormat));
+		}
 
 		// if only one row of days, the classNames on the header can represent the specific days beneath
 		if (t.rowCnt === 1) {

tests/legacy/columnFormat.js → tests/legacy/columnHeaderFormat.js

@@ -1,10 +1,10 @@
 
-describe('columnFormat', function() {
+describe('columnHeaderFormat', function() {
     beforeEach(function() {
         affix('#cal');
     });
 
-    describe('when columnFormat is not set', function() {
+    describe('when columnHeaderFormat is not set', function() {
 
         var viewWithFormat = [ { view: 'month', expected: 'Sun', selector: 'th.fc-day-header.fc-sun' },
             { view: 'basicWeek', expected: 'Sun 5/11', selector: 'th.fc-day-header.fc-sun' },
@@ -29,7 +29,7 @@ describe('columnFormat', function() {
         });
     });
 
-    describe('when columnFormat is set on a per-view basis', function() {
+    describe('when columnHeaderFormat is set on a per-view basis', function() {
 
         var viewWithFormat = [ { view: 'month', expected: 'Sunday', selector: 'th.fc-day-header.fc-sun' },
             { view: 'basicWeek', expected: 'Sunday 11 - 5', selector: 'th.fc-day-header.fc-sun' },
@@ -41,11 +41,11 @@ describe('columnFormat', function() {
             $('#cal').fullCalendar({
                 defaultDate: '2014-05-11',
                 views: {
-                    month: { columnFormat: 'dddd' },
-                    agendaDay: { columnFormat: 'dddd M/D' },
-                    agendaWeek: { columnFormat: 'dddd D , M' },
-                    basicDay: { columnFormat: 'dddd D | M' },
-                    basicWeek: { columnFormat: 'dddd D - M' }
+                    month: { columnHeaderFormat: 'dddd' },
+                    agendaDay: { columnHeaderFormat: 'dddd M/D' },
+                    agendaWeek: { columnHeaderFormat: 'dddd D , M' },
+                    basicDay: { columnHeaderFormat: 'dddd D | M' },
+                    basicWeek: { columnHeaderFormat: 'dddd D - M' }
                 }
             });
         });
@@ -128,7 +128,7 @@ describe('columnFormat', function() {
             });
         });
 
-        it('should have the translated dates and columnFormat should be computed differently', function() {
+        it('should have the translated dates and columnHeaderFormat should be computed differently', function() {
             var cal = $('#cal');
 
             for (var i = 0; i <  viewWithFormat.length; i++) {

tests/view-render/columnHeaderHtml.js

@@ -0,0 +1,28 @@
+
+describe('columnHeaderHtml', function() {
+	pushOptions({
+		defaultDate: '2014-05-11',
+		columnHeaderHtml: function(date) {
+			return '<div class="test">' + date.format('dddd') + '</div>';
+		}
+	});
+
+	describeOptions('defaultView', {
+		'when month view': 'month',
+		'when agenda view': 'agendaDay',
+		'when basic view': 'basicDay'
+	}, function() {
+
+		it('should contain custom HTML', function() {
+			initCalendar();
+			expect(hasCustomHtml()).toBe(true);
+		});
+	});
+
+	function hasCustomHtml() {
+		var firstHeader = $('.fc-day-header:first');
+
+		return firstHeader.find('.test').length === 1 && firstHeader.text() === 'Sunday';
+	}
+
+});

tests/view-render/columnHeaderText.js

@@ -0,0 +1,28 @@
+
+describe('columnHeaderText', function() {
+	pushOptions({
+		defaultDate: '2014-05-11',
+		columnHeaderText: function(date) {
+			return '<div>Custom ' + date.format('dddd') + '</div>';
+		}
+	});
+
+	describeOptions('defaultView', {
+		'when month view': 'month',
+		'when agenda view': 'agendaDay',
+		'when basic view': 'basicDay'
+	}, function() {
+
+		it('should contain custom HTML escaped text', function() {
+			initCalendar();
+			expect(hasCustomText()).toBe(true);
+		});
+	});
+
+	function hasCustomText() {
+		var firstHeader = $('.fc-day-header:first');
+
+		return firstHeader.text() === '<div>Custom Sunday</div>';
+	}
+
+});