4 files changed, 27 insertions, 15 deletions
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/DayInfos.js b/app/assets/javascripts/es6_browserified/time_tables/components/DayTypesInDay.js
index 59672282b..560ff198b 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/DayInfos.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/components/DayTypesInDay.js
@@ -2,25 +2,22 @@ var React = require('react')
 var Component = require('react').Component
 var PropTypes = require('react').PropTypes
 
-class DayInfos extends Component {
+class DayTypesInDay extends Component {
   constructor(props) {
     super(props)
   }
 
   render() {
     return (
-      <div className='td-group'>
-        <div className="td">A</div>
-        <div className="td">B</div>
-        <div className="td">C</div>
+      <div className="td">
       </div>
     )
   }
 }
 
-DayInfos.propTypes = {
+DayTypesInDay.propTypes = {
   value: PropTypes.object.isRequired,
   index: PropTypes.number.isRequired
 }
 
-module.exports = DayInfos
+module.exports = DayTypesInDay
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/Timetable.js b/app/assets/javascripts/es6_browserified/time_tables/components/Timetable.js
index 9bc747b6a..715f3ec3b 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/Timetable.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/components/Timetable.js
@@ -2,7 +2,7 @@ var React = require('react')
 var Component = require('react').Component
 var PropTypes = require('react').PropTypes
 var TimeTableDay = require('./TimeTableDay')
-var DayInfos = require('./DayInfos')
+var DayTypesInDay = require('./DayTypesInDay')
 var actions = require('../actions')
 
 class Timetable extends Component{
@@ -52,22 +52,26 @@ class Timetable extends Component{
                     </div>
 
                     <div className='monthDays'>
-                      {this.props.timetable.current_month.map((day, i) =>
+                      {this.props.timetable.current_month.map((d, i) =>
                         <TimeTableDay
                           key={i}
                           index={i}
-                          value={day}
+                          value={d}
                           />
                       )}
                     </div>
                   </div>
 
-                  {this.props.timetable.current_month.map((day, i) =>
-                    <DayInfos
+                  {this.props.timetable.current_month.map((d, i) =>
+                    <div
                       key={i}
-                      index={i}
-                      value={day}
-                      />
+                      className={'td-group' + (this.props.metas.day_types[d.wday] ? '' : ' out_from_daytypes') + (d.wday == 0 ? ' last_wday' : '')}
+                    >
+                      <DayTypesInDay
+                        index={i}
+                        value={this.props.timetable}
+                        />
+                    </div>
                   )}
                 </div>
               </div>
@@ -80,6 +84,7 @@ class Timetable extends Component{
 }
 
 Timetable.propTypes = {
+  metas: PropTypes.object.isRequired,
   timetable: PropTypes.object.isRequired,
   status: PropTypes.object.isRequired
 }
diff --git a/app/assets/javascripts/es6_browserified/time_tables/containers/Timetable.js b/app/assets/javascripts/es6_browserified/time_tables/containers/Timetable.js
index 0bd1444c4..62fe20419 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/containers/Timetable.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/containers/Timetable.js
@@ -3,6 +3,7 @@ var TimetableComponent = require('../components/Timetable')
 
 const mapStateToProps = (state) => {
   return {
+    metas: state.metas,
     timetable: state.timetable,
     status: state.status
   }
diff --git a/app/assets/stylesheets/modules/_timetables.sass b/app/assets/stylesheets/modules/_timetables.sass
index 7a6eb6515..4dcb78b0e 100644
--- a/app/assets/stylesheets/modules/_timetables.sass
+++ b/app/assets/stylesheets/modules/_timetables.sass
@@ -64,3 +64,12 @@
     > .td-group
       width: 34px
       border-right: 1px solid rgba($grey, 0.5)
+
+      &.last_wday
+        &:not(:last-child)
+          border-right: 2px solid $darkgrey
+
+      &.out_from_daytypes
+        > .td
+          background-image: linear-gradient(45deg, rgba($grey, 0.15) 0%, rgba($grey, 0.15) 49%, rgba($grey, 0.5) 50%, rgba($grey, 0.15) 51%, rgba($grey, 0.15) 99%, rgba($grey, 0.15) 100%)
+          background-size: 25px 25px