kenmirrors/MagicMirror
1
0
Fork 0
mirror of https://github.com/MichMich/MagicMirror.git synced 2025-06-27 03:39:55 +00:00
Code Issues Projects Releases Wiki Activity

Added css class names "today" and "tomorrow" for calendar (#2939)

Browse Source 
Added class names "today" and "tomorrow" on the calendar module tr
elements (i.e. calendar items).
This way you can for example color your events today and/or tomorrow to
more easily see what's happening in the near future.

Implemented by adding an event.tomorrow variable (similar to
event.today) that can be used for other things in the future. Also
replaced a few hardcoded values (hours, seconds etc.) with constants to
make the code more consistent.

Edit: tested with normal events, split day events and events with
locations.
This commit is contained in:
Johan 2022-10-11 21:05:11 +02:00 committed by GitHub
parent a328ce537f
commit 85a9f14178
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -16,6 +16,7 @@ Special thanks to: @rejas, @sdetweil
- Added test for remoteFile option in compliments module - Added test for remoteFile option in compliments module
- Added hourlyWeather functionality to Weather.gov weather provider - Added hourlyWeather functionality to Weather.gov weather provider
- Removed weatherEndpoint definition from weathergov.js (not used) - Removed weatherEndpoint definition from weathergov.js (not used)
- Added css class names "today" and "tomorrow" for default calendar
### Removed ### Removed

46
modules/default/calendar/calendar.js
View File

@ -163,11 +163,10 @@ Module.register("calendar", {
// Override dom generator. // Override dom generator.
getDom: function () { getDom: function () {
// Define second, minute, hour, and day constants const ONE_SECOND = 1000; // 1,000 milliseconds
const oneSecond = 1000; // 1,000 milliseconds const ONE_MINUTE = ONE_SECOND * 60;
const oneMinute = oneSecond * 60; const ONE_HOUR = ONE_MINUTE * 60;
const oneHour = oneMinute * 60; const ONE_DAY = ONE_HOUR * 24;
const oneDay = oneHour * 24;
const events = this.createEventList(true); const events = this.createEventList(true);
const wrapper = document.createElement("table"); const wrapper = document.createElement("table");
@ -205,6 +204,8 @@ Module.register("calendar", {
if (lastSeenDate !== dateAsString) { if (lastSeenDate !== dateAsString) {
const dateRow = document.createElement("tr"); const dateRow = document.createElement("tr");
dateRow.className = "normal"; dateRow.className = "normal";
if (event.today) dateRow.className += " today";
else if (event.tomorrow) dateRow.className += " tomorrow";
const dateCell = document.createElement("td"); const dateCell = document.createElement("td");
dateCell.colSpan = "3"; dateCell.colSpan = "3";
@ -230,6 +231,8 @@ Module.register("calendar", {
} }
eventWrapper.className = "normal event"; eventWrapper.className = "normal event";
if (event.today) eventWrapper.className += " today";
else if (event.tomorrow) eventWrapper.className += " tomorrow";
const symbolWrapper = document.createElement("td"); const symbolWrapper = document.createElement("td");
@ -338,7 +341,7 @@ Module.register("calendar", {
// For full day events we use the fullDayEventDateFormat // For full day events we use the fullDayEventDateFormat
if (event.fullDayEvent) { if (event.fullDayEvent) {
//subtract one second so that fullDayEvents end at 23:59:59, and not at 0:00:00 one the next day //subtract one second so that fullDayEvents end at 23:59:59, and not at 0:00:00 one the next day
event.endDate -= oneSecond; event.endDate -= ONE_SECOND;
timeWrapper.innerHTML = this.capFirst(moment(event.startDate, "x").format(this.config.fullDayEventDateFormat)); timeWrapper.innerHTML = this.capFirst(moment(event.startDate, "x").format(this.config.fullDayEventDateFormat));
} else if (this.config.getRelative > 0 && event.startDate < now) { } else if (this.config.getRelative > 0 && event.startDate < now) {
// Ongoing and getRelative is set // Ongoing and getRelative is set
@ -348,7 +351,7 @@ Module.register("calendar", {
timeUntilEnd: moment(event.endDate, "x").fromNow(true) timeUntilEnd: moment(event.endDate, "x").fromNow(true)
}) })
); );
} else if (this.config.urgency > 0 && event.startDate - now < this.config.urgency * oneDay) { } else if (this.config.urgency > 0 && event.startDate - now < this.config.urgency * ONE_DAY) {
// Within urgency days // Within urgency days
timeWrapper.innerHTML = this.capFirst(moment(event.startDate, "x").fromNow()); timeWrapper.innerHTML = this.capFirst(moment(event.startDate, "x").fromNow());
} }
@ -356,9 +359,9 @@ Module.register("calendar", {
// Full days events within the next two days // Full days events within the next two days
if (event.today) { if (event.today) {
timeWrapper.innerHTML = this.capFirst(this.translate("TODAY")); timeWrapper.innerHTML = this.capFirst(this.translate("TODAY"));
} else if (event.startDate - now < oneDay && event.startDate - now > 0) { } else if (event.startDate - now < ONE_DAY && event.startDate - now > 0) {
timeWrapper.innerHTML = this.capFirst(this.translate("TOMORROW")); timeWrapper.innerHTML = this.capFirst(this.translate("TOMORROW"));
} else if (event.startDate - now < 2 * oneDay && event.startDate - now > 0) { } else if (event.startDate - now < 2 * ONE_DAY && event.startDate - now > 0) {
if (this.translate("DAYAFTERTOMORROW") !== "DAYAFTERTOMORROW") { if (this.translate("DAYAFTERTOMORROW") !== "DAYAFTERTOMORROW") {
timeWrapper.innerHTML = this.capFirst(this.translate("DAYAFTERTOMORROW")); timeWrapper.innerHTML = this.capFirst(this.translate("DAYAFTERTOMORROW"));
} }
@ -367,7 +370,7 @@ Module.register("calendar", {
} else { } else {
// Show relative times // Show relative times
if (event.startDate >= now || (event.fullDayEvent && event.today)) { if (event.startDate >= now || (event.fullDayEvent && event.today)) {
// Use relative time // Use relative time
if (!this.config.hideTime && !event.fullDayEvent) { if (!this.config.hideTime && !event.fullDayEvent) {
timeWrapper.innerHTML = this.capFirst(moment(event.startDate, "x").calendar(null, { sameElse: this.config.dateFormat })); timeWrapper.innerHTML = this.capFirst(moment(event.startDate, "x").calendar(null, { sameElse: this.config.dateFormat }));
} else { } else {
@ -384,14 +387,14 @@ Module.register("calendar", {
// Full days events within the next two days // Full days events within the next two days
if (event.today) { if (event.today) {
timeWrapper.innerHTML = this.capFirst(this.translate("TODAY")); timeWrapper.innerHTML = this.capFirst(this.translate("TODAY"));
} else if (event.startDate - now < oneDay && event.startDate - now > 0) { } else if (event.startDate - now < ONE_DAY && event.startDate - now > 0) {
timeWrapper.innerHTML = this.capFirst(this.translate("TOMORROW")); timeWrapper.innerHTML = this.capFirst(this.translate("TOMORROW"));
} else if (event.startDate - now < 2 * oneDay && event.startDate - now > 0) { } else if (event.startDate - now < 2 * ONE_DAY && event.startDate - now > 0) {
if (this.translate("DAYAFTERTOMORROW") !== "DAYAFTERTOMORROW") { if (this.translate("DAYAFTERTOMORROW") !== "DAYAFTERTOMORROW") {
timeWrapper.innerHTML = this.capFirst(this.translate("DAYAFTERTOMORROW")); timeWrapper.innerHTML = this.capFirst(this.translate("DAYAFTERTOMORROW"));
} }
} }
} else if (event.startDate - now < this.config.getRelative * oneHour) { } else if (event.startDate - now < this.config.getRelative * ONE_HOUR) {
// If event is within getRelative hours, display 'in xxx' time format or moment.fromNow() // If event is within getRelative hours, display 'in xxx' time format or moment.fromNow()
timeWrapper.innerHTML = this.capFirst(moment(event.startDate, "x").fromNow()); timeWrapper.innerHTML = this.capFirst(moment(event.startDate, "x").fromNow());
} }
@ -421,6 +424,8 @@ Module.register("calendar", {
if (event.location !== false) { if (event.location !== false) {
const locationRow = document.createElement("tr"); const locationRow = document.createElement("tr");
locationRow.className = "normal xsmall light"; locationRow.className = "normal xsmall light";
if (event.today) locationRow.className += " today";
else if (event.tomorrow) locationRow.className += " tomorrow";
if (this.config.displaySymbol) { if (this.config.displaySymbol) {
const symbolCell = document.createElement("td"); const symbolCell = document.createElement("td");
@ -491,6 +496,11 @@ Module.register("calendar", {
* @returns {object[]} Array with events. * @returns {object[]} Array with events.
*/ */
createEventList: function (limitNumberOfEntries) { createEventList: function (limitNumberOfEntries) {
const ONE_SECOND = 1000; // 1,000 milliseconds
const ONE_MINUTE = ONE_SECOND * 60;
const ONE_HOUR = ONE_MINUTE * 60;
const ONE_DAY = ONE_HOUR * 24;
const now = new Date(); const now = new Date();
const today = moment().startOf("day"); const today = moment().startOf("day");
const future = moment().startOf("day").add(this.config.maximumNumberOfDays, "days").toDate(); const future = moment().startOf("day").add(this.config.maximumNumberOfDays, "days").toDate();
@ -521,19 +531,21 @@ Module.register("calendar", {
} }
} }
event.url = calendarUrl; event.url = calendarUrl;
event.today = event.startDate >= today && event.startDate < today + 24 * 60 * 60 * 1000; event.today = event.startDate >= today && event.startDate < today + ONE_DAY;
event.tomorrow = !event.today && event.startDate >= today + ONE_DAY && event.startDate < today + 2 * ONE_DAY;
/* if sliceMultiDayEvents is set to true, multiday events (events exceeding at least one midnight) are sliced into days, /* if sliceMultiDayEvents is set to true, multiday events (events exceeding at least one midnight) are sliced into days,
* otherwise, esp. in dateheaders mode it is not clear how long these events are. * otherwise, esp. in dateheaders mode it is not clear how long these events are.
*/ */
const maxCount = Math.ceil((event.endDate - 1 - moment(event.startDate, "x").endOf("day").format("x")) / (1000 * 60 * 60 * 24)) + 1; const maxCount = Math.ceil((event.endDate - 1 - moment(event.startDate, "x").endOf("day").format("x")) / ONE_DAY) + 1;
if (this.config.sliceMultiDayEvents && maxCount > 1) { if (this.config.sliceMultiDayEvents && maxCount > 1) {
const splitEvents = []; const splitEvents = [];
let midnight = moment(event.startDate, "x").clone().startOf("day").add(1, "day").format("x"); let midnight = moment(event.startDate, "x").clone().startOf("day").add(1, "day").format("x");
let count = 1; let count = 1;
while (event.endDate > midnight) { while (event.endDate > midnight) {
const thisEvent = JSON.parse(JSON.stringify(event)); // clone object const thisEvent = JSON.parse(JSON.stringify(event)); // clone object
thisEvent.today = thisEvent.startDate >= today && thisEvent.startDate < today + 24 * 60 * 60 * 1000; thisEvent.today = thisEvent.startDate >= today && thisEvent.startDate < today + ONE_DAY;
thisEvent.tomorrow = !thisEvent.today && thisEvent.startDate >= today + ONE_DAY && thisEvent.startDate < today + 2 * ONE_DAY;
thisEvent.endDate = midnight; thisEvent.endDate = midnight;
thisEvent.title += " (" + count + "/" + maxCount + ")"; thisEvent.title += " (" + count + "/" + maxCount + ")";
splitEvents.push(thisEvent); splitEvents.push(thisEvent);
@ -544,6 +556,8 @@ Module.register("calendar", {
} }
// Last day // Last day
event.title += " (" + count + "/" + maxCount + ")"; event.title += " (" + count + "/" + maxCount + ")";
event.today += event.startDate >= today && event.startDate < today + ONE_DAY;
event.tomorrow = !event.today && event.startDate >= today + ONE_DAY && event.startDate < today + 2 * ONE_DAY;
splitEvents.push(event); splitEvents.push(event);
for (let splitEvent of splitEvents) { for (let splitEvent of splitEvents) {