From ee0e7780317cd9e0d5280040f3568b8a1d7af60a Mon Sep 17 00:00:00 2001 From: Matt Satorius Date: Wed, 23 Aug 2017 12:56:18 -0500 Subject: [PATCH 1/4] Add utility function to calculate final date class name strings --- src/utils/index.js | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/src/utils/index.js b/src/utils/index.js index f7c3211f..0e418da2 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -187,3 +187,26 @@ export function range(start, stop, step = 1) { }; export {default as animate} from './animate'; + +export function getDateClasses(dateClasses){ + const dateClassObj = {}; + + if(dateClasses){ + + dateClasses.forEach(dateClass => { + + 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; +} From bb3ee7f72814d905859e1c3468f562542622f202 Mon Sep 17 00:00:00 2001 From: Matt Satorius Date: Wed, 23 Aug 2017 12:58:37 -0500 Subject: [PATCH 2/4] Add capability of setting `dateClasses` prop for custom date class assignment --- src/Calendar/index.js | 6 +++++- src/Month/index.js | 2 ++ src/MonthList/index.js | 3 +++ 3 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/Calendar/index.js b/src/Calendar/index.js index 9fe7a23f..253f3cee 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 3bf7bcda..6461847b 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 1143ffc2..ccde3469 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 { Date: Wed, 23 Aug 2017 12:59:27 -0500 Subject: [PATCH 3/4] Add storybook examples of custom date classes --- src/.stories/index.js | 13 +++++++++++++ src/.stories/stories.scss | 7 +++++++ 2 files changed, 20 insertions(+) diff --git a/src/.stories/index.js b/src/.stories/index.js index 6e407269..de2b80b8 100644 --- a/src/.stories/index.js +++ b/src/.stories/index.js @@ -50,6 +50,19 @@ storiesOf('Basic settings', module) )) .add('Disable Specific Weekdays', () => ( + )) + .add('Assign Custom Classes Specific Dates', () => ( + + 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 4ed25caf..8ccda8fd 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; + } } From d756c953f297b3f46f9415e25a8f5652d0328d88 Mon Sep 17 00:00:00 2001 From: Matt Satorius Date: Wed, 23 Aug 2017 13:00:20 -0500 Subject: [PATCH 4/4] Add README documentation on using dateClasses prop --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index bfccd022..c3018a47 100644 --- a/README.md +++ b/README.md @@ -100,6 +100,7 @@ For more usage examples, see [http://clauderic.github.io/react-infinite-calendar | rowHeight | Number | `56` | Height of each row in the calendar (each week is considered a `row`) | | autoFocus | Boolean | `true` | Whether the Calendar root should be auto-focused when it mounts. This is useful when `keyboardSupport` is enabled (the calendar must be focused to listen for keyboard events) | | tabIndex | Number | `1` | Tab-index of the calendar | +| dateClasses | Array | | Array of objects used for assigning custom classes to dates: `{className: "my-class", dates: [new Date(2017, 1, 8), new Date(), new Date(2017, 5, 17)]}` | ### Display Options | Property | Type | Default | Description |