### Install MMM-CalendarExt3 Module

Source: https://github.com/mmrize/mmm-calendarext3/blob/main/README.md

Provides the necessary shell commands to install the MMM-CalendarExt3 module into a MagicMirror environment. This involves cloning the repository, installing Node.js dependencies, and initializing Git submodules.

```sh
cd ~/MagicMirror/modules
git clone https://github.com/MMRIZE/MMM-CalendarExt3
cd MMM-CalendarExt3
npm install
git submodule update --init --recursive
```

--------------------------------

### Preprocess Raw Event Data (preProcessor)

Source: https://github.com/mmrize/mmm-calendarext3/blob/main/README.md

Explains the use of the `preProcessor` function for early manipulation of raw event data. This example demonstrates two actions: dropping events with 'test' in their title and adding 2 hours to the start time of events from a specific calendar, making adjustments before the main module logic processes them.

```javascript
preProcessor: (ev) => {
  if (ev.title.includes('test')) return null
  if (ev.calendarName === 'Specific calendar') ev.startDate += 2 * 60 * 60 * 1000
  return ev
}
```

--------------------------------

### Basic MMM-CalendarExt3 Module Configuration

Source: https://github.com/mmrize/mmm-calendarext3/blob/main/README.md

Demonstrates the simplest valid configuration for MMM-CalendarExt3 within MagicMirror's `config.js`. This minimal setup enables the module at a specified position.

```js
{
  module: "MMM-CalendarExt3",
  position: "bottom_bar",
},
```

--------------------------------

### Fix MMM-CalendarExt3 Submodule Issues

Source: https://github.com/mmrize/mmm-calendarext3/blob/main/README.md

A troubleshooting command to re-initialize and update Git submodules for MMM-CalendarExt3. This is useful if installation or updates encounter submodule-related errors.

```sh
cd ~/MagicMirror/modules/MMM-CalendarExt3
git submodule update --init --recursive
```

--------------------------------

### Update MMM-CalendarExt3 Module

Source: https://github.com/mmrize/mmm-calendarext3/blob/main/README.md

Outlines the shell commands to update an existing MMM-CalendarExt3 installation. It fetches the latest changes from the repository and updates Node.js packages.

```sh
cd ~/MagicMirror/modules/MMM-CalendarExt3
git pull
npm update
```

--------------------------------

### Transform Weather Payload (weatherPayload)

Source: https://github.com/mmrize/mmm-calendarext3/blob/main/README.md

Provides an example of transforming an incoming weather payload using the `weatherPayload` function. This specific example converts Celsius temperatures (maxTemperature, minTemperature) in the `forecastArray` to Fahrenheit, useful for ensuring compatibility with the module's expectations.

```javascript
weatherPayload: (payload) => {
  if (Array.isArray(payload?.forecastArray)) {
    payload.forecastArray = payload.forecastArray.map((f) => {
      f.maxTemperature = Math.round(f.maxTemperature * 9 / 5 + 32)
      f.minTemperature = Math.round(f.minTemperature * 9 / 5 + 32)
      return f
    })
  }
  return payload
},
```

--------------------------------

### MagicMirror Default Calendar Module Configuration

Source: https://github.com/mmrize/mmm-calendarext3/blob/main/README.md

Provides an example configuration for the essential MagicMirror `calendar` module, which MMM-CalendarExt3 relies on for event data. Key settings include `broadcastPastEvents` for historical event visibility and defining individual calendar sources with names and colors.

```js
/* default/calendar module configuration */
{
  module: "calendar",
  position: "top_left",
  config: {
    broadcastPastEvents: true, // <= IMPORTANT to see past events
    calendars: [
      {
        url: "webcal://www.calendarlabs.com/ical-calendar/ics/76/US_Holidays.ics",
        name: "us_holiday", // <= RECOMMENDED to assign name
        color: "red" // <= RECOMMENDED to assign color
      },
      ...


```

--------------------------------

### Send CX3_GET_CONFIG Notification

Source: https://github.com/mmrize/mmm-calendarext3/blob/main/README.md

Example of sending the `CX3_GET_CONFIG` notification to retrieve current configuration properties of the MMM-CalendarExt3 module. This notification includes an optional `instanceId` to target a specific module instance and a `callback` function to process the retrieved configuration.

```JavaScript
this.sendNotification('CX3_GET_CONFIG', {
  instanceId: 'OFFICE_CALENDAR', // If you have only one instance of this module, you don't need to describe it.
  callback: (current) => {
    console.log(current.mode, current.monthIndex)
  }
})
```

--------------------------------

### Send CX3_SET_CONFIG Notification

Source: https://github.com/mmrize/mmm-calendarext3/blob/main/README.md

Example of sending the `CX3_SET_CONFIG` notification to update or merge new configuration properties into the current view of the MMM-CalendarExt3 module. Any properties not explicitly mentioned in the payload will be inherited from the current view's configuration.

```JavaScript
this.sendNotification('CX3_SET_CONFIG', {
  referenceDate: "2024-12-25",
  mode: "week",
  weekIndex: 0,
  weeksInView: 1,
  calendarSet: ["work", "family"],
})
```

--------------------------------

### Sort Calendar Events (eventSorter)

Source: https://github.com/mmrize/mmm-calendarext3/blob/main/README.md

Illustrates how to sort calendar events using the `eventSorter` function. This example sorts events based on their `calendarSeq` property, which corresponds to the order defined in `calendarSet`.

```javascript
eventSorter: (a, b) => {
  return a.calendarSeq - b.calendarSeq
}
```

--------------------------------

### CX3_RESET Notification Example with Dynamic Glancing

Source: https://github.com/mmrize/mmm-calendarext3/blob/main/README.md

This JavaScript snippet demonstrates how to use the `CX3_RESET` notification in conjunction with `CX3_GET_CONFIG` and `CX3_SET_CONFIG` to dynamically adjust the calendar view. It specifically shows how to advance the month index and then reset the view after a delay, illustrating a dynamic glancing effect for the next month.

```js
this.sendNotification('CX3_GET_CONFIG', {
  callback: (before) => {
    this.sendNotification('CX3_SET_CONFIG', {
      monthIndex: before.monthIndex + 1,
      callback: (after) => {
        setTimeout(() => { this.sendNotification('CX3_RESET') }, 10_000)
      }
    })
  }
})
```

--------------------------------

### Filter Calendar Events (eventFilter)

Source: https://github.com/mmrize/mmm-calendarext3/blob/main/README.md

Demonstrates how to filter calendar events using the `eventFilter` function. This example shows how to exclude full-day events from being displayed by returning `false` for events where `isFullday` is true.

```javascript
eventFilter: (ev) => {
  if (ev.isFullday) return false
  return true
}
```

--------------------------------

### Transform Calendar Events (eventTransformer)

Source: https://github.com/mmrize/mmm-calendarext3/blob/main/README.md

Shows how to manipulate or change properties of an event object using the `eventTransformer` function. This example changes the color of an event to 'blue' if its title contains 'John'.

```javascript
eventTransformer: (ev) => {
  if (ev.title.search('John') > -1) ev.color = 'blue'
  return ev
}
```

--------------------------------

### CSS Styling Based on Dynamic Event Line Count

Source: https://github.com/mmrize/mmm-calendarext3/blob/main/README.md

This CSS rule provides an example of how to apply specific styles to the calendar module based on the `data-max-event-lines` attribute present in its HTML container. It allows for responsive design adjustments, such as font size changes, when the number of displayed event lines varies.

```css
.CX3[data-max-event-lines="6"] {
  font-size: calc(var(--font-size) * 0.9); /* This is just a sample. The real applying would be more complex. */
  ...
}
```

--------------------------------

### Configure Iconify and Font Awesome Icons in Calendar Module

Source: https://github.com/mmrize/mmm-calendarext3/blob/main/README.md

This JavaScript configuration snippet illustrates how to enable and use Iconify icons alongside traditional Font Awesome icons within a calendar module. It highlights the crucial `defaultSymbolClassName: ''` setting required for proper Iconify identification and provides examples of both Iconify (`flag:us-4x3`) and Font Awesome (`fa fa-fw fa-flag`) symbol definitions.

```js
// In your calendar module config
defaultSymbolClassName: '', // <-- Important to identify iconify properly.
calendars: [
  {
    color: "red",
    symbol: "flag:us-4x3",
    url: "https://ics.calendarlabs.com/76/mm3137/US_Holidays.ics"
  },
  {
    color: "red",
    symbol: "fa fa-fw fa-flag",
    url: "https://ics.calendarlabs.com/76/mm3137/US_Holidays.ics"
  }
],
```

--------------------------------

### Configure Custom Calendar Header (customHeader)

Source: https://github.com/mmrize/mmm-calendarext3/blob/main/README.md

Details the `customHeader` configuration option for a calendar module, allowing customization of the module's header. It supports boolean values for default behaviors and a callback function for advanced custom rendering, providing parameters like configuration, calendar start, and end dates.

```APIDOC
customHeader:
  type: boolean | function
  description: Configures the display of the module's header.
  since: 1.9.0
  values:
    - false:
        description: Default behavior. If module header is undefined or an empty text, the module header will have the name of the month (or defined as `headerTitleOptions`) in `mode: month` view. In other modes, nothing will be shown. If the module's header has some text, that text will be shown as a header title.
    - true:
        description: Regardless of the module header, a new section to display title of the view above the week day header will be shown. Uses `headerTitleOptions`.
        headerTitleOptions:
          description: Options for date format, compatible with `Intl.DateTimeFormat`.
          examples:
            - mode: "month", options: "{ month: \"long\" }" -> "October"
            - mode: "day" | "week", options: "{ year: \"numeric\", month: \"short\", day: \"numeric\" }" -> "2.-15. Oct. 2024"
          reference: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters"
    - function(config, beginOfCalendar, endOfCalendar):
        description: A custom callback function to generate the header.
        parameters:
          - name: config
            type: Object
            description: Current active configuration object of the view.
          - name: beginOfCalendar
            type: Date Object
            description: The date object of the beginning of the current calendar view.
          - name: endOfCalendar
            type: Date Object
            description: The date object of the end of the current calendar view.
        returns:
          type: Text | HTML
          description: The content to be shown as the header.
        notes: The generated header will be an `<h1 class="headerTitle">...</h1>` element, allowing CSS styling.
```

--------------------------------

### Calendar Event Object Structure

Source: https://github.com/mmrize/mmm-calendarext3/blob/main/README.md

Defines the structure of an event object used within the calendar module. It includes properties such as title, start and end dates (timestamps), full-day status, class, location, description, and various flags indicating event state like `isPassed`, `isCurrent`, `isFullday`, and `skip` for rendering control.

```json
{
  "title": "Leeds United - Chelsea",
  "startDate": 1650193200000,
  "endDate": 1650199500000,
  "fullDayEvent": false,
  "class": "PUBLIC",
  "location": false,
  "geo": false,
  "description": "...",
  "today": false,
  "symbol": ["calendar-alt"],
  "calendarName": "tottenham",
  "color": "gold",
  "calendarSeq": 1, // This would be the order from `calendarSet` of configuration
  "isPassed": true,
  "isCurrent": false,
  "isFuture": false,
  "isFullday": false,
  "isMultiday": false,
  "skip": false, // If this is set, event will not be rendered. (since 1.7.0)
  "noMarquee" : false  // If this is set as true, too long event tilte will be rolling.
}
```

--------------------------------

### Define Calendar Display Range with Reference Date and Index

Source: https://github.com/mmrize/mmm-calendarext3/blob/main/README.md

This JavaScript configuration example shows how to control the displayed period of a calendar view using `mode`, `referenceDate`, and `monthIndex`. It sets the calendar to 'month' mode, anchors it to a specific date, and adjusts the displayed month relative to that reference, demonstrating how to show a past month.

```js
mode: "month",
referenceDate: "2024-12-25",
monthIndex: -1,
```

--------------------------------

### Advanced MMM-CalendarExt3 Module Configuration

Source: https://github.com/mmrize/mmm-calendarext3/blob/main/README.md

Illustrates a more comprehensive configuration for MMM-CalendarExt3, showcasing various customizable options. It includes settings for display mode, instance identification, locale, maximum event lines, and calendar set filtering.

```js
{
  module: "MMM-CalendarExt3",
  position: "bottom_bar",
  title: "",
  config: {
    mode: "month",
    instanceId: "basicCalendar",
    locale: 'de-DE',
    maxEventLines: 5,
    firstDayOfWeek: 1,
    calendarSet: ['us_holiday', 'abfall', 'mytest'],
    ...
  }
},
```

--------------------------------

### Calendar Extension Module Configuration Properties

Source: https://github.com/mmrize/mmm-calendarext3/blob/main/README.md

Defines the various properties available for configuring the calendar extension module, including display settings, date navigation, event handling, and integration with external data sources like weather.

```APIDOC
CalendarExtensionConfig:
  mode: string = 'week'
    description: Calendar view type. You can choose between 'week', 'month', 'day'.
  referenceDate: string | null = null
    description: If null, the reference moment would be now (today, this week, this month).
      Or you can assign any valid ISO-8601/RFC-2822 (limited) date and time format.
      (e.g.) "2024-12-25", "2024-10-10T14:48:00.000+09:00" or "01 Jun 2016" (some browser may not support this RFC-2822 format).
  monthIndex: number = 0
    description: Which month starts in a 'month' view. -1 is the previous month of the current focusing moment.
      0 is the focusing month of the moment. 1 will be the next month, and so on.
      Ignored on mode:'week' and mode:'day'.
  weekIndex: number = -1
    description: Which week starts in a 'week' view. -1 is the previous week of the current focusing moment.
      0 is the focusing week of the moment. 1 will be the next week, and so on.
      Ignored on mode:'month' and mode:'week'.
  dayIndex: number = -1
    description: Which day starts in a 'day' view. -1 is the previous day of the current focusing moment,
      0 is the focusing day of the moment. 1 will be the next day, and so on.
      Ignored on mode:'month' and mode:'week'.
  weeksInView: number = 3
    description: How many weeks from the index.
      weekIndex:-1, weeksInView:3 means 3 weeks view from the last week.
      Ignored on mode:'month'.
  instanceId: string = (auto-generated)
    description: When you want more than 1 instance of this module, each instance would need this value to distinguish each other.
      If you don't assign this property, the identifier of the module instance will be assigned automatically but not recommended to use it.
      (Hard to guess the auto-assigned value.)
  locale: string = (language of MM config)
    description: 'de' or 'ko-KR' or 'ja-Jpan-JP-u-ca-japanese-hc-h12'.
      It defines how to handle and display your date-time values by the locale.
      When omitted, the default 'language' config value of MM.
  calendarSet: string[] = []
    description: When you want to display only selected calendars, fulfil this array with the targeted calendar name (of the default 'calendar' module).
      e.g) calendarSet: ['us_holiday', 'office'],
      [] or null will allow all the calendars.
  fontSize: string = '18px'
    description: Default font size of this module.
  eventHeight: string = '22px'
    description: The height of each event.
  cellDateOptions: object = {month: 'short', day: 'numeric'}
    description: The format of day cell date. It varies by the 'locale' and this option.
      locale:'en-US', the default displaying will be 'Jun 1' or '1'.
      See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters
  eventTimeOptions: object = {timeStyle: 'short'}
    description: The format of event time. It varies by the 'locale' and this option.
      locale:'en-US', the default displaying will be '3:45 pm'.
      See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters
  headerWeekDayOptions: object = {weekday: 'long'}
    description: The format of weekday header. It varies by the 'locale' and this option.
      locale:'en-US', the default displaying will be 'Tuesday'.
      See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters
  eventFilter: function = callback function
    description: See the 'Filtering' part.
  eventSorter: function = callback function
    description: See the 'Sorting' part.
  eventTransformer: function = callback function
    description: See the 'Transforming' part.
  waitFetch: number = 5000
    description: (ms) waiting the fetching of last calendar to prevent flickering view by too frequent fetching.
  refreshInterval: number = 1800000
    description: (ms) refresh view by force if you need it.
  animationSpeed: number = 1000
    description: (ms) Refreshing the view smoothly.
  useSymbol: boolean = true
    description: Whether to show font-awesome symbol instead of simple dot icon.
  displayLegend: boolean = false
    description: If you set as true, legend will be displayed. (Only the calendar which has name assigned)
  eventNotification: string = 'CALENDAR_EVENTS'
    description: A carrier notification of event source.
  eventPayload: function = callback function
    description: A converter for event payload before using it.
  useWeather: boolean = true
    description: Whether to show forecasted weather information of default weather module.
  weatherLocationName: string | null = null
    description: When you have multi forecasting instances of several locations, you can describe specific weather location to show.
  weatherNotification: string = 'WEATHER_UPDATED'
    description: A carrier notification of weather forecasting source.
  weatherPayload: function = callback function
    description: A converter for weather forecasting payload before using it.
  displayWeatherTemp: boolean = false
    description: If you want to show the temperature of the forecasting, set this to 'true'.
  preProcessor: function = callback function
    description: See the 'preProcessing' part.
  manipulateDateCell: function = callback function
    description: See the 'manipulating dateCell' part.
```

--------------------------------

### MMM-CalendarExt3 Configuration Properties

Source: https://github.com/mmrize/mmm-calendarext3/blob/main/README.md

Detailed description of configurable properties for the MMM-CalendarExt3 module, including their types, default values, and purpose. These properties control various aspects of the calendar's display and behavior.

```APIDOC
displayEndTime:
  type: boolean
  default: false
  description: If set to true, displays the end time of the event.
popoverTemplate:
  type: string
  default: './popover.html'
  description: Path to the template for the event popover. Usually not needed.
popoverPeriodOptions:
  type: object
  default: {timeStyle: 'short', dateStyle: 'short'}
  description: The format of the period of event time on popover displayed. Varies by locale and period.
  link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters
popoverTimeout:
  type: number
  unit: ms
  default: 30000
  description: Timeout for popover dismissal. The popover has 'light dismiss' functionality. Setting to 0 will prevent automatic dismissal unless another popover is activated or dismissed manually.
animateIn:
  type: string
  default: 'fadeIn'
  description: Animation effect for refresh (Since MM 2.25).
animateOut:
  type: string
  default: 'fadeOut'
  description: Animation effect for refresh (Since MM 2.25).
skipPassedEventToday:
  type: boolean
  default: false
  description: If true, passed single-day events (not full-day, not multi-day) of today will be hidden to save screen space. Applies only for today.
showMore:
  type: boolean
  default: true
  description: If true, displays the number of overflowed events and allows popover of whole day event list by click/touch.
useIconify:
  type: boolean
  default: false
  description: If true, allows using `iconify-icon` instead of `fontawesome`.
weekends:
  type: array
  items: number (day order)
  default: auto-filled by locale
  description: Array of day orders representing weekends (e.g., [1, 3] for Monday and Wednesday). Auto-filled by locale unless manually set.
firstDayOfWeek:
  type: number
  default: auto-filled by locale
  description: Sets the first day of the week (0 for Sunday, 1 for Monday, etc.). Auto-filled by locale unless manually set.
minimalDaysOfNewYear:
  type: number
  default: auto-filled by locale
  description: Defines how the first week of the year is determined (e.g., 1 for US system containing Jan 1st). Auto-filled by locale unless manually set.
useMarquee:
  type: boolean
  default: false
  description: If true, event titles that are too long will have a marquee animation.
skipDuplicated:
  type: boolean
  default: true
  description: If true, duplicated events (same title, same start/end) from any calendars will be skipped except one.
customHeader:
  type: boolean
  default: false
  description: See customHeader section for details.
headerTitleOptions:
  type: object
  default: {month: 'long'}
  description: Format of the header of the view. Varies by locale and this option (e.g., 'December' for 'en-US'). (Since 1.9.0, behavior changed).
maxEventLines:
  type: number | array | object
  default: 5
  description: How many events will be displayed in a 1-day cell. Overflowed events will be hidden. Can be an array or object for dynamic event lines (Since 1.9.0).
```

--------------------------------

### Configure Weather Display for MMM-CalendarExt3

Source: https://github.com/mmrize/mmm-calendarext3/blob/main/README.md

This configuration snippet enables the weather display feature within the MMM-CalendarExt3 module and specifies the location for weather forecasts. It notes that partial location names are acceptable but warns about console messages if no match is found.

```javascript
useWeather: true,
weatherLocationName: 'New York',
// Original weather module might have its location name with more details. (e.g. 'New York City, US'), but the partial text included would be acceptable for this attribute.
// When the location name would not match, warning messgage will be shown on dev console. Check it.
```

--------------------------------

### WEATHER_UPDATED Notification API Reference

Source: https://github.com/mmrize/mmm-calendarext3/blob/main/README.md

Documents the `WEATHER_UPDATED` notification, which provides weather forecasting data. Any module emitting this notification can be a source, with the default `weather` module being the typical provider.

```APIDOC
WEATHER_UPDATED:
  description: Notification for weather forecasting data. Any module emitting this can be a source, typically the default 'weather' module.
```

--------------------------------

### CALENDAR_EVENTS Notification API Reference

Source: https://github.com/mmrize/mmm-calendarext3/blob/main/README.md

Documents the `CALENDAR_EVENTS` notification, which serves as a source for calendar event data. Any module emitting this notification can provide event data, with the default `calendar` module being the typical source.

```APIDOC
CALENDAR_EVENTS:
  description: Notification for calendar event data. Any module emitting this can be a source, typically the default 'calendar' module.
```

--------------------------------

### HTML Structure for Dynamic Event Line Adjustment

Source: https://github.com/mmrize/mmm-calendarext3/blob/main/README.md

This HTML snippet demonstrates how the calendar module's main container includes data attributes (`data-mode`, `data-max-event-lines`) to expose current view information. These attributes can be leveraged by CSS for dynamic styling adjustments based on the number of event lines displayed.

```html
<div class="CX3 ..." data-mode="week" data-max-event-lines="3" ...>
```

--------------------------------

### Deprecated MMM-CalendarExt3 Incoming Notifications

Source: https://github.com/mmrize/mmm-calendarext3/blob/main/README.md

List of deprecated incoming notifications for the MMM-CalendarExt3 module, indicating their payloads. These notifications have been superseded by newer mechanisms since version 1.8.0.

```APIDOC
CX3_MOVE_CALENDAR:
  payload: {instanceId, step}
CX3_GLANCE_CALENDAR:
  payload: {instanceId, step}
CX3_SET_DATE:
  payload: {instanceId, date}
```

--------------------------------

### Base CSS Variables for MMM-CalendarExt3 Styling

Source: https://github.com/mmrize/mmm-calendarext3/blob/main/README.md

This CSS snippet defines custom properties (CSS variables) within the `.CX3` selector, which is the root selector for the MMM-CalendarExt3 module. These variables control fundamental visual aspects like cell colors, header/footer heights, default text color, event height, and font size, allowing for module-wide styling adjustments.

```css
.CX3 {
  /* you CAN modify these values; but SHOULD NOT to remove */
  --celllinecolor: #333;
  --cellbgcolor: rgba(0, 0, 0, 0.2);
  --cellheaderheight: 25px;
  --cellfooterheight: 2px;
  --defaultcolor: #FFF;
  --eventheight: calc(var(--fontsize) + 4px);
  --totalheight: calc(var(--eventheight) * var(--maxeventlines));
  font-size: var(--fontsize);
  color: var(--defaultcolor);
  line-height: calc(var(--eventheight))
}
```

--------------------------------

### CX3_RESET Notification API Reference

Source: https://github.com/mmrize/mmm-calendarext3/blob/main/README.md

Documents the `CX3_RESET` notification, which is used to reset the calendar view to its original configuration values. It accepts an optional payload for a callback function and an instance ID.

```APIDOC
CX3_RESET:
  payload:
    callback: Function (optional) - A function to be executed after the reset.
    instanceId: string (optional) - The ID of the specific module instance to reset.
  description: Reset the view with the original config values.
```

--------------------------------

### CX3_DOM_UPDATED Outgoing Notification API Reference

Source: https://github.com/mmrize/mmm-calendarext3/blob/main/README.md

Documents the `CX3_DOM_UPDATED` notification, which is broadcasted by the module when its DOM (Document Object Model) has been re-rendered. It includes the instance ID in its payload.

```APIDOC
CX3_DOM_UPDATED:
  payload:
    instanceId: string - The ID of the module instance whose DOM was re-rendered.
  description: This notification is broadcasted when the DOM of this module is re-rendered.
```

--------------------------------

### MMM-CalendarExt3 Outgoing Notification

Source: https://github.com/mmrize/mmm-calendarext3/blob/main/README.md

Details an outgoing notification emitted by the MMM-CalendarExt3 module. This notification signals that the DOM has been updated for a specific instance of the module, providing its instance ID.

```APIDOC
Notification: CX3_DOM_UPDATED
  Payload:
    instanceId: string
  Description: Emitted when the DOM of a CalendarExt3 instance has been updated.
```

--------------------------------

### Customize Calendar Date Cells with JavaScript

Source: https://github.com/mmrize/mmm-calendarext3/blob/main/README.md

This JavaScript function demonstrates how to dynamically modify the DOM of a calendar date cell based on associated events. It checks for specific events (e.g., 'Holidays') and inserts an icon into the cell header. The function takes the cell's DOM element and its events as input, allowing for visual customization without returning any value.

```js
manipulateDateCell: (cellDom, events) => {
  if (Array.isArray(events) && events.some(e => e.calendarName === 'Holidays')) {
    let dateIcon = document.createElement('span')
    dateIcon.classList.add('fa', 'fa-fas', 'fa-fw', 'fa-gift')
    let header = cellDom.querySelector('.cellHeader')
    let celldate = header.querySelector('.cellDate')
    header.insertBefore(dateIcon, celldate)
    // you don't need to return anything.
  }
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.