adam/vscode-front-matter
1
0 Fork 0
mirror of https://github.com/estruyf/vscode-front-matter.git synced 2026-10-30 23:41:57 +01:00
Code Issues 77 Packages Projects Releases Wiki Activity

Enhancement: Add Editorial Calendar tab to the content dashboard #773

New Issue
Open
opened 2026-10-05 03:04:46 +02:00 by adam · 0 comments
adam commented 2026-10-05 03:04:46 +02:00
Owner
Copy link
Copy source

Summary

Add a new Calendar tab to the Front Matter CMS dashboard that renders a monthly grid of content items positioned by their publish date. This gives editors a visual timeline of their content without requiring any external calendar library.

Motivation

Currently there is no way to visualize content scheduling at a glance. A monthly calendar view makes it easy to spot gaps, overdense dates, and the status of upcoming or past content.

Proposed solution

A new top-level Calendar route in the dashboard (/calendar) backed by a CSS Grid (7 columns) built entirely in React.

New components:

  • Calendar.tsx — main container, reads from AllPagesAtom, manages current month state
  • CalendarHeader.tsx — month/year title with prev/next navigation arrows
  • CalendarGrid.tsx — 7×6 CSS grid, groups pages by date using DateHelper.tryParse()
  • CalendarDay.tsx — single day cell with day number and list of items
  • CalendarItem.tsx — content chip showing truncated title and a status colour dot; clicking opens the file via DashboardMessage.openFile
  • useCalendar.tsx hook — computes a Map<dateKey, Page[]> for the current month

Status colour coding:

  • Draft → amber
  • Published → green
  • Scheduled / future-dated → blue

Files to modify:

File Change
src/dashboardWebView/models/NavigationType.ts Add Calendar = 'calendar'
src/dashboardWebView/index.tsx Add calendar to routePaths
src/dashboardWebView/components/App.tsx Register <Calendar /> route
src/dashboardWebView/components/Header/Tabs.tsx Add Calendar tab behind a feature flag
src/constants/Features.ts Add calendar.view feature flag
package.json Add localisation key + feature flag config entry

Acceptance criteria

  • Calendar tab is visible in the dashboard
  • Content items appear on the correct day cells matching their date front matter field
  • Draft / published / future-dated items render with the correct colour
  • Clicking a calendar item opens the corresponding file in the editor
  • Prev/next month navigation re-renders the grid correctly
## Summary Add a new **Calendar** tab to the Front Matter CMS dashboard that renders a monthly grid of content items positioned by their publish date. This gives editors a visual timeline of their content without requiring any external calendar library. ## Motivation Currently there is no way to visualize content scheduling at a glance. A monthly calendar view makes it easy to spot gaps, overdense dates, and the status of upcoming or past content. ## Proposed solution A new top-level **Calendar** route in the dashboard (`/calendar`) backed by a CSS Grid (7 columns) built entirely in React. **New components:** - `Calendar.tsx` — main container, reads from `AllPagesAtom`, manages current month state - `CalendarHeader.tsx` — month/year title with prev/next navigation arrows - `CalendarGrid.tsx` — 7×6 CSS grid, groups pages by date using `DateHelper.tryParse()` - `CalendarDay.tsx` — single day cell with day number and list of items - `CalendarItem.tsx` — content chip showing truncated title and a status colour dot; clicking opens the file via `DashboardMessage.openFile` - `useCalendar.tsx` hook — computes a `Map<dateKey, Page[]>` for the current month **Status colour coding:** - Draft → amber - Published → green - Scheduled / future-dated → blue **Files to modify:** | File | Change | |---|---| | `src/dashboardWebView/models/NavigationType.ts` | Add `Calendar = 'calendar'` | | `src/dashboardWebView/index.tsx` | Add `calendar` to `routePaths` | | `src/dashboardWebView/components/App.tsx` | Register `<Calendar />` route | | `src/dashboardWebView/components/Header/Tabs.tsx` | Add Calendar tab behind a feature flag | | `src/constants/Features.ts` | Add `calendar.view` feature flag | | `package.json` | Add localisation key + feature flag config entry | ## Acceptance criteria - [ ] Calendar tab is visible in the dashboard - [ ] Content items appear on the correct day cells matching their `date` front matter field - [ ] Draft / published / future-dated items render with the correct colour - [ ] Clicking a calendar item opens the corresponding file in the editor - [ ] Prev/next month navigation re-renders the grid correctly <!-- github-sync-id:4597916782 -->
Sign in to join this conversation.
No Branch/Tag Specified
Labels
No items
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
adam (Adam Wojcieszonek)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: adam/vscode-front-matter#773