Allow the user to style individual calendar days

Author: Stephen Deken

src/js/bootstrap-datetimepicker.js

@@ -686,7 +686,7 @@
                     currentDate,
                     html = [],
                     row,
-                    clsName,
+                    clsNames = [],
                     i;
 
                 if (!hasDate()) {
@@ -717,26 +717,31 @@
                         }
                         html.push(row);
                     }
-                    clsName = '';
+                    clsNames = ['day'];
                     if (currentDate.isBefore(viewDate, 'M')) {
-                        clsName += ' old';
+                        clsNames.push('old');
                     }
                     if (currentDate.isAfter(viewDate, 'M')) {
-                        clsName += ' new';
+                        clsNames.push('new');
                     }
                     if (currentDate.isSame(date, 'd') && !unset) {
-                        clsName += ' active';
+                        clsNames.push('active');
                     }
                     if (!isValid(currentDate, 'd')) {
-                        clsName += ' disabled';
+                        clsNames.push('disabled');
                     }
                     if (currentDate.isSame(getMoment(), 'd')) {
-                        clsName += ' today';
+                        clsNames.push('today');
                     }
                     if (currentDate.day() === 0 || currentDate.day() === 6) {
-                        clsName += ' weekend';
+                        clsNames.push('weekend');
                     }
-                    row.append('<td data-action="selectDay" data-day="' + currentDate.format('L') + '" class="day' + clsName + '">' + currentDate.date() + '</td>');
+                    notifyEvent({
+                        type: 'dp.classify',
+                        date: currentDate,
+                        classNames: clsNames
+                    });
+                    row.append('<td data-action="selectDay" data-day="' + currentDate.format('L') + '" class="' + clsNames.join(' ') + '">' + currentDate.date() + '</td>');
                     currentDate.add(1, 'd');
                 }
 

test/publicApiSpec.js

@@ -63,20 +63,23 @@ describe('Public API method tests', function () {
         dpChangeSpy,
         dpShowSpy,
         dpHideSpy,
-        dpErrorSpy;
+        dpErrorSpy,
+        dpClassifySpy;
 
     beforeEach(function () {
         dpChangeSpy = jasmine.createSpy('dp.change event Spy');
         dpShowSpy = jasmine.createSpy('dp.show event Spy');
         dpHideSpy = jasmine.createSpy('dp.hide event Spy');
         dpErrorSpy = jasmine.createSpy('dp.error event Spy');
+        dpClassifySpy = jasmine.createSpy('dp.classify event Spy');
         dtpElement = $('<input>').attr('id', 'dtp');
 
         $(document).find('body').append($('<div>').attr('class', 'row').append($('<div>').attr('class', 'col-md-12').append(dtpElement)));
         $(document).find('body').on('dp.change', dpChangeSpy);
         $(document).find('body').on('dp.show', dpShowSpy);
         $(document).find('body').on('dp.hide', dpHideSpy);
         $(document).find('body').on('dp.error', dpErrorSpy);
+        $(document).find('body').on('dp.classify', dpClassifySpy);
 
         dtpElement.datetimepicker();
         dtp = dtpElement.data('DateTimePicker');
@@ -290,10 +293,29 @@ describe('Public API method tests', function () {
                 expect(dpShowSpy).not.toHaveBeenCalled();
             });
 
+            it('calls the classify event for each day that is shown', function () {
+                dtp.show();
+                expect(dpClassifySpy.calls.count()).toEqual(42);
+            });
+
             it('actually shows the widget', function () {
                 dtp.show();
                 expect($(document).find('body').find('.bootstrap-datetimepicker-widget').length).toEqual(1);
             });
+
+            it('applies the styles appended in the classify event handler', function () {
+                var handler = function (event) {
+                    if (event.date.get('weekday') === 4) {
+                        event.classNames.push('humpday');
+                    }
+                    event.classNames.push('injected');
+                };
+                $(document).find('body').on('dp.classify', handler);
+                dtp.show();
+                $(document).find('body').off('dp.classify', handler);
+                expect($(document).find('body').find('.bootstrap-datetimepicker-widget td.day.injected').length).toEqual(42);
+                expect($(document).find('body').find('.bootstrap-datetimepicker-widget td.day.humpday').length).toEqual(6);
+            });
         });
 
         describe('access', function () {