Day Highlighting

README.md

@@ -70,6 +70,7 @@ Option             | Description
 `date`             | The calendar shows days and allows you to navigate between months
 `dateValidator`    | Function to validate that a given date is considered valid. Receives a native `Date` parameter.
 `dayFormat`        | Format string used to display days on the calendar
+`highlightedDays`  | An array of dates (or moments) that are highlighted by the calendar
 `initialValue`     | Value used to initialize calendar. Takes `string`, `Date`, or `moment`
 `inputFormat`      | Format string used for the input field as well as the results of `rome`
 `invalidate`       | Ensures the date is valid when the field is blurred
@@ -113,6 +114,7 @@ If you don't set an option, the default will be used. You can [look up the defau
   "date": true,
   "dateValidator": Function.prototype,
   "dayFormat": "DD",
+  "highlightedDays": [],
   "initialValue": null,
   "inputFormat": "YYYY-MM-DD HH:mm",
   "invalidate": true,
@@ -137,6 +139,7 @@ If you don't set an option, the default will be used. You can [look up the defau
     "month": "rd-month",
     "next": "rd-next",
     "positioned": "rd-container-attachment",
+    "highlightedDay": "rd-day-highlight",
     "selectedDay": "rd-day-selected",
     "selectedTime": "rd-time-selected",
     "time": "rd-time",

src/calendar.js

@@ -508,6 +508,9 @@ function calendar (calendarOptions) {
         if (data.selectable && day.date() === current) {
           selectDayElement(node);
         }
+        if (isHighlightedDay(day)) {
+          highlightDay(node);
+        }
       }
     }
 
@@ -522,6 +525,21 @@ function calendar (calendarOptions) {
     }
   }
 
+  function isHighlightedDay(day) {
+    day = moment(day).startOf('day');
+    for (var i = 0; i < o.highlightedDays.length; i++) {
+      var target = moment(o.highlightedDays[i]).startOf('day');
+      if (day.diff(target, 'days') === 0) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  function highlightDay(node) {
+    classes.add(node, o.styles.highlightedDay);
+  }
+
   function isInRange (date, allday, validator) {
     if (!isInRangeLeft(date, allday)) {
       return false;

src/defaults.js

@@ -24,6 +24,7 @@ function defaults (options, cal) {
   if (o.date === no) { o.date = true; }
   if (o.time === no) { o.time = true; }
   if (o.date === false && o.time === false) { throw new Error('At least one of `date` or `time` must be `true`.'); }
+  if (o.highlightedDays === no) { o.highlightedDays = []; }
   if (o.inputFormat === no) {
     if (o.date && o.time) {
       o.inputFormat = 'YYYY-MM-DD HH:mm';
@@ -94,6 +95,7 @@ function defaults (options, cal) {
   if (styl.month === no) { styl.month = 'rd-month'; }
   if (styl.monthLabel === no) { styl.monthLabel = 'rd-month-label'; }
   if (styl.next === no) { styl.next = 'rd-next'; }
+  if (styl.highlightedDay === no) { styl.highlightedDay = 'rd-day-highlight'; }
   if (styl.selectedDay === no) { styl.selectedDay = 'rd-day-selected'; }
   if (styl.selectedTime === no) { styl.selectedTime = 'rd-time-selected'; }
   if (styl.time === no) { styl.time = 'rd-time'; }

src/rome.styl

@@ -52,6 +52,9 @@
   background-color #333
   color #fff
 
+.rd-day-highlight
+  background-color #E0E0E0
+
 .rd-day-prev-month,
 .rd-day-next-month
   color #999