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

Real-time Video Chat

AI Scene Analysis

Collaborative Editing

AI-Powered Color Grading

+1 more

Cloud Asset Management

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.

Prop	Type	Default
`locale`	`LocalesArgument`	-
`children`	`ReactNode`	-
`className`	`string`	-

CalendarDate

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

Prop	Type	Default
`children`	`ReactNode`	-

CalendarDatePicker

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

Prop	Type	Default
`className`	`string`	-
`children`	`ReactNode`	-

CalendarMonthPicker

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

Prop	Type	Default
`className`	`string`	-

CalendarYearPicker

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

Prop	Type	Default
`className`	`string`	-
`start`	`number`	-
`end`	`number`	-

CalendarDatePagination

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

Prop	Type	Default
`className`	`string`	-

CalendarHeader

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

Prop	Type	Default
`className`	`string`	-

CalendarBody

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

Prop	Type	Default
`features`	`Feature[]`	-
`children`	`(props: { feature: Feature; }) => ReactNode`	-

CalendarItem

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

Prop	Type	Default
`feature`	`Feature`	-
`className`	`string`	-

Calendar

On this page