Show dots representing calendar events

epicyon-calendar.css

@@ -1,14 +1,13 @@
 :root {
     --main-bg-color: #282c37;
-    --calendar-bg-color: #2f333e;
+    --calendar-bg-color: #eee;
-    --lines-color: darkgray;
+    --lines-color: black;
-    --day-number: #a4a2a2;
+    --day-number: black;
-    --day-number2: #c9c7c7;
+    --day-number2: red;
     --today-foreground: white;
-    --today-circle: yellow;
+    --today-circle: red;
-    --event-foreground: #111;
+    --event-background: orange;
-    --title-text: #F6E9DC:
+    --event-foreground:white;
-    --title-background: #4E4F4A:
 }
 
 body {
@@ -95,10 +94,23 @@ tr:nth-child(even) > .calendar__day__cell:nth-child(even) {
 }
 
 .calendar__day__cell[data-event] {
-    background-color: var(--lines-color);
+    background-color: var(--event-background);
     color: var(--event-foreground);
 }
 
+.calendar__day__cell[data-event]:after {
+    content: attr(data-event);
+    color: var(--day-number);
+    display: block;
+    font-weight: 400;
+    font-size: 5rem;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 5rem;
+    text-transform: uppercase;
+}
+
 .calendar__day__cell[data-today] {
     border-radius: 50%;
     border: 4px solid var(--today-circle);
@@ -113,3 +125,15 @@ tr:nth-child(even) > .calendar__day__cell:nth-child(even) {
     color: var(--event-foreground);
     text-align: center;
 }
+.calendar__day__cell[data-today-event]:after {
+    content: attr(data-event);
+    color: var(--day-number);
+    display: block;
+    font-weight: 400;
+    font-size: 5rem;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 5rem;
+    text-transform: uppercase;
+}

webinterface.py

@@ -2895,11 +2895,12 @@ def htmlCalendar(translate: {}, \
                     if currDate.month==monthNumber:
                         if dayOfMonth==currDate.day:
                             isToday=True
-                if dayOfMonth==5:
+                if dayOfMonth==11:
-                    events['5']=[{"test": 1},{"test2": 2},{"test3": 3},{"test4": 4}]
+                    events[str(dayOfMonth)]=[{"test": 1},{"test2": 2},{"test3": 3},{"test4": 4}]
                 if events.get(str(dayOfMonth)):
                     eventDots=''
-                    for i in range(1,len(events[str(dayOfMonth)])):
+                    if len(events[str(dayOfMonth)])>1:
+                        for ev in events[str(dayOfMonth)]:
                             eventDots+='.'
                             if eventDots=='...':
                                 break