Merge and Filter Calendar Events

This guide explains how to merge calendar events from multiple sources (e.g., Google Calendar and Microsoft Calendar) and display them in a single Table Widget using datasource mappers and mock datasource logic.

Goal

Combine two separate calendar datasources into one unified event list, and display that list in a Table Widget using a mock datasource.

Overview

1. Set up mappers for each calendar datasource.
2. Enable periodic refresh.
3. Pass mapped results into a logic batch.
4. Use a Call Function action to merge arrays.
5. Overwrite a mock datasource with the merged data.
6. Display results in a Table Widget.

Step-by-Step

Open the Target Content

• Navigate to your Content.
• Open the Properties tab.
• Scroll to the Data Binding section.

Configure Mappers

• Click Edit Datasource Mappers.
• Enable Recalculate Periodically to keep data fresh.
• Create two new mappers:
  • Use preset: Calendar today events.
  • Set Source Type to Datasource.
  • Select the relevant calendar (e.g., one for Google and one for Microsoft).
• Output remains customFields.todayEvents.

These mappers normalize your calendar data into a consistent structure.

Learn more: Datasource mappers

Set Up Mock Datasource

• Still in the Data Binding section, click Base data path and click Edit Mock Datasource.
• Create a new mock datasource (e.g., MagicEventsArray) with test JSON. (Replace the date with the current date)

{
    "mergedEvents": [
        {
            "id": "art-20250616-003",
            "status": "draft",
            "created": "2025-06-16T09:00:00.000Z",
            "updated": "2025-06-16T09:00:00.000Z",
            "title": "Combining and Filtering Calendar Events in JavaScript",
            "description": "A detailed guide on merging multiple calendar feeds and filtering events by date range using modern JavaScript patterns.",
            "organizer": {
                "name": "Alex Rivera",
                "email": "alex.rivera@example.com"
            },
            "location": null,
            "isStarted": null,
            "startedBy": null,
            "start": {
                "dateTime": "2025-06-16T09:00:00Z",
                "timeStamp": 1750054800000
            },
            "end": {
                "dateTime": "2025-06-16T09:00:00Z",
                "timeStamp": 1750054800000
            },
            "visibility": null,
            "attachments": null,
            "hasAttachments": null,
            "attendees": []
        }
    ]
}

• This mock will hold your merged result.

Add External Event to Trigger Merge

• Go to External Events > Edit Page Change Events.
• Add a PageStart trigger.
• Create an Execute Action Batch.

Send Mapped Data via Sent Fields

Inside the Execute Action Batch:

• Add two Sent Fields of type Data Field.
• Select the mapped paths:
  • Google Calendar > customFields > todayEvents
  • Microsoft Calendar > customFields > todayEvents

These hold the events you want to merge.

Merge Using Call Function

Create a nested batch:

• Inside the previous Execute Action Batch, add a new Execute Action Batch
• Add Sent Fields of type Call Function
• Use a simple JS merge script like:

(receivedValue) => {
    const googleEvents = Object.values(receivedValue.googleTodayEvents);
    const msEvents = Object.values(receivedValue.msTodayEvents);
    const allEvents = [...googleEvents, ...msEvents];

    return allEvents.sort((a, b) => new Date(a.start.timeStamp) - new Date(b.start.timeStamp));
}

Overwrite the Mock Datasource

Inside the previous Execute Action Batch, add a new Change Data Source

• Datasource: Your mock datasource (e.g., MagicEventsArray)
• Special: Overwrite
• Value Origin: Received Value

This action replaces the contents of the mock datasource with the merged result from the previous Call Function. This ensures that your widget or any downstream logic always works with the most up-to-date and unified event data.

Display Events in a Table Widget

To show the merged events:

1. Add a Table Widget to your content.
2. Open its settings and bind the Data Source to your mock key (e.g., MagicEventsArray).
3. Configure the column fields to display event data such as title, start, end, etc.

Now, your widget will display events from both calendar sources as one unified list once it is played from a device or preview.

Note

Note: In preview mode, you must open the preview in an incognito window due to security restrictions.

Tip!

To ensure the merged data stays up to date at runtime, you can:

• Set a Page Change Event with repeat interval to re-trigger the batch logic periodically.
• OR use Datasource Events to listen to changes in each individual calendar datasource and re-run the merge logic when changes are detected.

Summary

You now have a setup where:

• Multiple external datasources are normalized using mappers
• Logic merges the mapped event arrays into one
• The result is stored in a mock datasource
• A widget displays the unified event list in real-time

This is ideal for dashboards, event signage, or interactive calendars that need to consolidate events from multiple calendar systems (Google, Microsoft, etc.).