+ addDays(today, amount)
+ ),
+ },{
+ className: "boldText",
+ dates: [-10, -7, 2, 5, 6, 10].map(amount =>
+ addDays(today, amount)
+ )
+ }]} />
));
storiesOf('Higher Order Components', module)
diff --git a/src/.stories/stories.scss b/src/.stories/stories.scss
index 4ed25cafa..8ccda8fd3 100644
--- a/src/.stories/stories.scss
+++ b/src/.stories/stories.scss
@@ -34,4 +34,11 @@
height: 100%;
margin: 0;
}
+ .yellowBg {
+ background: #ffff00;
+ border-radius: 50%;
+ }
+ .boldText {
+ font-weight: bold;
+ }
}
diff --git a/src/Calendar/index.js b/src/Calendar/index.js
index 9fe7a23fe..253f3cee4 100644
--- a/src/Calendar/index.js
+++ b/src/Calendar/index.js
@@ -1,7 +1,7 @@
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
-import {debounce, emptyFn, range, ScrollSpeed} from '../utils';
+import {debounce, emptyFn, range, ScrollSpeed, getDateClasses} from '../utils';
import {defaultProps} from 'recompose';
import defaultDisplayOptions from '../utils/defaultDisplayOptions';
import defaultLocale from '../utils/defaultLocale';
@@ -57,6 +57,7 @@ export default class Calendar extends Component {
static propTypes = {
autoFocus: PropTypes.bool,
className: PropTypes.string,
+ dateClasses: PropTypes.arrayOf(PropTypes.object),
DayComponent: PropTypes.func,
disabledDates: PropTypes.arrayOf(PropTypes.instanceOf(Date)),
disabledDays: PropTypes.arrayOf(PropTypes.number),
@@ -268,6 +269,7 @@ export default class Calendar extends Component {
let {
className,
passThrough,
+ dateClasses,
DayComponent,
disabledDays,
displayDate,
@@ -296,6 +298,7 @@ export default class Calendar extends Component {
const locale = this.getLocale();
const theme = this.getTheme();
const today = this.today = startOfDay(new Date());
+ const dateClassObj = getDateClasses(dateClasses);
return (
{
this._MonthList = instance;
}}
+ dateClassObj={dateClassObj}
DayComponent={DayComponent}
disabledDates={disabledDates}
disabledDays={disabledDays}
diff --git a/src/Month/index.js b/src/Month/index.js
index 3bf7bcda6..6461847b8 100644
--- a/src/Month/index.js
+++ b/src/Month/index.js
@@ -9,6 +9,7 @@ import styles from './Month.scss';
export default class Month extends PureComponent {
renderRows() {
const {
+ dateClassObj,
DayComponent,
disabledDates,
disabledDays,
@@ -71,6 +72,7 @@ export default class Month extends PureComponent {
monthShort={monthShort}
theme={theme}
year={year}
+ className={dateClassObj[date]}
{...passThrough.Day}
/>
);
diff --git a/src/MonthList/index.js b/src/MonthList/index.js
index 1143ffc29..ccde34698 100644
--- a/src/MonthList/index.js
+++ b/src/MonthList/index.js
@@ -18,6 +18,7 @@ const AVERAGE_ROWS_PER_MONTH = 5;
export default class MonthList extends Component {
static propTypes = {
+ dateClassObj: PropTypes.object,
disabledDates: PropTypes.arrayOf(PropTypes.string),
disabledDays: PropTypes.arrayOf(PropTypes.number),
height: PropTypes.number,
@@ -118,6 +119,7 @@ export default class MonthList extends Component {
renderMonth = ({index, style}) => {
let {
+ dateClassObj,
DayComponent,
disabledDates,
disabledDays,
@@ -141,6 +143,7 @@ export default class MonthList extends Component {
{
+
+ dateClass.dates.forEach(dateItem => {
+ const year = dateItem.getFullYear();
+ const month = dateItem.getMonth();
+ const day = dateItem.getDate();
+ const date = getDateString(year, month, day);
+ dateClassObj[date] = dateClassObj[date] ? `${dateClassObj[date]} ${dateClass.className}` : dateClass.className;
+
+ });
+
+ });
+
+ }
+
+ return dateClassObj;
+}