Adjusted calendar/titleReplace, customEvents for MM² PR #3942 (#207)

* Adjusted calendar/titleReplace, customEvents for PR #3942

* Update calendar.md

* adding screenshots for calendar/customEvents/transform

* adjusted scrrenshots in calendar.md

modules/calendar.md

@@ -46,7 +46,7 @@ The following properties can be configured:
 | `fadePoint`                           | Where to start fade? <br><br> **Possible values:** `0` (top of the list) - `1` (bottom of list) <br> **Default value:** `0.25`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
 | `tableClass`                          | Name of the classes issued from `main.css`. <br><br> **Possible values:** xsmall, small, medium, large, xlarge. <br> **Default value:** _small._                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
 | `calendars`                           | The list of calendars. <br><br> **Possible values:** An array, see _calendar configuration_ below. <br> **Default value:** _An example calendar._                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
-| `titleReplace`                        | An object of textual replacements applied to the tile of the event. This allow to remove or replace certain words in the title. <br><br> **Example:** `{'Birthday of ' : '', 'foo':'bar'}` <br> **Default value:** `{ "De verjaardag van ": "", "'s birthday": "" }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| `titleReplace`                        | DEPRECATED, please consider switching to `customEvents` <br><br>An object of textual replacements applied to the tile of the event. This allow to remove or replace certain words in the title. <br><br> **Example:** `{'Birthday of ' : '', 'foo':'bar'}` <br> **Default value:** `{ "De verjaardag van ": "", "'s birthday": "" }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
 | `displayRepeatingCountTitle`          | Show count title for yearly repeating events (e.g. "X. Birthday", "X. Anniversary") <br><br> **Possible values:** `true` or `false` <br> **Default value:** `false`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
 | `dateFormat`                          | Format to use for the date of events when using absolute dates. (version <= 2.16.0) From version 2.16.0, this option will be used to format absolute and relative dates. (e.g. DD/MM/YY to change from the default MM/DD/YYYY) <br><br> To show the event time along with the date, use a format like `MMM Do HH:mm`. Depending on configuration, may also require the options `timeFormat:"absolute", urgency:0, getRelative:0,` <br><br> **Possible values:** See [Moment.js formats](https://momentjs.com/docs/#/parsing/string-format/) <br> **Default value:** `MMM Do` (e.g. Jan 18th)                                                                                                                                                                                                                                                                                                         |
 | `dateEndFormat`                       | Format to use for the end time of events <br><br> **Possible values:** See [Moment.js formats](https://momentjs.com/docs/#/parsing/string-format/) <br> **Default value:** `HH:mm` (e.g. 16:30)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
@@ -63,7 +63,7 @@ The following properties can be configured:
 | `broadcastPastEvents`                 | If this is set to true, events from the past `maximumNumberOfDays` will be included in event broadcasts <br> **Default value:** `false`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
 | `sliceMultiDayEvents`                 | If this is set to true, events exceeding at least one midnight will be sliced into separate events including a counter like (1/2). This is especially helpful in "dateheaders" mode. Events will be sliced at midnight, end time for all events but the last will be 23:59 <br> **Default value:** `false`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
 | `nextDaysRelative`                    | If this is set to true, the appointments of today and tomorrow are displayed relatively, even if the timeformat is set to absolute. <br> **Default value:** `false`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| `customEvents`                        | An array of `keyword`/`symbol`/`color` that will customize events based on keyword in title. <br> <br> `keyword` is a case-insensitive string that if present in event title will trigger the use of custom symbol and/or color for that event, `symbol` is the Font Awesome icon to use as symbol and `color` is the CSS color to use for the event. `keyword` and at least one of `symbol` and `color`is required. <br> <br> **Example:** `customEvents: [{keyword: 'Birthday', symbol: 'birthday-cake', color: 'Gold'}]`                                                                                                                                                                                                                                                                                                                                                                          |
+| `customEvents`                        | An array of `keyword`/`symbol`/`color`/`transform` that will customize events based on keyword in title. <br> <br> `keyword` is a case-insensitive string that if present in event title will trigger the use of custom symbol and/or color for that event,<br>`symbol` is the Font Awesome icon to use as symbol and<br> `color` is the CSS color to use for the event.<br>`transform` is an object for regular expression text replacement of the calendar title consisting of the following elements:<br>- `search` regular expression to search for<br>- `replace` replace string, may contain group match references<br>- `yearmatchgroup` (optional) the regex match group of a year that you want to replace to the current age<br><br>`keyword` and at least one of `symbol`, `color`, `transform` is required. <br> <br> **Examples:** <br>`customEvents: [{keyword: 'Birthday', symbol: 'birthday-cake', color: 'Gold'}]`<br><br>`customEvents: [{keyword: 'Geburtstag', symbol: 'birthday-cake', color: 'Gold', transform: { search: '^([^\']*) \'(\\d{4})$' , replace: '$1 ($2.)', yearmatchgroup: 2}},{keyword: 'in Hamburg', transform: { search: ' in Hamburg$' , replace: ''}} ]`<br>Will transform<br>![before](./screenshots/customEvents_transform_before.png)<br>to<br>![after](./screenshots/customEvents_transform_after.png)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
 | `limitDays`                           | If this property is set to a value greater than zero, the number of unique days displayed will be limited to `limitDays` days. <br><br> **Default value:** `0` (no limit)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
 | `limitDaysNeverSkip`                  | If this property is set to true, every event for every day will be shown regardless of if the day on has a single full day event or not.<br><br> **Default value:** `false`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
 | `flipDateHeaderTitle`                 | This property deterines if the title for the date header in the `dateheaders` time format will align to the left or right. <br><br> **Possible values:** `true` (right) or `false` (left) <br> **Default value:** `false` (left)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |