Merge pull request #1284 from jrlambs/develop

New calendar display format

CHANGELOG.md

@@ -13,6 +13,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - Added scroll up in fullscreen newsfeed article view
 - Changed fullscreen newsfeed width from 100% to 100vw (better results)
 - Added option to calendar module that colors only the symbol instead of the whole line
+- Added option for new display format in the calendar module with date headers with times/events below.
 
 ### Changed
 - Use Electron 2 Beta. **Please test!**

modules/default/calendar/README.md

@@ -41,7 +41,7 @@ The following properties can be configured:
 | `displayRepeatingCountTitle` | Show count title for yearly repeating events (e.g. "X. Birthday", "X. Anniversary") <br><br> **Possible values:** `true` or `false` <br> **Default value:** `false`
 | `dateFormat`                 | Format to use for the date of events (when using absolute dates) <br><br> **Possible values:** See [Moment.js formats](http://momentjs.com/docs/#/parsing/string-format/) <br> **Default value:** `MMM Do` (e.g. Jan 18th)
 | `fullDayEventDateFormat`     | Format to use for the date of full day events (when using absolute dates) <br><br> **Possible values:** See [Moment.js formats](http://momentjs.com/docs/#/parsing/string-format/) <br> **Default value:** `MMM Do` (e.g. Jan 18th)
-| `timeFormat`                 | Display event times as absolute dates, or relative time <br><br> **Possible values:** `absolute` or `relative` <br> **Default value:** `relative`
+| `timeFormat`                 | Display event times as absolute dates, or relative time, or using absolute date headers with times for each event next to it <br><br> **Possible values:** `absolute` or `relative` or `dateheaders` <br> **Default value:** `relative`
 | `getRelative`                | How much time (in hours) should be left until calendar events start getting relative? <br><br> **Possible values:** `0` (events stay absolute) - `48` (48 hours before the event starts) <br> **Default value:** `6`
 | `urgency`                    | When using a timeFormat of `absolute`, the `urgency` setting allows you to display events within a specific time frame as `relative`. This allows events within a certain time frame to be displayed as relative (in xx days) while others are displayed as absolute dates <br><br> **Possible values:** a positive integer representing the number of days for which you want a relative date, for example `7` (for 7 days) <br><br> **Default value:** `7`
 | `broadcastEvents`            | If this property is set to true, the calendar will broadcast all the events to all other modules with the notification message: `CALENDAR_EVENTS`. The event objects are stored in an array and contain the following fields: `title`, `startDate`, `endDate`, `fullDayEvent`, `location` and `geo`. <br><br> **Possible values:** `true`, `false` <br><br> **Default value:** `true`

modules/default/calendar/calendar.js

@@ -132,8 +132,29 @@ Module.register("calendar", {
 			return wrapper;
 		}
 
+		var lastSeenDate = "";
+
 		for (var e in events) {
 			var event = events[e];
+			var dateAsString = moment(event.startDate, "x").format(this.config.dateFormat);
+			if(this.config.timeFormat === "dateheaders"){
+				if(lastSeenDate !== dateAsString){
+					var dateRow = document.createElement("tr");
+					dateRow.className = "normal"
+					var dateCell = document.createElement("td");
+
+					dateCell.colSpan = "3";
+					dateCell.innerHTML = dateAsString;
+					dateRow.appendChild(dateCell);
+					wrapper.appendChild(dateRow);
+
+
+					lastSeenDate = dateAsString;
+				}
+			}
+
+
+
 			var eventWrapper = document.createElement("tr");
 
 			if (this.config.colored && !this.config.coloredSymbolOnly) {
@@ -164,6 +185,10 @@ Module.register("calendar", {
 					symbolWrapper.appendChild(symbol);
 				}
 				eventWrapper.appendChild(symbolWrapper);
+			}else if(this.config.timeFormat === "dateheaders"){
+				var blankCell = document.createElement("td");
+				blankCell.innerHTML = "   "
+				eventWrapper.appendChild(blankCell);
 			}
 
 			var titleWrapper = document.createElement("td"),
@@ -189,9 +214,42 @@ Module.register("calendar", {
 				titleWrapper.className = "title";
 			}
 
-			eventWrapper.appendChild(titleWrapper);
+			if(this.config.timeFormat === "dateheaders"){
 
+				if (event.fullDayEvent) {
+					titleWrapper.colSpan = "2";
+					titleWrapper.align = "left";
+
+				}else{
 					var timeWrapper = document.createElement("td");
+					timeWrapper.className = "time light";
+					timeWrapper.align = "left";
+					timeWrapper.style.paddingLeft = "2px";
+					var timeFormatString = "";
+					switch (config.timeFormat) {
+					case 12: {
+						timeFormatString = "h:mm A";
+						break;
+					}
+					case 24: {
+						timeFormatString = "HH:mm";
+						break;
+					}
+					default: {
+						timeFormatString = "HH:mm";
+						break;
+					}
+					}
+					timeWrapper.innerHTML = moment(event.startDate, "x").format(timeFormatString);
+					eventWrapper.appendChild(timeWrapper);
+					titleWrapper.align = "right";
+				}
+
+				eventWrapper.appendChild(titleWrapper);
+			}else{
+				var timeWrapper = document.createElement("td");
+
+				eventWrapper.appendChild(titleWrapper);
 				//console.log(event.today);
 				var now = new Date();
 				// Define second, minute, hour, and day variables
@@ -272,6 +330,7 @@ Module.register("calendar", {
 				//console.log(event);
 				timeWrapper.className = "time light";
 				eventWrapper.appendChild(timeWrapper);
+			}
 
 			wrapper.appendChild(eventWrapper);
 
@@ -359,6 +418,9 @@ Module.register("calendar", {
 						continue;
 					}
 				}
+				if(this.listContainsEvent(events,event)){
+					continue;
+				}
 				event.url = c;
 				event.today = event.startDate >= today && event.startDate < (today + 24 * 60 * 60 * 1000);
 				events.push(event);
@@ -372,6 +434,17 @@ Module.register("calendar", {
 		return events.slice(0, this.config.maximumEntries);
 	},
 
+
+	listContainsEvent: function(eventList, event){
+		for(let evt of eventList){
+			if(evt.title === event.title && parseInt(evt.startDate) === parseInt(event.startDate)){
+				return true;
+			}
+		}
+		return false;
+
+	},
+
 	/* createEventList(url)
 	 * Requests node helper to add calendar url.
 	 *