Add Airtable-style calendar view component by Copilot · Pull Request #16 · objectstack-ai/objectui

Copilot · 2026-01-13T18:42:23Z

Implementation Plan: Airtable Calendar Component

Summary

Successfully implemented an Airtable-style calendar component for Object UI with the following features:

Features Implemented

✅ Three View Modes: Month, Week, and Day views with smooth switching
✅ Flexible Data Mapping: Configure field names for title, dates, and colors
✅ Color Coding: Support for custom color mappings based on event types
✅ Interactive Navigation: Previous/Next buttons and "Today" quick navigation
✅ Event Display: Smart event rendering with time display for non-all-day events
✅ Multi-day Events: Properly displays events spanning multiple days
✅ Responsive Design: Tailwind CSS styling with full customization support
✅ JSDoc Documentation: All field mappings documented for auto-generation

Components Created

CalendarView UI component (packages/components/src/ui/calendar-view.tsx)
calendar-view renderer (packages/components/src/renderers/complex/calendar-view.tsx)
Documentation (docs/components/calendar-view.md)
Playground example with sample data

Recent Changes

Added JSDoc comments to field name mappings per Rule Add public roadmap, VitePress documentation site, and GitHub Pages deployment #3 (Schema First Mindset)
Removed redundant defaultView property, using only view for clarity
Updated property labels and descriptions for better documentation

Screenshot

Usage Example

{
  "type": "calendar-view",
  "view": "month",
  "colorField": "type",
  "colorMapping": {
    "meeting": "#3b82f6",
    "deadline": "#ef4444",
    "event": "#10b981"
  },
  "data": [
    {
      "id": 1,
      "title": "Team Meeting",
      "start": "2026-01-13T10:00:00.000Z",
      "type": "meeting"
    }
  ]
}

Original prompt

实现airtable日历组件

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

- Created CalendarView UI component with month/week/day views - Created calendar-view renderer for ComponentRegistry - Added support for data field mapping (title, dates, colors) - Integrated with existing component system Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>

- Added calendar-view example to playground - Updated component library documentation - Created comprehensive calendar-view component documentation - Tested all three view modes (month, week, day) Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>

- Remove unused CalendarIcon import - Extract default event color to constant - Fix date mutation issue in getEventsForDate function - Improve date comparison logic Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>

Copilot

Pull request overview

This PR implements an Airtable-style calendar view component for displaying records as events with Month, Week, and Day view modes. The implementation follows the Object UI architecture by providing both a base UI component and a schema-driven renderer that maps data fields to calendar events.

Changes:

Added CalendarView UI component with navigation controls and three view modes
Created schema-driven renderer with flexible field mapping and color coding support
Added documentation and playground examples

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
`packages/components/src/ui/calendar-view.tsx`	Base calendar UI component with Month/Week/Day views and event rendering
`packages/components/src/ui/index.ts`	Export statement for calendar-view component
`packages/components/src/renderers/complex/calendar-view.tsx`	Schema-driven renderer with field mapping and action callbacks
`packages/components/src/renderers/complex/index.ts`	Import statement for calendar-view renderer
`docs/components/calendar-view.md`	Component documentation with usage examples and API reference
`docs/spec/component-library.md`	Added calendar-view to component library spec
`apps/playground/src/data/examples.ts`	Added calendar-view example with sample event data

Copilot · 2026-01-13T23:51:51Z

packages/components/src/renderers/complex/calendar-view.tsx

+        const titleField = schema.titleField || 'title';
+        const startField = schema.startDateField || 'start';
+        const endField = schema.endDateField || 'end';
+        const colorField = schema.colorField || 'color';
+        const allDayField = schema.allDayField || 'allDay';


These field name mappings lack JSDoc comments explaining their purpose. According to Rule #3 (Schema First Mindset), every property in the Schema MUST have JSDoc to enable auto-generation of documentation.

Added JSDoc comments to all field name mappings (titleField, startDateField, endDateField, colorField, allDayField) for auto-documentation generation. See commit 4f7d2ea.

Copilot · 2026-01-13T23:51:51Z

packages/components/src/renderers/complex/calendar-view.tsx

+    return (
+      <CalendarView
+        events={events}
+        view={schema.view || schema.defaultView || 'month'}


Both 'view' and 'defaultView' properties serve the same purpose, creating redundancy. The inputs array at lines 156-168 also defines both. Consider using only one property name for clarity.

Suggested change

view={schema.view || schema.defaultView || 'month'}

view={schema.view || 'month'}

Removed the redundant defaultView property and updated the code to use only view with improved label and description. See commit 4f7d2ea.

huangyiirene · 2026-01-13T23:58:06Z

@copilot 修正所有并运行完整测试

…roperty - Added JSDoc comments to field name mappings (titleField, startField, etc.) for auto-documentation - Removed redundant 'defaultView' property, keeping only 'view' for clarity - Updated 'view' property label to 'View Mode' with description Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>

Copilot · 2026-01-14T00:04:51Z

@copilot 修正所有并运行完整测试

✅ 已修正所有PR评审意见并运行完整测试套件：

修正内容 (commit 4f7d2ea):

添加了JSDoc注释到字段映射 (titleField, startDateField, endDateField, colorField, allDayField)
移除了冗余的 defaultView 属性，仅保留 view 属性
更新了属性标签和描述

测试结果:

✅ packages/core: 1 passed
✅ packages/react: 2 passed
✅ packages/components: 1 passed
✅ packages/designer: 6 passed
✅ 总计: 10/10 tests passed

日历组件功能正常，所有三个视图模式（月/周/日）运行良好。

github-actions · 2026-01-14T00:06:33Z

✅ All checks passed!

✅ Type check passed
✅ Tests passed
✅ Lint check completed

- #39 showRecordCount: conditionally show/hide record count bar - #24 rowHeight: add short and extra_tall mapping in ListView + bridge - #7 sort: parse legacy string format "field desc" - #22 description: render view description below toolbar - #40 allowPrinting: add print button with window.print() - #31 virtualScroll: forward flag to grid view schema - #35 userActions: wire sort/search/filter/rowHeight to toolbar visibility - #38 addRecord: render "+ Add Record" button from spec config - #37 tabs: render tab bar UI for view tabs - #9 filterableFields: restrict FilterBuilder to whitelist fields - #8 searchableFields: scope search queries to specified fields - #36 appearance: wire showDescription and allowedVisualizations - #16 pageSizeOptions: add page size selector UI in status bar - #17-21: use spec kanban/calendar/gantt/gallery/timeline configs - #20 gallery: add typed GalleryConfig to ListViewSchema - #21 timeline: add typed TimelineConfig to ListViewSchema - Bridge: add short/extra_tall density mapping, filterableFields pass-through Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Initial plan

230e147

Copilot AI assigned Copilot and huangyiirene Jan 13, 2026

Copilot started work on behalf of huangyiirene January 13, 2026 18:45 View session

Copilot AI and others added 3 commits January 13, 2026 18:52

Fix code review issues in calendar-view

4c56bbb

- Remove unused CalendarIcon import - Extract default event color to constant - Fix date mutation issue in getEventsForDate function - Improve date comparison logic Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Create Airtable calendar component for project~~ Add Airtable-style calendar view component Jan 13, 2026

Copilot AI requested a review from huangyiirene January 13, 2026 19:02

Copilot finished work on behalf of huangyiirene January 13, 2026 19:02

huangyiirene requested review from Copilot and removed request for huangyiirene January 13, 2026 23:50

Copilot AI reviewed Jan 13, 2026

View reviewed changes

Copilot started work on behalf of huangyiirene January 13, 2026 23:58 View session

Copilot AI requested a review from huangyiirene January 14, 2026 00:05

Copilot finished work on behalf of huangyiirene January 14, 2026 00:05

huangyiirene marked this pull request as ready for review January 14, 2026 00:09

huangyiirene merged commit 16b44d4 into main Jan 14, 2026
1 of 5 checks passed

This was referenced Feb 22, 2026

fix: complete toolbar control visibility and end-to-end data flow for list view right-side panel #723

Merged

ListView Spec Protocol Gap — Implement 18 unimplemented properties #737

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Airtable-style calendar view component#16

Add Airtable-style calendar view component#16
huangyiirene merged 5 commits intomainfrom
copilot/implement-airtable-calendar-component

Copilot AI commented Jan 13, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 13, 2026

Uh oh!

Copilot AI Jan 14, 2026

Uh oh!

Copilot AI Jan 13, 2026

Uh oh!

Copilot AI Jan 14, 2026

Uh oh!

huangyiirene commented Jan 13, 2026

Uh oh!

Copilot AI commented Jan 14, 2026

Uh oh!

github-actions bot commented Jan 14, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	view={schema.view \|\| schema.defaultView \|\| 'month'}
	view={schema.view \|\| 'month'}

Conversation

Copilot AI commented Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Implementation Plan: Airtable Calendar Component

Summary

Features Implemented

Components Created

Recent Changes

Screenshot

Usage Example

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

huangyiirene commented Jan 13, 2026

Uh oh!

Copilot AI commented Jan 14, 2026

Uh oh!

github-actions bot commented Jan 14, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented Jan 13, 2026 •

edited

Loading