Add light grey background colour if day is in different month

paviliondev · Apr 18, 2018 · 11bb792 · 11bb792
1 parent 7f7fd87
commit 11bb792
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/assets/javascripts/discourse/components/events-calendar-day.js.es6 b/assets/javascripts/discourse/components/events-calendar-day.js.es6
@@ -4,7 +4,7 @@ import { eventsForDay } from '../lib/date-utilities';
 const MAX_EVENTS = 4;
 
 export default Ember.Component.extend({
-  classNameBindings: [':day', 'classes'],
+  classNameBindings: [':day', 'classes', 'differentMonth'],
   hidden: 0,
   hasHidden: Ember.computed.gt('hidden', 0),
 
@@ -13,6 +13,11 @@ export default Ember.Component.extend({
     return date === expandedDate;
   },
 
+  @computed('month', 'currentMonth')
+  differentMonth(month, currentMonth) {
+    return month !== currentMonth
+  },
+
   @on('init')
   @observes('expanded')
   setEvents() {

diff --git a/assets/stylesheets/common/events.scss b/assets/stylesheets/common/events.scss
@@ -289,12 +289,12 @@
 
     .day {
       height: 38px;
-      padding-top: 2px;
       cursor: pointer;
       position: relative;
 
       .header {
         text-align: center;
+        margin-top: 2px;
       }
 
       .date label {
@@ -353,6 +353,12 @@
       height: 100%;
     }
 
+    &.different-month .container {
+      background-color: rgba($primary-low, .5);
+      color: rgba($primary, .5);
+      height: 100%;
+    }
+
     &.selected .date label {
       background-color: $tertiary;
       color: $secondary;