Added coloured blocks for different months

README.md

@@ -6,6 +6,7 @@ It creates a calendar view of events that have been specified using the [YAML](h
 
 - Organises events into "groupings"; you can group events by **day**, **week**, or **month**
 - Focus is on readability and simplicity of content, which is why the **YAML** is simple in structure
+- Hover over a calendar tile to see event information
 
 ###### Example Day view
 
@@ -38,17 +39,21 @@ Create a fenced block with the **codetype** `joplin-plugin-event-calendar`
 Events are specified using the YAML syntax, with the following keys:
 
 ### group:
+
 > Sets the grouping for the view
-> - _**optional**_ 
+>
+> - _**optional**_
 > - **default** `day`
 > - **accepts** : `day`, `week`, `month`, `d`, `w`, `m`
 
 ### events:
+
 > Each individual event is a list with its own properties
 >
 > > **date:**
-> > 
+> >
 > > The date of the event
+> >
 > > - **required**
 > > - **accepts** : _yyyy-mm-dd_ or _mm-dd-yyyy_
 >
@@ -61,19 +66,22 @@ Events are specified using the YAML syntax, with the following keys:
 >
 > > **title**
 > >
-> > The title or heading of the event 
+> > The title or heading of the event
+> >
 > > - **required**
 > > - **accepts** : _string_
 >
 > > **text:**
 > >
 > > A more detailed description of the event
+> >
 > > - **optional**
 > > - **accepts** : _string_
 >
 > > **bgColor:**
 > >
 > > The background color for the event container
+> >
 > > - **optional**
 > > - **default** : random
 > > - **accepts** : _string_

src/Calendar/Abstract/GroupRenderer.ts

@@ -9,12 +9,14 @@ export default abstract class GroupRenderer {
 
   protected abstract renderDateAsIcon(
     eventDate: Date,
-    groupIndex: number
+    groupIndex: number,
   ): HTMLSpanElement;
 
   constructor(group: Event[], groupDate: Date, groupIndex: number) {
+    const month = groupDate.getMonth();
+
     this.container = document.createElement("div");
-    this.container.className = "group";
+    this.container.className = `group month-${month}`;
     this.group = group;
     this.groupDate = groupDate;
     this.groupIndex = groupIndex;

src/event-calendar.css

@@ -17,6 +17,54 @@
   background-color: aliceblue;
 }
 
+.event-calendar .group.month-0 {
+  border-top: 10px solid rgb(176, 224, 230); /* January - icy blue */
+}
+
+.event-calendar .group.month-1 {
+  border-top: 10px solid rgb(173, 216, 230); /* February - pale winter blue */
+}
+
+.event-calendar .group.month-2 {
+  border-top: 10px solid rgb(144, 238, 144); /* March - early spring green */
+}
+
+.event-calendar .group.month-3 {
+  border-top: 10px solid rgb(60, 179, 113); /* April - fresh growth green */
+}
+
+.event-calendar .group.month-4 {
+  border-top: 10px solid rgb(255, 182, 193); /* May - soft blossom pink */
+}
+
+.event-calendar .group.month-5 {
+  border-top: 10px solid rgb(255, 160, 122); /* June - warm peach */
+}
+
+.event-calendar .group.month-6 {
+  border-top: 10px solid rgb(255, 0, 183); /* July - deep pink */
+}
+
+.event-calendar .group.month-7 {
+  border-top: 10px solid rgb(255, 38, 0); /* August - hot red-orange */
+}
+
+.event-calendar .group.month-8 {
+  border-top: 10px solid rgb(255, 215, 0); /* September - golden transition */
+}
+
+.event-calendar .group.month-9 {
+  border-top: 10px solid rgb(210, 105, 30); /* October - autumn brown/orange */
+}
+
+.event-calendar .group.month-10 {
+  border-top: 10px solid rgb(128, 0, 128); /* November - deep purple */
+}
+
+.event-calendar .group.month-11 {
+  border-top: 10px solid rgb(220, 20, 60); /* December - festive red */
+}
+
 .event-calendar .group.highlight {
   border-top: 10px solid rgba(255, 223, 65, 1);
 }