Repository: ephios-dev/ephios

Issue:
Improve calendar design
As a user, I expect the event calendar view to display the shifts in small boxes with times inside of each calendar day (similiar to Google Calendar etc.)


Discussion:
Inspiration Moodle
![grafik](https://user-images.githubusercontent.com/12702135/178154982-f5bb0ed0-8bd7-415f-83bc-b09b94f1ed4b.png)
Inspiration Google Calendar
![grafik](https://user-images.githubusercontent.com/12702135/178155049-38fac8f9-3e45-43a0-b6fd-fb64b02c92ae.png)
Inspiration OWA
![grafik](https://user-images.githubusercontent.com/12702135/178155179-6a2485b5-082e-4d62-beec-c3f8f6a66e3c.png)


Besides using boxes and truncating the event title, I think we should also use a fixed height for the rows (=weeks). we could use something like the "+1" in OWA or "+1 more" in GCal if not all events fit inside the row. Another thing to think about is whether we want to display multiple shifts that occur on the same day (e.g day and night shift would currently result in two calender entries for the day). Also: can we display the event type somehow? is using the event type color as a text color with an explanation too much (I think so)?

Resolving patch:
diff --git a/ephios/core/calendar.py b/ephios/core/calendar.py
--- a/ephios/core/calendar.py
+++ b/ephios/core/calendar.py
@@ -2,6 +2,7 @@
 from datetime import date, datetime
 from itertools import groupby
 
+from django.template.loader import render_to_string
 from django.utils.formats import date_format
 from django.utils.translation import gettext as _
 
@@ -24,23 +25,20 @@ def formatmonthname(self, theyear, themonth, withyear=True):
         return f'<tr><th colspan="7" class="month">{date_format(dt, format="b Y")}</th></tr>'
 
     def formatweekday(self, day):
-        return f'<th class="{self.cssclasses[day]}">{_(day_abbr[day])}</th>'
+        return f'<th class="text-center {self.cssclasses[day]}">{_(day_abbr[day])}</th>'
 
     def formatday(self, day, weekday):
         if day != 0:
             cssclass = self.cssclasses[weekday]
-            if date.today() == date(self.year, self.month, day):
-                cssclass += " calendar-today"
+            today = date.today() == date(self.year, self.month, day)
             if day in self.shifts:
                 cssclass += " filled"
-                body = ["<br />"]
-                for shift in self.shifts[day]:
-                    body.append(f'<a href="{shift.event.get_absolute_url()}">')
-                    body.append(shift.event.title)
-                    body.append("</a><br />")
-                return self.day_cell(cssclass, f"{day} {''.join(body)}")
-            return self.day_cell(cssclass, day)
+            content = render_to_string(
+                "core/fragments/calendar_day.html",
+                {"day": day, "shifts": self.shifts.get(day, None), "today": today},
+            )
+            return self.day_cell(cssclass, content)
         return self.day_cell("noday", "&nbsp;")
 
     def day_cell(self, cssclass, body):
-        return f'<td class="calendar-row-height p-1 break-word {cssclass}">{body}</td>'
+        return f'<td class="calendar-row-height p-0 pe-1 p-lg-1 {cssclass}">{body}</td>'
diff --git a/ephios/extra/colors.py b/ephios/extra/colors.py
--- a/ephios/extra/colors.py
+++ b/ephios/extra/colors.py
@@ -27,4 +27,6 @@ def get_eventtype_color_style(eventtype: EventType):
         )
     )
     text_color = get_text_color_for_background(luminance)
-    return f".badge-{eventtype.pk}-color{{background-color:{eventtype.color};color:{text_color}}}"
+    return (
+        f".eventtype-{eventtype.pk}-color{{background-color:{eventtype.color};color:{text_color}}}"
+    )


Test patch: