From cf5cfecbc8cac75c051515eb9018138133400bae Mon Sep 17 00:00:00 2001
From: Franco Speziali <franco@wemakemachines.com>
Date: Thu, 17 Mar 2022 15:53:20 +0100
Subject: [PATCH] Updated hoverCard rendering logic

---
 src/EventGroupingHtmlRenderer/DayRenderer.ts  |  2 +-
 .../MonthRenderer.ts                          |  2 +-
 src/EventGroupingHtmlRenderer/Renderer.ts     | 28 ++++++++++++++-----
 src/EventGroupingHtmlRenderer/WeekRenderer.ts |  2 +-
 4 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/EventGroupingHtmlRenderer/DayRenderer.ts b/src/EventGroupingHtmlRenderer/DayRenderer.ts
index a5c152d..f67925d 100644
--- a/src/EventGroupingHtmlRenderer/DayRenderer.ts
+++ b/src/EventGroupingHtmlRenderer/DayRenderer.ts
@@ -9,7 +9,7 @@ export default class DayRenderer extends Renderer {
 
   protected renderDateAsIcon(eventDate, groupIndex): HTMLSpanElement {
     const html = document.createElement("span");
-    html.className = "event";
+    html.className = "icon";
 
     const dayInMonth = eventDate.getDate();
 
diff --git a/src/EventGroupingHtmlRenderer/MonthRenderer.ts b/src/EventGroupingHtmlRenderer/MonthRenderer.ts
index 3e7e218..e3cbf96 100644
--- a/src/EventGroupingHtmlRenderer/MonthRenderer.ts
+++ b/src/EventGroupingHtmlRenderer/MonthRenderer.ts
@@ -9,7 +9,7 @@ export default class MonthRenderer extends Renderer {
 
   protected renderDateAsIcon(eventDate, groupIndex): HTMLSpanElement {
     const html = document.createElement("span");
-    html.className = "event";
+    html.className = "icon";
 
     // unlike getDate(), getMonth is 0 based
     const month = eventDate.getMonth() + 1;
diff --git a/src/EventGroupingHtmlRenderer/Renderer.ts b/src/EventGroupingHtmlRenderer/Renderer.ts
index bbe5863..574ee7b 100644
--- a/src/EventGroupingHtmlRenderer/Renderer.ts
+++ b/src/EventGroupingHtmlRenderer/Renderer.ts
@@ -1,3 +1,4 @@
+import { format } from "date-fns";
 import { generateRandomColor } from "../utilities";
 import EventGrouping from "../EventGrouping";
 import { Event } from "../types";
@@ -52,8 +53,17 @@ export default abstract class Renderer {
   }
 
   protected renderHoverCard(events: Event[]): HTMLDivElement {
-    const htmlHoverCard = document.createElement("div");
-    htmlHoverCard.className = "hover-card";
+    const html = document.createElement("div");
+    html.className = "hover-card";
+
+    const htmlMonthYear = document.createElement("p");
+    htmlMonthYear.className = "month-year";
+    htmlMonthYear.textContent = events[0].date.toLocaleDateString(undefined, {
+      year: "numeric",
+      month: "long",
+    });
+
+    html.appendChild(htmlMonthYear);
 
     const cardDetails = events.map((event) => {
       if (!event) {
@@ -61,23 +71,27 @@ export default abstract class Renderer {
       }
 
       const htmlEvent = document.createElement("div");
-      const htmlDateText = document.createElement("p");
-      htmlDateText.textContent = event.date.toLocaleDateString();
+      htmlEvent.className = "event";
+      const htmlEventDate = document.createElement("p");
+      htmlEventDate.className = "date";
+      htmlEventDate.textContent = format(event.date, "EEEE do");
       const htmlEventTitle = document.createElement("p");
+      htmlEventTitle.className = "title";
       htmlEventTitle.textContent = event.title;
       const htmlEventText = document.createElement("p");
+      htmlEventText.className = "text";
       htmlEventText.textContent = event.text;
 
-      htmlEvent.appendChild(htmlDateText);
+      htmlEvent.appendChild(htmlEventDate);
       htmlEvent.appendChild(htmlEventTitle);
       htmlEvent.appendChild(htmlEventText);
 
       return htmlEvent;
     });
 
-    cardDetails.forEach((cardDetail) => htmlHoverCard.appendChild(cardDetail));
+    cardDetails.forEach((cardDetail) => html.appendChild(cardDetail));
 
-    return htmlHoverCard;
+    return html;
   }
 
   protected renderIcon(event: Event | undefined): HTMLSpanElement {
diff --git a/src/EventGroupingHtmlRenderer/WeekRenderer.ts b/src/EventGroupingHtmlRenderer/WeekRenderer.ts
index 4dce8a0..d86a979 100644
--- a/src/EventGroupingHtmlRenderer/WeekRenderer.ts
+++ b/src/EventGroupingHtmlRenderer/WeekRenderer.ts
@@ -10,7 +10,7 @@ export default class WeekRenderer extends Renderer {
 
   protected renderDateAsIcon(eventDate, groupIndex): HTMLSpanElement {
     const html = document.createElement("span");
-    html.className = "event";
+    html.className = "icon";
 
     const week = getWeek(eventDate);