From fb5fee879bb51bb302ae666cff6d543a1e6e57ba Mon Sep 17 00:00:00 2001
From: Burak Can <neoberg@gmail.com>
Date: Mon, 12 Oct 2015 17:28:55 +0300
Subject: [PATCH] Added css classnames for extended styling

---
 src/Calendar.js         | 20 +++++++++++++-------
 src/DateRange.js        |  2 +-
 src/DayCell.js          | 14 ++++++++++++++
 src/PredefinedRanges.js |  3 ++-
 4 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/src/Calendar.js b/src/Calendar.js
index 6f848d4dc..03e0646af 100644
--- a/src/Calendar.js
+++ b/src/Calendar.js
@@ -84,15 +84,21 @@ class Calendar extends Component {
     const { styles } = this;
 
     return (
-      <div style={styles['MonthAndYear']}>
+      <div style={styles['MonthAndYear']} className='rdr-MonthAndYear-innerWrapper'>
         <button
           style={{ ...styles['MonthButton'], float : 'left' }}
+          className='rdr-MonthAndYear-button prev'
           onClick={this.changeMonth.bind(this, -1, false)}>
           <i style={{ ...styles['MonthArrow'], ...styles['MonthArrowPrev'] }}></i>
         </button>
-        <span>{month} - {year}</span>
+        <span>
+          <span className='rdr-MonthAndYear-month'>{month}</span>
+          <span className='rdr-MonthAndYear-divider'> - </span>
+          <span className='rdr-MonthAndYear-year'>{year}</span>
+        </span>
         <button
           style={{ ...styles['MonthButton'], float : 'right' }}
+          className='rdr-MonthAndYear-button next'
           onClick={this.changeMonth.bind(this, +1, false)}>
           <i style={{ ...styles['MonthArrow'], ...styles['MonthArrowNext'] }}></i>
         </button>
@@ -109,7 +115,7 @@ class Calendar extends Component {
       const day = moment.weekdaysMin(i);
 
       weekdays.push(
-        <span style={styles['Weekday']} key={day}>{day}</span>
+        <span style={styles['Weekday']} className='rdr-WeekDay' key={day}>{day}</span>
       );
     }
 
@@ -181,10 +187,10 @@ class Calendar extends Component {
     const { styles } = this;
 
     return (
-      <div style={{ ...styles['Calendar'], ...this.props.style }}>
-        <div>{ this.renderMonthAndYear() }</div>
-        <div>{ this.renderWeekdays() }</div>
-        <div>{ this.renderDays() }</div>
+      <div style={{ ...styles['Calendar'], ...this.props.style }} className='rdr-Calendar'>
+        <div className='rdr-MonthAndYear'>{ this.renderMonthAndYear() }</div>
+        <div className='rdr-WeekDays'>{ this.renderWeekdays() }</div>
+        <div className='rdr-Days'>{ this.renderDays() }</div>
       </div>
     )
   }
diff --git a/src/DateRange.js b/src/DateRange.js
index 7c6f8d837..8bdbaa19c 100644
--- a/src/DateRange.js
+++ b/src/DateRange.js
@@ -95,7 +95,7 @@ class DateRange extends Component {
     const { styles } = this;
 
     return (
-      <div style={{ ...styles['DateRange'], ...style }}>
+      <div style={{ ...styles['DateRange'], ...style }} className='rdr-DateRange'>
         { ranges && (
           <PredefinedRanges
             format={ format }
diff --git a/src/DayCell.js b/src/DayCell.js
index a06688b1e..e61a307e5 100644
--- a/src/DayCell.js
+++ b/src/DayCell.js
@@ -67,10 +67,23 @@ class DayCell extends Component {
     };
   }
 
+  getClassNames() {
+    const { isSelected, isInRange, isPassive } = this.props;
+
+    let classNames = 'rdr-Day ';
+
+    classNames = (isSelected) ? classNames + 'is-selected ' : classNames;
+    classNames = (isInRange) ? classNames + 'is-inRange ' : classNames;
+    classNames = (isPassive) ? classNames + 'is-passive ' : classNames;
+
+    return classNames;
+  }
+
   render() {
     const { styles }    = this;
     const { dayMoment } = this.props;
     const stateStyle    = this.getStateStyles();
+    const classNames    = this.getClassNames();
 
     return (
       <span
@@ -79,6 +92,7 @@ class DayCell extends Component {
         onMouseDown={ this.handleMouseEvent.bind(this) }
         onMouseUp={ this.handleMouseEvent.bind(this) }
         onClick={ this.handleSelect.bind(this) }
+        className={ classNames }
         style={{...styles['Day'], ...stateStyle}}>
         { dayMoment.date() }
       </span>
diff --git a/src/PredefinedRanges.js b/src/PredefinedRanges.js
index 5da895a62..e19e00bfe 100644
--- a/src/PredefinedRanges.js
+++ b/src/PredefinedRanges.js
@@ -31,6 +31,7 @@ class PredefinedRanges extends Component {
         <a
           href='#'
           key={'range-' + name}
+          className='rdr-PredefinedRangeItem'
           style={styles['PredefinedRangeItem']}
           onClick={this.handleSelect.bind(this, name)}>
           {name}
@@ -44,7 +45,7 @@ class PredefinedRanges extends Component {
     const { styles } = this;
 
     return (
-      <div style={{ ...styles['PredefinedRanges'], ...style }}>
+      <div style={{ ...styles['PredefinedRanges'], ...style }} className='rdr-PredefinedRanges'>
         {this.renderRangeList()}
       </div>
     );