Skip to content

Add weekday column ordering, download functionality, and events calendar example #123

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 12 commits into
base: copilot/create-month-view-calendar
Choose a base branch
from
Draft

Add weekday column ordering, download functionality, and events calendar example #123

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
423f6c8
Initial plan
Copilot Oct 18, 2025
813b9cd
Add collect/sort transform to order weekday columns and enableDownloa…
Copilot Oct 18, 2025
205db58
Use numeric column names (0-6) for weekdays and add currentMonthDays …
Copilot Oct 18, 2025
ed72b9d
Remove aggregate from step3, delete steps 4 and 4b, update treebark t…
Copilot Oct 18, 2025
82587df
added working calendar core display
danmarshall Oct 20, 2025
bad0295
Create month-calendar-with-events.idoc.json based on core with events…
Copilot Oct 20, 2025
f6eadee
Fix event display in calendar - show event count and first event title
Copilot Oct 20, 2025
0c3768c
Add raw events data tabulator display
Copilot Oct 20, 2025
048dea4
Replace events with diverse set across all days of the week
Copilot Oct 20, 2025
14c2d9b
Fix treebark event display with proper string fields and span tags
Copilot Oct 20, 2025
9de3b00
Fix treebark template - remove $attr, add proper loop over eventTitle…
Copilot Oct 20, 2025
1c42ef3
Revert CSS changes and add eventsAsObjects step to combine event prop…
Copilot Oct 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/schema/idoc_v1.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,6 +248,7 @@ interface TabulatorElementProps extends OptionalVariableControl {
/** Name of the data source to use for incoming data (output data is available via the variableId of this table element) */
dataSourceName: string;
editable?: boolean;
enableDownload?: boolean;
/** Tabulator options (must be JSON stringify-able, so no callbacks allowed) */
tabulatorOptions?: object;
}
Expand Down
15 changes: 14 additions & 1 deletion packages/markdown/src/plugins/tabulator.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ export const tabulatorPlugin: Plugin<TabulatorSpec> = {

// Build all buttons in one HTML string
let buttonsHtml = '';
if (spec.editable || selectableRows) {
if (spec.editable || selectableRows || spec.enableDownload) {
buttonsHtml = '<div class="tabulator-buttons">';

if (spec.editable) {
Expand All @@ -101,6 +101,10 @@ export const tabulatorPlugin: Plugin<TabulatorSpec> = {
buttonsHtml += '<button type="button" class="tabulator-invert-selection">Invert Selection</button>';
}

if (spec.enableDownload) {
buttonsHtml += '<button type="button" class="tabulator-download-csv">Download CSV</button>';
}

buttonsHtml += '</div>';
}

Expand Down Expand Up @@ -275,6 +279,15 @@ export const tabulatorPlugin: Plugin<TabulatorSpec> = {
}
}

if (spec.enableDownload) {
const downloadBtn = container.querySelector('.tabulator-download-csv') as HTMLButtonElement;
if (downloadBtn) {
downloadBtn.onclick = () => {
table.download('csv', `${spec.dataSourceName}.csv`);
};
}
}

return {
...tabulatorInstance,
initialSignals,
Expand Down
282 changes: 282 additions & 0 deletions packages/web-deploy/json/month-calendar-core.idoc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,282 @@
{
"$schema": "../../../docs/schema/idoc_v1.json",
"title": "Month View Calendar",
"variables": [
{
"variableId": "selectedYear",
"type": "number",
"initialValue": 2025
},
{
"variableId": "selectedMonth",
"type": "number",
"initialValue": 2
},
{
"variableId": "calendarMonthList",
"type": "object",
"isArray": true,
"initialValue": [],
"calculation": {
"dataSourceNames": [],
"dataFrameTransformations": [
{
"type": "sequence",
"start": -7,
"stop": 38,
"as": "dayOffset"
},
{
"type": "formula",
"as": "selectedDate",
"expr": "datetime(selectedYear, selectedMonth - 1)"
},
{
"type": "formula",
"as": "date",
"expr": "timeOffset('day', datum.selectedDate, datum.dayOffset)"
},
{
"type": "formula",
"expr": "day(datum.selectedDate)",
"as": "firstWeekdayOffset"
},
{
"type": "formula",
"as": "dayOfMonth",
"expr": "date(datum.date)"
},
{
"type": "formula",
"as": "year",
"expr": "year(datum.date)"
},
{
"type": "formula",
"as": "weekday",
"expr": "day(datum.date)"
},
{
"type": "formula",
"as": "isSunday",
"expr": "datum.weekday === 0 ? 1 : 0"
},
{
"type": "window",
"ops": [
"sum"
],
"fields": [
"isSunday"
],
"as": [
"sundayCount"
],
"frame": [
null,
0
]
},
{
"type": "formula",
"as": "inCurrentMonth",
"expr": "month(datum.date) === selectedMonth - 1"
},
{
"type": "formula",
"as": "precedingWeek",
"expr": "datum.weekday - datum.firstWeekdayOffset > datum.dayOffset"
},
{
"type": "formula",
"as": "nextMonth",
"expr": "datum.dayOfMonth < 32 && datum.dayOffset > 0 && !datum.inCurrentMonth"
},
{
"type": "formula",
"expr": "datum.nextMonth && datum.weekday === 0",
"as": "succeedingSunday"
},
{
"type": "window",
"ops": [
"sum"
],
"fields": [
"succeedingSunday"
],
"as": [
"succeedingWeek"
],
"frame": [
null,
0
]
},
{
"type": "filter",
"expr": "!datum.precedingWeek"
},
{
"type": "filter",
"expr": "!datum.succeedingWeek"
}
]
}
},
{
"variableId": "calendarMonthByWeek",
"type": "object",
"isArray": true,
"initialValue": [],
"calculation": {
"dataSourceNames": [
"calendarMonthList"
],
"dataFrameTransformations": [
{
"type": "nest",
"keys": [
"sundayCount",
"weekday"
],
"generate": true
}
]
}
}
],
"groups": [
{
"groupId": "header",
"elements": [
"# \ud83d\udcc5 Month Calendar",
"",
"This example demonstrates how to shape data for a calendar view using Vega transforms. Scroll down to see each step of the data transformation pipeline.",
{
"type": "dropdown",
"variableId": "selectedMonth",
"label": "Month:",
"options": [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12"
]
},
{
"type": "dropdown",
"variableId": "selectedYear",
"label": "Year:",
"options": [
"2024",
"2025",
"2026"
]
}
]
},
{
"groupId": "step1",
"elements": [
"## Step 1: All Days of Calendar Surrounding the Selected Month",
"Using `sequence` transform to generate all days in the selected month (7 days before and 7 after, then filtered to show Sunday to Saturday).",
{
"type": "tabulator",
"dataSourceName": "calendarMonthList",
"tabulatorOptions": {
"autoColumns": true,
"layout": "fitColumns",
"maxHeight": "300px"
}
}
]
},
{
"groupId": "calendar",
"elements": [
"## Step 2: Calendar View (Treebark / HTML table)",
{
"type": "treebark",
"variableId": "calendarMonthByWeek",
"template": {
"div": [
{
"table": [
{
"thead": [
{
"tr": [
{
"th": "Sun"
},
{
"th": "Mon"
},
{
"th": "Tue"
},
{
"th": "Wed"
},
{
"th": "Thu"
},
{
"th": "Fri"
},
{
"th": "Sat"
}
]
}
]
},
{
"tbody": {
"$bind": "root.children",
"$children": [
{
"tr": {
"$bind": "children",
"$children": [
{
"td": {
"$bind": "data.values",
"$children": [
{
"$if": {
"$check": "inCurrentMonth",
"$then": {
"div": [
"{{dayOfMonth}}"
]
}
}
}
]
}
}
]
}
}
]
}
}
]
}
]
}
}
]
}
]
}
Loading