Display upcoming events by listening to notifications

calendar_monthly.js

@@ -154,13 +154,21 @@
 						innerSpan.className = "monthPrev";
 						innerSpan.innerHTML = moment().subtract(1, 'months').endOf('month').subtract((startingDay - 1) - j, 'days').date();
 					} else if (day <= monthLength && (i > 0 || j >= startingDay)) {
-						if (day == moment().date()) {
+						var momentDay = moment().date(day);
+						var dayEvents = (this.events || []).filter(function(event) {
+							return momentDay.isSame(event.startDate, 'day') || momentDay.isBetween(event.startDate, event.endDate, 'day', "[)");
+						});
+						if (momentDay.isSame(moment(), 'day')) {
 							innerSpan.id = "day" + day;
 							innerSpan.className = "today";
 						} else {
 							innerSpan.id = "day" + day;
 							innerSpan.className = "daily";
 						}
+						if (dayEvents.length != 0) {
+							innerSpan.className = innerSpan.className + " events";
+							innerSpan.style = "--event-count: " + dayEvents.length + "; --event-color: " + dayEvents[0].color;
+						}
 						innerSpan.innerHTML = day;
 						day++;
 					} else if (day > monthLength && i > 0) {
@@ -243,6 +251,26 @@
 
 		var nextRefresh = moment([now.year(), now.month(), now.date(), now.hour() + 1]);
 		this.scheduleUpdate(nextRefresh);
-	}
+	},
+
+	notificationReceived: function(notification, payload, sender) {
+		var self = this;
+		if (notification == "CALENDAR_EVENTS") {
+			var result = [];
+			for (event of payload) {
+				var startDate = moment(parseInt(event.startDate));
+				var endDate = moment(parseInt(event.endDate));
+
+				result.push({
+					startDate : startDate,
+					endDate: endDate,
+					color: event.color
+				});
+			}
+			self.events = result;
+			self.loaded = false;
 
+			self.updateDom(this.config.fadeSpeed * 1000);
+		}
+	}
 });

css/themes/block.css

@@ -28,6 +28,12 @@
 	color: #333333;
 }
 
+.square-content .events {
+	border: 1px solid var(--event-color);
+	border-radius: 2px;
+	background-color: var(--event-color);
+}
+
 .square-content div {
 	display: table;
 	width: 100%;

css/themes/custom.css

@@ -51,6 +51,11 @@
 	color: #80ff00;
 }
 
+.square-content .events {
+	border: 1px solid var(--event-color);
+	color: var(--event-color);
+}
+
 .square-content div {
 	display: table;
 	width: 100%;

css/themes/slate.css

@@ -64,6 +64,10 @@
 	color: #ffffff;
 }
 
+.square-content .events {
+	color: var(--event-color);
+}
+
 .square-content div {
 	display: table;
 	width: 100%;