From 3b48f1d0423003c42c25db25545b1db8d99a2cb5 Mon Sep 17 00:00:00 2001 From: Teddy Payet Date: Thu, 4 Oct 2018 02:07:08 +0200 Subject: [PATCH] - Possibility to add classes to the cell of symbol, title and time of the events of calendar. --- CHANGELOG.md | 1 + modules/default/calendar/README.md | 3 ++ modules/default/calendar/calendar.js | 72 ++++++++++++++++++++++++---- 3 files changed, 68 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index bc50dfa4..f6065222 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ This project adheres to [Semantic Versioning](http://semver.org/). *This release is scheduled to be released on 2018-10-01.* ### Added +- Possibility to add classes to the cell of symbol, title and time of the events of calendar. ### Fixed diff --git a/modules/default/calendar/README.md b/modules/default/calendar/README.md index ae516a63..e2cf3ff9 100755 --- a/modules/default/calendar/README.md +++ b/modules/default/calendar/README.md @@ -86,6 +86,9 @@ config: { | `maximumEntries` | The maximum number of events shown. Overrides global setting. **Possible values:** `0` - `100` | `maximumNumberOfDays` | The maximum number of days in the future. Overrides global setting | `auth` | The object containing options for authentication against the calendar. +| `symbolClass` | Add a class to the cell of symbol. +| `titleClass` | Add a class to the title's cell. +| `timeClass` | Add a class to the time's cell. #### Calendar authentication options: diff --git a/modules/default/calendar/calendar.js b/modules/default/calendar/calendar.js index 3bb5a03b..b9f67bb2 100755 --- a/modules/default/calendar/calendar.js +++ b/modules/default/calendar/calendar.js @@ -82,6 +82,15 @@ Module.register("calendar", { maximumEntries: calendar.maximumEntries, maximumNumberOfDays: calendar.maximumNumberOfDays }; + if (calendar.symbolClass === "undefined" || calendar.symbolClass === null) { + calendarConfig.symbolClass = ""; + } + if (calendar.titleClass === "undefined" || calendar.titleClass === null) { + calendarConfig.titleClass = ""; + } + if (calendar.timeClass === "undefined" || calendar.timeClass === null) { + calendarConfig.timeClass = ""; + } // we check user and password here for backwards compatibility with old configs if(calendar.user && calendar.pass) { @@ -143,7 +152,7 @@ Module.register("calendar", { if(this.config.timeFormat === "dateheaders"){ if(lastSeenDate !== dateAsString){ var dateRow = document.createElement("tr"); - dateRow.className = "normal" + dateRow.className = "normal"; var dateCell = document.createElement("td"); dateCell.colSpan = "3"; @@ -172,7 +181,9 @@ Module.register("calendar", { symbolWrapper.style.cssText = "color:" + this.colorForUrl(event.url); } - symbolWrapper.className = "symbol align-right"; + var symbolClass = this.symbolClassForUrl(event.url); + symbolWrapper.className = "symbol align-right " + symbolClass; + var symbols = this.symbolsForUrl(event.url); if(typeof symbols === "string") { symbols = [symbols]; @@ -189,7 +200,7 @@ Module.register("calendar", { eventWrapper.appendChild(symbolWrapper); }else if(this.config.timeFormat === "dateheaders"){ var blankCell = document.createElement("td"); - blankCell.innerHTML = "   " + blankCell.innerHTML = "   "; eventWrapper.appendChild(blankCell); } @@ -210,10 +221,12 @@ Module.register("calendar", { titleWrapper.innerHTML = this.titleTransform(event.title) + repeatingCountTitle; + var titleClass = this.titleClassForUrl(event.url); + if (!this.config.colored) { - titleWrapper.className = "title bright"; + titleWrapper.className = "title bright " + titleClass; } else { - titleWrapper.className = "title"; + titleWrapper.className = "title " + titleClass; } if(this.config.timeFormat === "dateheaders"){ @@ -223,8 +236,10 @@ Module.register("calendar", { titleWrapper.align = "left"; }else{ + + var timeClass = this.timeClassForUrl(event.url); var timeWrapper = document.createElement("td"); - timeWrapper.className = "time light"; + timeWrapper.className = "time light " + timeClass; timeWrapper.align = "left"; timeWrapper.style.paddingLeft = "2px"; var timeFormatString = ""; @@ -343,7 +358,8 @@ Module.register("calendar", { } //timeWrapper.innerHTML += ' - '+ moment(event.startDate,'x').format('lll'); //console.log(event); - timeWrapper.className = "time light"; + var timeClass = this.timeClassForUrl(event.url); + timeWrapper.className = "time light " + timeClass; eventWrapper.appendChild(timeWrapper); } @@ -472,11 +488,15 @@ Module.register("calendar", { maximumEntries: calendarConfig.maximumEntries || this.config.maximumEntries, maximumNumberOfDays: calendarConfig.maximumNumberOfDays || this.config.maximumNumberOfDays, fetchInterval: this.config.fetchInterval, + symbolClass: calendarConfig.symbolClass, + titleClass: calendarConfig.titleClass, + timeClass: calendarConfig.timeClass, auth: auth }); }, - /* symbolsForUrl(url) + /** + * symbolsForUrl(url) * Retrieves the symbols for a specific url. * * argument url string - Url to look for. @@ -487,6 +507,42 @@ Module.register("calendar", { return this.getCalendarProperty(url, "symbol", this.config.defaultSymbol); }, + /** + * symbolClassForUrl(url) + * Retrieves the symbolClass for a specific url. + * + * @param url string - Url to look for. + * + * @returns string + */ + symbolClassForUrl: function (url) { + return this.getCalendarProperty(url, "symbolClass", ""); + }, + + /** + * titleClassForUrl(url) + * Retrieves the titleClass for a specific url. + * + * @param url string - Url to look for. + * + * @returns string + */ + titleClassForUrl: function (url) { + return this.getCalendarProperty(url, "titleClass", ""); + }, + + /** + * timeClassForUrl(url) + * Retrieves the timeClass for a specific url. + * + * @param url string - Url to look for. + * + * @returns string + */ + timeClassForUrl: function (url) { + return this.getCalendarProperty(url, "timeClass", ""); + }, + /* colorForUrl(url) * Retrieves the color for a specific url. *