diff --git a/src/components/calendar/TheCalendar.vue b/src/components/calendar/TheCalendar.vue
index 51df3a97..62873aff 100644
--- a/src/components/calendar/TheCalendar.vue
+++ b/src/components/calendar/TheCalendar.vue
@@ -1096,7 +1096,7 @@ export default {
           start: new Date(moon.rise),
           end: new Date(moon.set),
           rendering: 'background',
-          backgroundColor: rgba_from_illumination(moon.illumination, 235),
+          backgroundColor: rgba_from_illumination(moon.illumination, 255),
           borderColor: '#aaaaaa',
           id: 'fc-custom-moon-indicator',
           classNames: ['fc-moon-indicator'],
@@ -1218,7 +1218,7 @@ export default {
 @import "@/style/buefy-styles.scss";
 @import "@/style/_variables.scss";
 
-$moon-width: 16px;
+$moon-width: 20px;
 
 $event-left-margin: 4px;
 
@@ -1380,6 +1380,7 @@ These times are obtained from the events in the site config */
 .fc-moon-indicator {
   z-index: $moon-z-index;
   width: $moon-width;
+  opacity: 0.4;
   transition: 0.2s;
 }
 .fc-moon-indicator:hover {
@@ -1391,7 +1392,7 @@ These times are obtained from the events in the site config */
 .fc-forecast-event {
   $background-opacity: 0;
   $border-width: $forecast-width;
-  // z-index: $forecast-z-index !important;
+  z-index: $forecast-z-index !important;
   opacity: 1;
   background-color: rgba(0,0,0,0);
   width: 0;
diff --git a/src/utils/calendar_utils.js b/src/utils/calendar_utils.js
index c957082b..1903db58 100644
--- a/src/utils/calendar_utils.js
+++ b/src/utils/calendar_utils.js
@@ -151,7 +151,7 @@ const getMoonPhaseDays = (year, month, day) => {
  * @returns {string}: css value, something like 'rgba(255,255,255,0.5)'
  */
 const rgba_from_illumination = (illum, peak) => {
-  const alpha = 0.1 + (0.9 * illum) // should have minimum opacity of 0.1
+  const alpha = 0.1 + (0.9 * illum) + 1
   return `rgba(${peak},${peak},${peak},${alpha})`
 }