Show more details in calendar events and improve design

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

@@ -110,6 +110,7 @@
                   :is="eventBarComponentForFeed(event.category)"
                   :event="event"
                   :event-parsed="eventParsed"
+                  :calendarType="currentCalendarType"
                 />
               </template>
             </v-calendar>

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

@@ -5,26 +5,33 @@
     :activator="selectedElement"
     offset-x
   >
-    <v-card color="grey lighten-4" min-width="350px" flat>
-      <v-toolbar :color="selectedEvent.color" dark>
+    <v-card min-width="350px" flat>
+      <v-toolbar :color="selectedEvent.color" dark dense>
         <v-toolbar-title>{{ selectedEvent.name }}</v-toolbar-title>
         <v-spacer></v-spacer>
-        <v-btn icon @click="model = false">
-          <v-icon>mdi-close</v-icon>
-        </v-btn>
+        <v-chip v-if="selectedEvent.status === 'CANCELLED'" color="error" label>
+          <v-avatar left>
+            <v-icon>mdi-cancel</v-icon>
+          </v-avatar>
+          {{ $t("calendar.cancelled") }}
+        </v-chip>
       </v-toolbar>
       <v-card-text>
+        <v-icon left>mdi-calendar-today-outline</v-icon>
         <span v-if="selectedEvent.start !== selectedEvent.end">
           {{ $d(selectedEvent.start, "shortDateTime") }} –
           {{ $d(selectedEvent.end, "shortDateTime") }}
         </span>
         <span v-else> {{ $d(selectedEvent.start, "shortDateTime") }}</span>
       </v-card-text>
-      <v-card-text
-        v-if="selectedEvent.description"
-        style="white-space: pre-line"
-      >
-        {{ selectedEvent.description }}
+      <v-divider v-if="selectedEvent.description" />
+      <v-card-text class="d-flex" v-if="selectedEvent.description">
+        <div>
+          <v-icon left>mdi-card-text-outline</v-icon>
+        </div>
+        <div style="white-space: pre-line">
+          {{ selectedEvent.description }}
+        </div>
       </v-card-text>
     </v-card>
   </v-menu>

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

 <template>
-  <div class="mx-2">
-    <b v-if="eventParsed.hasTime">{{ eventParsed.start.time }}</b>
+  <div
+    class="mx-1 truncate"
+    :style="
+      event.status === 'CANCELLED' ? 'text-decoration: line-through;' : ''
+    "
+  >
+    <span
+      v-if="calendarType === 'month' && eventParsed.start.hasTime"
+      class="mr-1 font-weight-bold"
+      >{{ eventParsed.start.time }}</span
+    >
     {{ event.name }}
   </div>
 </template>

aleksis/core/frontend/components/calendar/calendarOverview.graphql

@@ -14,6 +14,7 @@ query ($start: Date, $end: Date) {
         description
         uid
         allDay
+        status
       }
     }
   }

aleksis/core/frontend/messages/en.json

@@ -253,7 +253,8 @@
     "day": "Day",
     "today": "Today",
     "select": "Select calendars",
-    "ics_to_clipboard": "Copy link to calendar ICS to clipboard"
+    "ics_to_clipboard": "Copy link to calendar ICS to clipboard",
+    "cancelled": "Cancelled"
   },
   "status": {
     "changes": "You have unsaved changes.",

aleksis/core/frontend/mixins/calendarFeedEventBar.js

@@ -11,6 +11,10 @@ const calendarFeedEventBarMixin = {
       required: true,
       type: Object,
     },
+    calendarType: {
+      required: true,
+      type: String,
+    },
   },
 };
 

aleksis/core/schema/calendar.py

@@ -15,6 +15,7 @@ class CalendarEventType(ObjectType):
     color = graphene.String()
     uid = graphene.String()
     all_day = graphene.Boolean()
+    status = graphene.String()
 
     def resolve_name(root, info, **kwargs):
         return root["SUMMARY"]
@@ -37,6 +38,9 @@ class CalendarEventType(ObjectType):
     def resolve_all_day(root, info, **kwargs):
         return not isinstance(root["DTSTART"].dt, datetime)
 
+    def resolve_status(root, info, **kwargs):
+        return root.get("STATUS", "")
+
 
 class CalendarFeedType(ObjectType):
     events = graphene.List(