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

Absolute or Relative time display on Calendar module

Browse Source 
User can now choose between an 'absolute' or 'relative time display on
events. Furthermore, when set to 'absolute', there's an option to set an
'urgency' range of days and only those events within that period will be
displayed with a relative time (in x days) while all others will have an
absolute date.
This commit is contained in:
Ashley M. Kirchner 2016-05-10 01:01:00 -06:00
parent 935f4132ab
commit a4c02cef54
2 changed files with 52 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
modules/default/calendar/README.md
View File

@ -120,6 +120,24 @@ The following properties can be configured:
<br><b>Default value:</b> <code>false</code>
</td>
</tr>
<tr>
<td><code>timeFormat</code></td>
<td>How to display the time on calendar events<br>
<br><b>Possible values:</b> <code>relative</code> or <code>absolute</code>
<br><b>Default value:</b> <code>relative</code>
</td>
</tr>
<tr>
<td><code>urgency</code></td>
<td>When .timeFormat is set to <code>absolute</code>, this option allows you to set a specific number of days from now to display as relative.<br>
For example, if urgency is set to <code>5</code>, any events happening within those 5 days will be displayed as 'in x days'.<br>
Any events outside of the urgency range will be displayed with an absolute date.<br>
<br><b>Possible values:</b> <code>positive integer</code> for example <code>5</code> (for 5 days)
<br><b>Default value:</b> <code>0</code>
</td>
</tr>
</tbody>
</table>

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

@ -21,6 +21,8 @@ Module.register("calendar",{
fetchInterval: 5 * 60 * 1000, // Update every 5 minutes.
animationSpeed: 2000,
fade: true,
urgency: 7,
timeFormat: "relative",
fadePoint: 0.25, // Start on 1/4th of the list.
calendars: [
{
@ -139,21 +141,47 @@ Module.register("calendar",{
var timeWrapper = document.createElement("td");
//console.log(event.today);
var now = new Date();
var one_hour = 1000 * 60 * 60;
var one_day = one_hour * 24;
if (event.fullDayEvent) {
if (event.today) {
timeWrapper.innerHTML = this.translate("TODAY");
} else if (event.startDate - now < 24 * 60 * 60 * 1000 && event.startDate - now > 0) {
} else if (event.startDate - now < 24 * one_hour && event.startDate - now > 0) {
timeWrapper.innerHTML = this.translate("TOMORROW");
} else {
timeWrapper.innerHTML = moment(event.startDate,"x").fromNow();
if (this.config.timeFormat === "absolute") {
if ((this.config.urgency > 1) && (event.startDate - now < (this.config.urgency * one_day))) {
// This event falls within the config.urgency time frame (in days) that the user has set
timeWrapper.innerHTML = moment(event.startDate, "x").fromNow();
} else {
timeWrapper.innerHTML = moment(event.startDate, "x").format("MMM Do");
}
} else {
timeWrapper.innerHTML = moment(event.startDate, "x").fromNow();
}
}
} else {
if (event.startDate >= new Date()) {
if (event.startDate - now > 48 * 60 * 60 * 1000) {
// if the event is no longer than 2 days away, display the absolute time.
timeWrapper.innerHTML = moment(event.startDate,"x").fromNow();
if (event.startDate - now < 2 * one_day) {
// This event is within the next 48 hours (2 days)
if (event.startDate - now < 6 * one_hour) {
// If event is within 6 hour, display 'in xxx' time format
timeWrapper.innerHTML = moment(event.startDate, "x").fromNow();
} else {
// Otherwise just say 'Today/Tomorrow at such-n-such time'
timeWrapper.innerHTML = moment(event.startDate, "x").calendar();
}
} else {
timeWrapper.innerHTML = moment(event.startDate,"x").calendar();
if (this.config.timeFormat === "absolute") {
if ((this.config.urgency > 1) && (event.startDate - now < (this.config.urgency * one_day))) {
// This event falls within the config.urgency time frame (in days) that the user has set
timeWrapper.innerHTML = moment(event.startDate, "x").fromNow();
} else {
timeWrapper.innerHTML = moment(event.startDate, "x").format("MMM Do");
}
} else {
timeWrapper.innerHTML = moment(event.startDate, "x").fromNow();
}
}
} else {
timeWrapper.innerHTML = this.translate("RUNNING") + ' ' + moment(event.endDate,"x").fromNow(true);