diff --git a/README.md b/README.md index 6fe2f30..08e8078 100644 --- a/README.md +++ b/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", diff --git a/src/calendar.js b/src/calendar.js index b7595c5..df70b58 100644 --- a/src/calendar.js +++ b/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; diff --git a/src/defaults.js b/src/defaults.js index 2117b92..3aac5a0 100644 --- a/src/defaults.js +++ b/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'; } diff --git a/src/rome.styl b/src/rome.styl index 5e13d46..abf9378 100644 --- a/src/rome.styl +++ b/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