diff --git a/CHANGELOG.md b/CHANGELOG.md
index f55c6ed6..a3e23c6d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
### Changed
### Added
+- Add in option to wrap long calendar events to multiple lines using `wrapEvents` configuration option
### Updated
diff --git a/modules/default/calendar/README.md b/modules/default/calendar/README.md
index 470560ba..003c13e1 100644
--- a/modules/default/calendar/README.md
+++ b/modules/default/calendar/README.md
@@ -31,6 +31,7 @@ The following properties can be configured:
| `displaySymbol` | Display a symbol in front of an entry.
**Possible values:** `true` or `false`
**Default value:** `true`
| `defaultSymbol` | The default symbol.
**Possible values:** See [Font Awsome](http://fontawesome.io/icons/) website.
**Default value:** `calendar`
| `maxTitleLength` | The maximum title length.
**Possible values:** `10` - `50`
**Default value:** `25`
+| `wrapEvents` | Wrap event titles to multiple lines. Breaks lines at the length defined by `maxTitleLength`.
**Possible values:** `true` or `false`
**Default value:** `false`
| `fetchInterval` | How often does the content needs to be fetched? (Milliseconds)
**Possible values:** `1000` - `86400000`
**Default value:** `300000` (5 minutes)
| `animationSpeed` | Speed of the update animation. (Milliseconds)
**Possible values:**`0` - `5000`
**Default value:** `2000` (2 seconds)
| `fade` | Fade the future events to black. (Gradient)
**Possible values:** `true` or `false`
**Default value:** `true`
diff --git a/modules/default/calendar/calendar.css b/modules/default/calendar/calendar.css
index 26b1e93d..123ab084 100644
--- a/modules/default/calendar/calendar.css
+++ b/modules/default/calendar/calendar.css
@@ -2,6 +2,7 @@
padding-left: 0;
padding-right: 10px;
font-size: 80%;
+ vertical-align: top;
}
.calendar .symbol span {
diff --git a/modules/default/calendar/calendar.js b/modules/default/calendar/calendar.js
index 12ce290f..fa77c94a 100644
--- a/modules/default/calendar/calendar.js
+++ b/modules/default/calendar/calendar.js
@@ -18,6 +18,7 @@ Module.register("calendar", {
displayRepeatingCountTitle: false,
defaultRepeatingCountTitle: "",
maxTitleLength: 25,
+ wrapEvents: false, // wrap events to multiple lines breaking at maxTitleLength
fetchInterval: 5 * 60 * 1000, // Update every 5 minutes.
animationSpeed: 2000,
fade: true,
@@ -414,15 +415,38 @@ Module.register("calendar", {
*
* argument string string - The string to shorten.
* argument maxLength number - The max length of the string.
+ * argument wrapEvents - Wrap the text after the line has reached maxLength
*
* return string - The shortened string.
*/
- shorten: function (string, maxLength) {
- if (string.length > maxLength) {
- return string.slice(0, maxLength) + "…";
- }
+ shorten: function (string, maxLength, wrapEvents) {
+ if (wrapEvents) {
+ var temp = "";
+ var currentLine = "";
+ var words = string.split(" ");
- return string;
+ for (var i = 0; i < words.length; i++) {
+ var word = words[i];
+ if (currentLine.length + word.length < 25 - 1) { // max - 1 to account for a space
+ currentLine += (word + " ");
+ } else {
+ if (currentLine.length > 0) {
+ temp += (currentLine + "
" + word + " ");
+ } else {
+ temp += (word + "
");
+ }
+ currentLine = "";
+ }
+ }
+
+ return temp + currentLine;
+ } else {
+ if (string.length > maxLength) {
+ return string.slice(0, maxLength) + "…";
+ } else {
+ return string;
+ }
+ }
},
/* capFirst(string)
@@ -437,7 +461,7 @@ Module.register("calendar", {
/* titleTransform(title)
* Transforms the title of an event for usage.
* Replaces parts of the text as defined in config.titleReplace.
- * Shortens title based on config.maxTitleLength
+ * Shortens title based on config.maxTitleLength and config.wrapEvents
*
* argument title string - The title to transform.
*
@@ -456,7 +480,7 @@ Module.register("calendar", {
title = title.replace(needle, replacement);
}
- title = this.shorten(title, this.config.maxTitleLength);
+ title = this.shorten(title, this.config.maxTitleLength, this.config.wrapEvents);
return title;
},