Client - display WE days with different BG color on calendar - fix #43

fittrackee_client/src/components/App.css

@@ -330,10 +330,6 @@ label {
   color: lightgrey;
 }
 
-.img-disabled {
-  opacity: .4;
-}
-
 .leaflet-container {
   height: 400px;
 }
@@ -578,3 +574,11 @@ label {
   flex-basis: calc(100%/7);
   width: calc(100%/7);
 }
+
+.calendar .body .img-disabled {
+  opacity: .4;
+}
+
+.calendar .body .weekend {
+  background: #f5f5f5;
+}

fittrackee_client/src/components/Dashboard/Calendar.jsx

@@ -92,7 +92,7 @@ class Calendar extends React.Component {
   }
 
   renderCells() {
-    const { currentMonth, startDate, endDate } = this.state
+    const { currentMonth, startDate, endDate, weekStartOnMonday } = this.state
     const { sports } = this.props
 
     const dateFormat = 'd'
@@ -106,9 +106,13 @@ class Calendar extends React.Component {
       for (let i = 0; i < 7; i++) {
         formattedDate = format(day, dateFormat)
         const dayActivities = this.filterActivities(day)
-        const isDisabled = isSameMonth(day, currentMonth) ? '' : 'disabled'
+        const isDisabled = isSameMonth(day, currentMonth) ? '' : '-disabled'
+        const isWeekEnd = weekStartOnMonday
+          ? [5, 6].includes(i)
+          : [0, 6].includes(i)
         days.push(
-          <div className={`col cell img-${isDisabled}`} key={day}>
+          <div className={`col cell ${isWeekEnd ? ' weekend' : ''}`} key={day}>
+            <div className={`img${isDisabled}`}>
               <span className="number">{formattedDate}</span>
               {dayActivities.map(act => (
                 <Link key={act.id} to={`/activities/${act.id}`}>
@@ -141,6 +145,7 @@ class Calendar extends React.Component {
                 </Link>
               ))}
             </div>
+          </div>
         )
         day = addDays(day, 1)
       }