Show cancelled events with opacity

aleksis/core/frontend/components/calendar/Calendar.vue

@@ -14,7 +14,8 @@
         show-week
         :events="events"
         :type="internalCalendarType"
-        :event_color="getColorForEvent"
+        :event-color="getColorForEvent"
+        :event-text-color="getTextColorForEvent"
         :first-time="startWithFirstTime ? firstTime : undefined"
         interval-height="60"
         @click:date="viewDay"
@@ -313,8 +314,17 @@ export default {
       return 60 * date.hour + date.minute;
     },
     getColorForEvent(event) {
+      if (event.status === "CANCELLED") {
+        return event.color + "40";
+      }
       return event.color;
     },
+    getTextColorForEvent(event) {
+      if (event.status === "CANCELLED") {
+        return event.color;
+      }
+      return "white";
+    },
     setCalendarRange({ start, end }) {
       this.range.start = start;
       this.range.end = end;