Fix issue where shared appt group details hidden

If an appointment group was shared across multiple calendars, and a
student reserved an event in one class, students in another class
would see a blank rectangle in the calendar. This was due to the
calendar generating a class name with both contexts in the name.
Now, if an event belongs to multiple contexts, we add separate class
names so that the event is colored properly.

fixes LS-1604
flag = none

Test plan:
 * May want to reproduce locally first
 - As a teacher of at least 2 courses, create an appointment group
   in calendar with at least 2 courses selected
 - As a student enrolled in at least one of those courses, reserve
   one of the slots
 - As a different student enrolled in (exactly) one of those
   courses, attempt to reserve a slot
 - The list of slots should look normal - i.e. no events with a
   missing title

Change-Id: If8f57ef2c04aa2c75a805a6946a2e5f02fd43819
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/252886
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Ed Schiebel <eschiebel@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Jackson Howe <jackson.howe@instructure.com>

app/coffeescripts/calendar/CommonEvent.CalendarEvent.js

@@ -55,7 +55,11 @@ Object.assign(CalendarEvent.prototype, {
     this.editable = true
     this.lockedTitle = this.object.parent_event_id != null
     this.description = data.description
-    this.addClass(`group_${this.contextCode()}`)
+    // in some rare cases, this.contextCode returns a comma separated list
+    const contexts = this.contextCode()?.split(',')
+    contexts?.forEach(c => {
+      this.addClass(`group_${c}`)
+    })
     if (this.isAppointmentGroupEvent()) {
       this.addClass('scheduler-event')
       if (this.object.reserved) {