From a4c02cef5474874d151e96b6a9540aad1447090b Mon Sep 17 00:00:00 2001 From: "Ashley M. Kirchner" Date: Tue, 10 May 2016 01:01:00 -0600 Subject: [PATCH] Absolute or Relative time display on Calendar module 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. --- modules/default/calendar/README.md | 18 +++++++++++++ modules/default/calendar/calendar.js | 40 +++++++++++++++++++++++----- 2 files changed, 52 insertions(+), 6 deletions(-) diff --git a/modules/default/calendar/README.md b/modules/default/calendar/README.md index 00378263..d5a9f122 100644 --- a/modules/default/calendar/README.md +++ b/modules/default/calendar/README.md @@ -120,6 +120,24 @@ The following properties can be configured:
Default value: false + + timeFormat + How to display the time on calendar events
+ +
Possible values: relative or absolute +
Default value: relative + + + + urgency + When .timeFormat is set to absolute, this option allows you to set a specific number of days from now to display as relative.
+ For example, if urgency is set to 5, any events happening within those 5 days will be displayed as 'in x days'.
+ Any events outside of the urgency range will be displayed with an absolute date.
+ +
Possible values: positive integer for example 5 (for 5 days) +
Default value: 0 + + diff --git a/modules/default/calendar/calendar.js b/modules/default/calendar/calendar.js index 2d494499..4f65bf6a 100644 --- a/modules/default/calendar/calendar.js +++ b/modules/default/calendar/calendar.js @@ -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);