Merge pull request #3 from Adphorus/feature/cssClasses

Added css class names for extended styling support

Author: Fatih Erikli

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>
     )
   }

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 }

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>

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>
     );