Add month view events calendar example with Vega data shaping

[Copilot]

🔗 https://microsoft.github.io/chartifact/view/?load=https://raw.githubusercontent.com/microsoft/chartifact/[COMMIT_HASH]/packages/web-deploy/json/month-calendar.idoc.json

Original prompt

Create a month view events calendar. Use treebark to make an html table, each day cell may have multiple items. Shape the data as in this conversation: https://chatgpt.com/share/68f2eed4-cef8-8007-adff-9161f8ea5020

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[danmarshall]

@copilot QQ: If this repo contained an MCP server, would you be able to use it in your agent context?

[Copilot]

@copilot QQ: If this repo contained an MCP server, would you be able to use it in your agent context?

Yes, I can use MCP servers that are available in my context. I already have access to several MCP servers including the github-mcp-server which I use to interact with GitHub repositories. If this repo contained an MCP server definition (e.g., in a configuration file or as a tool), I could potentially use it depending on how it's set up and what capabilities it exposes.

[danmarshall]

@copilot nice start. can you add some tabulators so we can see whats going on. See the "movie picker basic" for an example of using multiple tabulators to inspect a flow,

[Copilot]

@copilot nice start. can you add some tabulators so we can see whats going on. See the "movie picker basic" for an example of using multiple tabulators to inspect a flow,

Added tabulators to show the data transformation pipeline at each step (commit TBD). The calendar now includes 5 inspection steps showing:

1. Raw events data (flat list)
2. Events grouped by date (aggregated arrays)
3. All days of month (sequence-generated)
4. Days with events joined (lookup result)
5. Padded calendar grid (final 42 cells)

Each step displays a tabulator table so you can see exactly how the data is shaped from a flat event list into the 7-column calendar structure.

[danmarshall]

@copilot Error
Invalid interactive document

Please fix the following errors: - Tabulator element must have a dataSourceName property - Tabulator variableId eventsGrouped collides with existing variable name, the variable should be renamed or removed. - Tabulator element must have a dataSourceName property - Tabulator variableId allDaysOfMonth collides with existing variable name, the variable should be renamed or removed. - Tabulator element must have a dataSourceName property - Tabulator variableId daysWithEvents collides with existing variable name, the variable should be renamed or removed. - Tabulator element must have a dataSourceName property - Tabulator variableId paddedDays collides with existing variable name, the variable should be renamed or removed.

[Copilot]

@copilot Error
Invalid interactive document

...

Fixed in commit that changed all tabulator elements from variableId to dataSourceName. The schema requires tabulators to use dataSourceName for their input data source, not variableId.

[danmarshall]

@copilot can you provide a link to the fixed doc?

[Copilot]

@copilot can you provide a link to the fixed doc?

Here's the link to the fixed calendar with working tabulators:

https://microsoft.github.io/chartifact/view/?load=https://raw.githubusercontent.com/microsoft/chartifact/6372f51830754aeb5be0c618fe88325de21a170f/packages/web-deploy/json/month-calendar.idoc.json

The document now has 5 tabulator views showing the data transformation pipeline from raw events to the final calendar grid.

[danmarshall]

@copilot good start with tables! I can see tables 1 and 2. 3 is where theres a breakdown:

[Copilot]

@copilot now whole page is empty, console has a Vega error: Error: Undefined data set name: "daysWithEvents"

Fixed the data source error. The issue was that paddedDays was trying to use eventsRaw but still had a lookup depending on daysWithEvents. Restored the correct data source.

https://microsoft.github.io/chartifact/view/?load=https://raw.githubusercontent.com/microsoft/chartifact/d82030a/packages/web-deploy/json/month-calendar.idoc.json

Commit: d82030a

[danmarshall]

@copilot Ok all NaNs are gone and all tables have stuff! Lets make a copy of this for a backup and then keep going. So the last table has numbers only but not our events. And we need to rewrite the treebark now

[Copilot]

@copilot Ok all NaNs are gone and all tables have stuff! Lets make a copy of this for a backup and then keep going. So the last table has numbers only but not our events. And we need to rewrite the tr...

Created backup and updated the Treebark template to use calendarWeeks pivoted data. The template now properly iterates over week rows and displays day numbers in a 7-column grid structure.

Next: Need to add event rendering back to each cell with the formatted event data.

https://microsoft.github.io/chartifact/view/?load=https://raw.githubusercontent.com/microsoft/chartifact/[COMMIT_HASH]/packages/web-deploy/json/month-calendar.idoc.json

Commit: [PENDING]

[danmarshall]

@copilot Link says commit pending

[Copilot]

@copilot Link says commit pending

Here's the current working link:

https://microsoft.github.io/chartifact/view/?load=https://raw.githubusercontent.com/microsoft/chartifact/1f9ef92/packages/web-deploy/json/month-calendar.idoc.json

Commit: 1f9ef92

The calendar now displays day numbers in a proper 7-column grid. The backup file has been created at month-calendar-backup.idoc.json.

[danmarshall]

@copilot heres example treebark for a simple calendar:

{
  "table": {
    "class": "calendar-table",
    "$children": [
      {
        "thead": [
          {
            "tr": [
              {
                "th": "Sun"
              },
              {
                "th": "Mon"
              },
              {
                "th": "Tue"
              },
              {
                "th": "Wed"
              },
              {
                "th": "Thu"
              },
              {
                "th": "Fri"
              },
              {
                "th": "Sat"
              }
            ]
          }
        ]
      },
      {
        "tbody": {
          "$bind": ".",
          "$children": [
            {
              "tr": [
                {
                  "td": "{{sun}}"
                },
                {
                  "td": "{{mon}}"
                },
                {
                  "td": "{{tue}}"
                },
                {
                  "td": "{{wed}}"
                },
                {
                  "td": "{{thu}}"
                },
                {
                  "td": "{{fri}}"
                },
                {
                  "td": "{{sat}}"
                }
              ]
            }
          ]
        }
      }
    ]
  }
}

This example works for this data:

[
  {
    "rowId": 1,
    "sun": "",
    "mon": "",
    "tue": 1,
    "wed": 2,
    "thu": 3,
    "fri": 4,
    "sat": 5
  },
  {
    "rowId": 2,
    "sun": 6,
    "mon": 7,
    "tue": 8,
    "wed": 9,
    "thu": 10,
    "fri": 11,
    "sat": 12
  },
  {
    "rowId": 3,
    "sun": 13,
    "mon": 14,
    "tue": 15,
    "wed": 16,
    "thu": 17,
    "fri": 18,
    "sat": 19
  },
  {
    "rowId": 4,
    "sun": 20,
    "mon": 21,
    "tue": 22,
    "wed": 23,
    "thu": 24,
    "fri": 25,
    "sat": 26
  },
  {
    "rowId": 5,
    "sun": 27,
    "mon": 28,
    "tue": 29,
    "wed": 30,
    "thu": 31,
    "fri": "",
    "sat": ""
  }
]

[Copilot]

@copilot heres example treebark for a simple calendar:

{

...

Updated the calendar to use the simplified treebark pattern you provided. Changed the data to use lowercase day-of-week properties (sun, mon, tue, wed, thu, fri, sat) and simplified the template to directly reference them.

https://microsoft.github.io/chartifact/view/?load=https://raw.githubusercontent.com/microsoft/chartifact/8ce9c56/packages/web-deploy/json/month-calendar.idoc.json

Commit: 8ce9c56

[danmarshall]

@copilot i think in step 3 we need to have the sequence start one week earlier and end one week later. Then add some formula columns for the day of week to get Sunday -Saturday.

[Copilot]

@copilot i think in step 3 we need to have the sequence start one week earlier and end one week later. Then add some formula columns for the day of week to get Sunday -Saturday.

Modified Step 3 to start the sequence one week earlier (-7) and end one week later (39), generating ~45 days total. Added formulas for day-of-week names (sun-sat) and an isCurrentMonth flag to distinguish padding days.

https://microsoft.github.io/chartifact/view/?load=https://raw.githubusercontent.com/microsoft/chartifact/bde9e5e/packages/web-deploy/json/month-calendar.idoc.json

Commit: bde9e5e

[danmarshall]

@copilot Good. Step 3 has one invalid row that has a count property, but looks good otherwise and so does step 4: i can see the empty days and days with events and multiple events. Our current step 4b doesnt show these, so lets drop it and step 5, and create a new step 5 that pivots step 4 into days of week so that we have 7 columns.

[danmarshall]

@copilot I added a simple working example: packages/web-deploy/json/month-calendar-core.idoc.json - perhaps you can start with this, and fold in your events with a lookup