Roadmap UIRoadmap UI

Calendar

The calendar view displays features on a grid calendar. Specifically it shows the end date of each feature, and groups features by day.

Sun
Mon
Tue
Wed
Thu
Fri
Sat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Real-time Video Chat
20
21
22
23
24
25
26
AI Scene Analysis
Collaborative Editing
AI-Powered Color Grading
+1 more
27
28
29
30
31
Cloud Asset Management
1
2
3
4

Installation

npx roadmap-ui add calendar

Features

  • Features are grouped by day
  • Features are color-coded by their status
  • Features are truncated if there are too many to fit in the grid cell
  • Selectable date range
  • Pagination of dates
  • Internationalization through locale prop

Code

calendar.tsx
'use client';
 
import { exampleFeatures } from '@/lib/content';
import {
  CalendarBody,
  CalendarDate,
  CalendarDatePagination,
  CalendarDatePicker,
  CalendarHeader,
  CalendarItem,
  CalendarMonthPicker,
  CalendarProvider,
  CalendarYearPicker,
} from '@/components/roadmap-ui/calendar';
import type { FC } from 'react';
 
const earliestYear = exampleFeatures
  .map((feature) => feature.startAt.getFullYear())
  .sort()
  .at(0) ?? new Date().getFullYear();
 
const latestYear = exampleFeatures
  .map((feature) => feature.endAt.getFullYear())
  .sort()
  .at(-1) ?? new Date().getFullYear();
 
export const CalendarExample: FC = () => (
  <CalendarProvider>
    <CalendarDate>
      <CalendarDatePicker>
        <CalendarMonthPicker />
        <CalendarYearPicker start={earliestYear} end={latestYear} />
      </CalendarDatePicker>
      <CalendarDatePagination />
    </CalendarDate>
    <CalendarHeader />
    <CalendarBody features={exampleFeatures}>
      {({ feature }) => <CalendarItem key={feature.id} feature={feature} />}
    </CalendarBody>
  </CalendarProvider>
);

Subcomponents

The Calendar component is made up of the following subcomponents:

CalendarProvider

The CalendarProvider component is used to provide the features to the calendar.

PropTypeDefault
locale
LocalesArgument
-
children
ReactNode
-
className
string
-

CalendarDate

The CalendarDate component is used to display the date of the calendar.

PropTypeDefault
children
ReactNode
-

CalendarDatePicker

The CalendarDatePicker component is used to contain the date picker of the calendar.

PropTypeDefault
className
string
-
children
ReactNode
-

CalendarMonthPicker

The CalendarMonthPicker component is used to display the month picker of the calendar.

PropTypeDefault
className
string
-

CalendarYearPicker

The CalendarYearPicker component is used to display the year picker of the calendar.

PropTypeDefault
className
string
-
start
number
-
end
number
-

CalendarDatePagination

The CalendarDatePagination component is used to display the pagination of the calendar.

PropTypeDefault
className
string
-

CalendarHeader

The CalendarHeader component is used to display the header of the calendar.

PropTypeDefault
className
string
-

CalendarBody

The CalendarBody component is used to display the body of the calendar.

PropTypeDefault
features
Feature[]
-
children
(props: { feature: Feature; }) => ReactNode
-

CalendarItem

The CalendarItem component is used to display a single item in the calendar.

PropTypeDefault
feature
Feature
-
className
string
-

On this page